jQuery
介绍
- jQuery是一个快速、简洁的JavaScript框架，宗旨是写得少，做的多。
- 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- 核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
大致为 ：选择器，文档处理，属性操作，类操作，遍历，事件，动画，Ajax，存储 等。
jQuery选择器
- 基本选择器
#id id匹配
.class 类匹配
Element 元素名匹配
匹配所有元素
E1,E2,E3 分组匹配 - 层次选择器
$(“E1 E2”) 选择E1下所有E2
$(“E1> E2”) 选择E1下的子E2,的元素
$(“E1+ E2”) 选择E1后紧相邻的
$(“E1~ E2”) 选择E1之后的所有
补充说明：
( “ E 1 + E 2 ” ) 可 以 用 (“E1 + E2”)可以用 (“E1+E2”)可以用(E1).next(E2)代替
( “ E 1 E 2 ” ) 可 以 用 (“E1 ~ E2”)可以用 (“E1E2”)可以用斜体样式(E1).nextAll(E2)代替
- 过滤选择器
- 通过特定的过滤规则来筛选出需要的DOM元素，以冒号(:)开头。
- 3.1 基本过滤选择器
:first
:last
:not(E1) 去除所有E1选择器匹配的元素
:even 偶数
:odd 奇数
:eq(index) 索引值是index
:gt(index) 索引值大于index的元素
:lt(index) 索引值小于index的元素
:header 所有标题元素
:animated 正在执行动画的所有元素
3.2 内容过滤选择器
:contains(text) 含有text文本内容的元素
:empty 不包含子元素或文本的空元素
:has(E1) 包含有(E1选择器匹配的元素) 的所有元素
:parent 含有子元素或文本的元素
3.3 可见性过滤选择器
:hidden 所有不可见元素
:visible 所有可见元素
3.4 属性过滤选择器
[attribute] 拥有此属性的元素
[attribute=value] 属性值为value的元素
[attribute!=value] 属性值不为value的元素
[attribute^=value] 属性值以value开始的元素
[attribute$=value] 属性以value值结束的元素
[attribute*=value] 属性中含有value的元素
[A1][A2]…A[N] 用属性选 择器合并成一个复合属性选择器。满足多个条件。
3.5 子元素过滤选择器
:nth-child(index/even/odd) 父元素下的第index素或奇偶元素
:first-child 每个父元素的第1个子元素
:last-child 每个父元素的最后1
:only-child 某个元素是它父元素中惟一的子元素, 将会被匹配. 如果元素中含有其他元素,则不会被匹配
:nth-child()
3.6 表单对象属性过滤选择器
:enabled 所有可用元素
:disabled 所有不可用元素
:checked 所有被选中的元素(单选框,复选框)
:selected 所有被选中的选项元素(下拉列表)
表单选择器
:input 匹配所有 元素
:text 所有单行文本框 集合元素 $(“:text”)
:password 所有密码框 集合元素 $(“:password”)
:radio 所有单选框 集合元素 $(“:radio”)
:checkbox 所有复选框 集合元素 $(“:checkbox”)
:submit 匹配所有提交按钮 集合元素 $(“:submit”)
:image 匹配所有图像按钮 集合元素 $(“:image”)
:reset 匹配所有重置按钮 集合元素 $(“:reset”)
:button 匹配所有按钮 集合元素 $(“:button”)
:file 匹配所有文件域 集合元素 $(“:file”)
:hidden 匹配所有不可见元素 集合元素 $(“:hidden”)
文档处理
内部插入
append / appendto 向后追加
prepend / prependto 向前追加（最上边）world!")
html( )
:获取匹配元素集合中第一个元素的HTML内容并返回字符串
text()方法
获取匹配元素集合中每个元素的内容并返回字符串
val()方法
元素的值通过 value 属性设置的。多用于 input 元素。
外部插入
before / insertBefore
此方法将参数指定的内容插入到匹配元素集合中的每个元素之前，并返回jQuery对象。
删除
remove()方法
移除被选元素，包括所有文本和子节点
detach()方法
移除被选元素，包括所有文本和子节点detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
empty()方法
从被选元素移除所有内容，包括所有文本和子节点。
替换
replaceWith()方法
用指定的 HTML 内容或元素替换被选元素
例：$(“p”).replaceWith(“Hello world!”);
复制
.clone()方法
例： ( " b o d y " ) . a p p e n d ( (“body”).append( (“body”).append((“p”).clone());
包装
1.wrap()方法
例：$(“p”).wrap("
单个p
");
2.wrapAll()方法
$(selector).wrapAll(wrapper) 在指定的 HTML内容或元素中放置 所有 被选的元素
3.unwrap()方法
$(selector).unwrap() 删除被选元素的父元素
4.wrapInner()方法
$(selector).wrapInner(wrapper)使用指定的HTML 内容或元素，来包裹每个被选元素中的所有内容
属性操作
1.元素属性操作
获取/设置
attr()方法
设置或获取被选元素的属性值/自定义属性返回属性值
获取属性 例： ( " i m g " ) . a t t r ( " w i d t h " ) ; 设 置 属 性 例 ： (“img”).attr(“width”); 设置属性 例： (“img”).attr(“width”);设置属性例：(“img”).attr({“width”:“180”,‘height’:‘150’}); – 大号变为json对象
prop() 方法
设置或返回被选元素的属性和值（计算过的）
2.删除属性
removeAttr()方法
从被选元素中移除属性例：$(“p”).removeAttr(“id”)
removeProp() 方法
移除由 prop() 方法设置的属性。
样式属性操作
1. 设置样式
CSS()方法 ：计算过的样式
设置或返回被选元素的一个或多个样式属性。
$(“p”).css(“background-color”) #获得
$(“p”).css(“background-color”,‘red’)#设置
2. 位置
offset()方法
返回或设置匹配元素相对于文档的偏移（位置）
$(selector).offset().left/top 获取
$(selector).offset({x:100,y:100}), 设置 自动设置成了定位
position()
返回匹配元素相对于父元素的位置（偏移）
此方法只对可见元素有效。
scrollLeft()
返回或设置匹配元素的滚动条的水平位置
$(“div”).scrollLeft(100);
scrollTop()
返回或设置匹配元素的滚动条的垂直位置
$(“div”).scrollTop(100);
3. 尺寸
width()
返回或设置匹配元素的宽度
innerWidth()
返回元素的宽度,该方法包含padding，但不包含 border 和margin
outerWidth()
返回元素的高度,包含 padding 和border
outerWidth(true)
返回元素的高度,包含 padding 和border 和margin
