锋利的jQuery学习第二章

浏览数：25 / 时间：2015年06月09日

第二章 jQuery选择器
1.CSS中常用的选择器：
(1).标签选择器 td{}
(2).ID选择器 #nav{}
(3).类选择器 div.highlight{} .highlight{}
(4).群组选择器 td，p，div，a{} 同时选择多种
(5).后代选择器 E F{} 元素E的任意后代元素F，#links a{}
(6).通配选择符 *{} 文档的所有元素作为选择符

2.jQuery选择器
selector1，selector2...selectorN...将每一个选择器匹配到的元素合并后一起返回。例如：$("div,span,p.myclass")选取所有<div>,<span>和拥有myclass的<p>标签的一组元素。
(1)层次选择器：
1)$("A B")选取A元素里的所有Ｂ(后代元素) 包含内层
2)$("A>B")选取A元素下的B元素(子元素）。。。。不包含内层
3)$("A+B")选取紧接在A元素后的B元素，例如：$(".one+div")选取class为one的下一个div元素
4)$("A~B")选取A元素之后的所有siblings元素，例如：$("#two~div")选取id为two的元素后面的所有div兄弟元素
可以使用next（）方法代替$("A+B"),例：$("A+B")------$("A").next("B");
可以使用nextAll（）方法代替$("A~B")，例：$("A~B")------$("A").nextAll("B");
$("A~B")只能选择A元素后面的同辈元素，而siblings（“B"）方法与前后位置无关，同辈结点都能匹配
(2)过滤选择器：
1)基本过滤
:first 选取第1个元素，$("div:first")选取所有div元素中第一个div元素.....
:last 选取最后一个元素
:not(selector)去除所有与给定选择器匹配的元素,例:$("input:not(.myclass)")选取class不是myclass的input元素
:even选取索引是偶数的所有元素
:odd选取索引是奇数的所有元素
:eq(index)选取索引是index的元素索引从0开始
:gt(index)选取索引大于index的元素
:lt(index)选取索引小于index的元素
:header选取所有标题元素,如h1,h2...
:animated选取当前正在执行动画的元素
2)内容过滤选择器(主要体现在他所包含的子元素或文本内容上)
:contains(text)选取含有文本内容为"text" 的元素
:empty 选取不包含子元素或文本的空元素
:has(selector)选取含有选择器所匹配的元素,例:$("div:has(p)")选取含有P元素的div元素
:parent选取含有子元素或者文本的元素
3)可见性过滤选择器
:hidden选取所有不可见的元素,包含<input type="hidden"> <div style="display:none">和<div style="visibility:hidden">的元素
:visible选取所有可见元素
4)属性过滤选择器
[attribute]选取拥有此属性的元素
[attribute=value]选取属性值为value的元素
[attribute!=value]选取属性值不为value的元素
[attribute^=value]选取属性值以value开头的元素
[attribute$=value]选取属性值以value结束的元素
[attribute*=value]选取属性值含有value的元素
[selector1][selector2][selectorN]合并成一个复合选择器,例:$("div[id][title$=‘test‘])选取拥有属性id,title以test结束的元素
5)子元素过滤选择器
:nth-child(index/even/odd/equation)选取每个父元素下的第index个元素或奇偶元素(index从1算起)
:first-child选取每个父元素的第一个子元素,返回集合元素,例:$("ul li:first-child")选取每个ul中第一个li元素
:last-child选取每个父元素的最后一个子元素
:only-child如果某个元素是他父元素下的唯一一个子元素,那么他将会被匹配
:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素
6)表单对象过滤选择器
:enable所有可用元素
:disabled所有不可用元素
:checked被选中的元素(单选框,复选框) 例:$("input:checked");
:selected所有被选中的选项元素(下拉列表)例:$("select:selected")
7)表单选择器,获取表单的某个或某类型的元素
:input获取所有的<input>,<textarea>,<select>,<button>元素,例:$(":input")
:text获取所有单行文本框 $(":text")
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden