jQuery-强大的jQuery选择器
jQuery中选择器很强大,可以根据元素名称、ID、 class 等多种方式进行选择, <ul id= "id" > <li> <div> nihao <div class = "className" > china!!! </div> </div> </li> </ul> $( "div" ), 选则所有div元素 <div>nihao<div class = "className" >china!!!</div></div>, <div class = "className" >china!!!</div> $( "#id" ), 选择id= "id" 的元素 <ul id= "id" ><li><div>nihao<div class = "className" >china!!!</div></div></li></ul> $( ".className" ), 选择 class = "className" 的所有元素 <div class = "className" >china!!!</div> 也可以多个方式一起使用,提高效率, $( "#id div .className" ) , 选择id= "id" 的元素下面 class = "className" 的所有div <div class = "className" >china!!!</div> 亦可以同时选取多个元素进行操作, $( "#id , .className" ), 选择id= "id" 的元素,以及 class = "className" 的元素 <ul id= "id" > <li><div>nihao<div class = "className" >china!!!</div></div></li></ul>, <div class = "className" >china!!!</div> 注意通过$选取获得的是jQuery对象而不是Dom元素,若想转换成Dom元素可以采用 get ()方法。 层级选择器: $( "#id div .className" ) 选择父元素下面的所有子元素,这里要选择的是#id 下面的所有的div中的所有 class 名为className的元素。 $( "body>div" ) 选择父元素的下一级别且仅为下一级别的子元素。 <div>nihao<div class = "className" >china!!!</div></div>。 $( "prev+next" ) 紧跟在prev后面的元素。(找兄弟节点) $( "ul~input" ) 找出所有与ul同辈的input元素。 其他一些特殊的匹配规则: <div><p>John</p> Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> $( "div:contains(George)" ) , 匹配包含指定文本的元素, <div>George Martin</div> $( "div:has(p)" ), 匹配包含指定元素 "p" 的元素, <div><p>John</p> Resig</div> $( "div:first" ), 获取第一个元素, <div><p>John</p> Resig</div> $( "div:last" ), 获取最后一个元素, <div>Malcom John Sinclair</div>。 $( "div:even" ), 匹配所有索引为偶数的元素, <div><p>John</p> Resig</div> , <div>Malcom John Sinclair</div> $( "div:odd" ), 匹配所有索引为奇数的元素, <div>George Martin</div> 基本选择器 $(”#myDiv”) 匹配唯一的具有此id值的元素 $(”div”) 匹配指定名称的所有元素 $(”.myClass”) 匹配具有此 class 样式值的所有元素 $(”*”) 匹配所有元素 $(”div,span,p.myClass”) 联合所有匹配的选择器 层叠选择器 $(”form input”) 后代选择器,选择ancestor的所有子孙节点 $(”#main > *”) 子选择器,选择parent的所有子节点 $(”label + input”) 临选择器,选择prev的下一个临节点(同级别节点) $(”#prev ~ div”) 同胞选择器,选择prev的所有同胞节点 基本过滤选择器 $(”tr:first”) 匹配第一个选择的元素 $(”tr:last”) 匹配最后一个选择的元素 $(”input:not(: checked ) + span”)从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器) $(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始) $(”tr:odd”) 匹配集合中奇数位置的所有元素(从0开始) $(”td:eq(2)”) 匹配集合中指定位置的元素(从0开始) $(”td:gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始) $(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(从0开始) $(”:header”) 匹配所有标题 $(”div:animated”) 匹配所有正在运行动画的所有元素 内容过滤选择器 $(”div:contains(’John’)”) 匹配含有指定文本的所有元素 $(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素) $(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素 $(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算) $(”div:hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域 $(”div:visible”) 匹配所有可见的元素 属性过滤选择器 $(”div[id]”) 匹配所有具有指定属性的元素 $(”input[name=’newsletter’]”) 匹配所有具有指定属性值的元素 $(”input[name!=’newsletter’]”) 匹配所有不具有指定属性值的元素 $(”input[name^=’news’]”) 匹配所有指定属性值以value开头的元素 $(”input[name$=’letter’]”) 匹配所有指定属性值以value结尾的元素 $(”input[name*=’man’]”) 匹配所有指定属性值含有value字符的元素 $(”input[id][name$=’man’]”) 匹配同时符合多个选择器的所有元素 子元素过滤选择器 $(”ul li:nth-child(2)”), $(”ul li:nth-child(odd)”), 匹配父元素的第n个子元素 $(”ul li:nth-child(3n + 1)”) $(”div span:first-child”) 匹配父元素的第1个子元素 $(”div span:last-child”) 匹配父元素的最后1个子元素 $(”div button:only-child”) 匹配父元素的唯一1个子元素 表单元素选择器 $(”:input”) 匹配所有的表单输入元素,包括所有类型的input, textarea, select
和button $(”:text”) 匹配所有类型为text的input元素 $(”:password”) 匹配所有类型为password的input元素 $(”:radio”) 匹配所有类型为radio的input元素 $(”:checkbox”) 匹配所有类型为checkbox的input元素 $(”:submit”) 匹配所有类型为submit的input元素 $(”:image”) 匹配所有类型为image的input元素 $(”:reset”) 匹配所有类型为reset的input元素 $(”:button”) 匹配所有类型为button的input元素 $(”:file”) 匹配所有类型为file的input元素 $(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域 表单元素过滤选择器 $(”:enabled”) 匹配所有可操作的表单元素 $(”:disabled”) 匹配所有不可操作的表单元素 $(”: checked ”) 匹配所有已点选的元素 $(” select
option:selected”) 匹配所有已选择的元素 |
http://www.blogjava.net/ywj-316/archive/2010/01/21/310340.html
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。