标签：
jquery中的选择器共分为四大类。其简单结构如下：
基本选择器
|-----ID选择器
|-----类选择器
|-----元素选择器
|-----*选择器
|-----联合选择器
层级选择器
|-----祖先-后代选择器
|-----父辈-字辈选择器
|-----同辈选择器
过滤选择器
|-----基本过滤选择器
|-----内容过滤选择器
|-----可见性过滤选择器
|-----属性过滤选择器
|-----子元素过滤选择器
|-----表单对象属性过滤选择器
表单选择器
对于jquery选择器的详细描述如下：
一. 基本选择器
1. ID选择器
$(‘#idName‘):返回一个封装了指定id的dom元素的jQuery对象。
注：如果有多个相同的id值，则以第一个id为准。若没有这个id，则返回空的jquery对象
2. 类选择器（class）
$(‘.className‘):返回封装了带有指定css类名的所有DOM元素的jQuery对象，可能有一个或多个。若没有这个class则返回空jquery对象。
3. 元素选择器（element）
$(‘span‘):返回封装了指定标签名称的DOM元素的jQuery对象。若没有这个标签名称则返回空jquery对象。
4. *选择器
$(‘*‘):选择文档中的所有元素。
5.联合选择器
$(‘div,p,span‘):选择div,p,span标签的元素。在这种选择器中，可以在$()中添加多个选择器，而每个选择器也可以很复杂，比如：
$(‘div p:first-child,p>span:nth-child(3),span:not(.one,.two)‘)等。
二. 层级选择器
1. 祖先-后代选择器
$(‘div p‘):查找div中所有后代中的p元素
2. 父辈-子辈选择器
$(‘div>p‘):查找div中所有的子代中的p元素
3. 同辈选择器
a. $(‘h2 + p‘):查找和h2相邻的p元素，并且h2和p必须是同级元素且相邻的,如
<div> <h2>title</h2> <p>content</p> </div> <p>outer</p> <script> alert($(‘div+p‘).text()); </script>
这段代码的结果是content。
b. $(‘h2~p‘):查找h2后面的所有的p元素，并且h2和p必须是同级元素,但是不需要是相邻的，如
<div> <p class = ‘a‘>p1</p> <span>span1</span> <p>p2</p> <span>span2</span> <p>p3</p> <span>span3</span> </div> <script> $(function(){ $(‘.a+span‘).text(‘11111‘); }); </script>
这段代码中查找的是class为a的后面所有的同级的span元素，将其内容改为11111，可见结果是三个span的内容都为11111。
三. 过滤选择器
1. 基本过滤选择器
a. 首尾元素选择器
$(‘div:first‘):查找第一个div元素
$(‘div:last‘):查找最后一个div元素
注：这两个选择器值选择一个元素，因此从上到下只要找到一个符合条件的元素就立即返回
<div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script> $(function(){ alert($(‘ul li:first‘).html（）); }); </script>
上述代码的结果是第一个ul的第一个li中的1。
b. 非选择器
$(‘span:not(#d)‘):选择ID不是d的span元素
注：:not()括号内也为选择器，比如:not(ul li:first-child))或者更加复杂的选择器都可以组合。
<ul> <li class = ‘d‘>222</li> <li class = ‘d‘>222</li> <li class = ‘d‘>222</li> <li>222</li> <li>222</li> <li class = ‘d‘>222</li> </ul> <script> $(function(){ $(‘.d:not(ul>li:first-child):not(ul>li:last-child)‘).text(‘111‘); }); </script>
这段代码的结果是第2，3的text为111。
c. 奇偶选择器
$(‘div:even‘):查找dom中索引值为基数的div元素
注：对于$(‘div:even‘)来说，这种选择方式是不区分父辈还是字辈的，是统一进行索引编号的。但是这种情况基本使用不到的。另外索引值使用0开始的，因为0也算偶数，所以第一个都是被选择的。
<div class = ‘one‘>0 -------index = 0 even <div class = ‘two‘>1 -------index = 1 <div class = ‘three‘>1.1</div> -------index = 2 even </div> <div class = ‘four‘>2</div> -------index = 3 </div> <div class = ‘five‘>3</div> -------index = 4 even <script> $(function(){ $(‘div:even‘).each(function(){ alert($(this).text()); }); }); </script>
这段代码就说明了当出现使用$(‘div:even‘)时的情况，其结果是将class为one,three,five的div的test输出。但是倘若我们不希望将子类的子类中的元素也进行编码，只对最外围的div进行选取，那么选择器就要改成为父辈-子辈选择器（当前是祖先-后代选择器):$(‘document>div:even‘)，那么此时的输出结果就是将class为one的div元素中的内容输出。
$(‘div:odd‘):查找dom中索引值为偶数的div元素。
d. 范围选择器
$(‘li:eq(0)‘):选取索引值为0的li元素。
这种选择器和奇偶选择器一样，是不区分父辈还是子辈的，都是统一进行索引编号。如下：
<ul class = ‘list‘> <li> <ul> <li>1.1</li> <li>1.2</li> <li>1.3</li> <li>1.4</li> </ul> </li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> $(function(){ alert($(‘ul.list li:eq(1)‘).html()); }); </script>
上述的代码中寻找的是class为list的ul中的第2个li（因为索引是从0开始），由于第一个li中嵌套了一个ul，这个ul中又有四个li，那么最终的结果就将是1.1。倘若不希望将li的子代的ul中的li也进行编码索引，就将其改为父辈-子辈选择器：$(‘ul.list>li:eq(1)‘)，那么此时的结果就是2了。
$(‘ul li:gt(3)):在ul中查找索引值大于3的li。
$(‘ul li:lt(4)):在ul中查找索引值小于4的li。
e. 标题元素选择器
$(‘:header‘)：查找h1-h6的元素。
2. 内容过滤选择器
$(‘p:contains("text")‘)：选择p标签中包含‘text‘字符串的元素。
<p>1111</p> <p>2222</p> <p>1122</p> <p>3333</p> <p>4444</p> <p>3344</p> <script> $(function(){ $(‘p:contains("22")‘).text("5555"); }); </script>
这段代码选择内部文本包含’22‘的p标签元素，并将其文本设置为’5555‘。结果是第2、3个p标签元素被选择。
$(‘.p:empty‘):选择不包含文本并且不包含子元素的元素；
$(‘div:has(p:contains("text")‘):选择包含p标签且这个p含有’text字符串的div元素。
一开始我把这个形式的选择器和祖先-后代选择器弄混了，但二者的区别是祖先-后代选择器的返回结果是后代元素，而:has返回的是祖先元素
<div> <p> <span class = ‘one‘>123</span> </p> </div> <script> $(function(){ alert($("div:has(.one)").html()); }); </script>
在这段代码中，$(‘div:has(.one)‘)最终选择的就是div，但是倘若写成这样的话：$(‘div :has(.one)‘)，最终选择的就是p了，因为中间加了空格之后就变成了选择div中其后代元素class为one的元素，那么可想而知最终选择结果可以为多个。
$(‘div:parent‘):选择div中有内容的元素，就是包含子元素或文本内容的元素。(一开始以为是父元素......)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src = ‘zhongjian/js/jquery-1.11.2.min.js‘ type = ‘text/javascript‘>1</script> </head> <body> <div class = ‘two‘> <div> <p> <span class = ‘one‘>123</span> </p> </div> </div> <script> $(function(){ alert($(‘:parent‘).html()); }); </script> </body> </html>
上面的代码是完整的html代码，那么使用了$(‘:parent‘)之后，共有9个元素被选择：html,head,title,body,div(class=two),div,p,span,script。注意这个选择器和:has选择器的空格问题。这个和:empty选择器是相反的。
3. 可见性过滤选择器
$(‘:hidden‘)：匹配可见元素。
$(‘:visible‘): 匹配不可见元素。
对于隐藏元素，这里要提到display:none 和 visibility:hidden。而要理解这两个的区别从三个方面考虑：
空间占据：设置隐藏后受否还占据空间；
回流与渲染：这部分知识在http://www.cnblogs.com/jyybeam/p/5776667.html
株连性 ：若祖先元素发生改变，后代元素是否也会发生改变。
对于display:none，由于被设置为这一样式的容器不会占据空间，因此会发生重绘，而且其后代元素也会被设置为display:none，被株连。
而visibility:hidden，容器依旧会占据空间，因此不会发生重绘，而对于后代元素如果应用了visibility:visible，则依旧会显示出来，不会被株连。如下：
<div class = ‘two‘ style = ‘visibility:hidden‘> <div> <p> <span class = ‘one‘ style = ‘visibility:visible‘>123</span> </p> </div> </div>
此时虽然span的祖先元素div被设置为visibility:hidden，但是由于span本身被设置为visibility:visible，所以span依旧会显示出来。
那么，言归正传。这个:hidden，到底指的是哪个呢？看下面的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src = ‘zhongjian/js/jquery-1.11.2.min.js‘ type = ‘text/javascript‘>1</script> </head> <body> <div class = ‘two‘ style = ‘visibility:hidden‘> <div> <p> <span class = ‘one‘>123</span> </p> </div> </div> <script> $(function(){ alert($(‘:hidden‘).length); }); </script> </body> </html>
最后的答案是5个：head，meta,title,script,script，看到并没有div，说明:hidden并不适用于visibility。接下来：
<div class = ‘two‘ style = ‘display: none‘> <div> <p> <span class = ‘one‘>123</span> </p> </div> </div> <script> $(function(){ alert($(‘:hidden‘).length); }); </script>
答案是9个！，那么问题来了，即便算上div不是应该6个吗？答案就是犹如display的“株连性”，他的后代元素也被设定为display:none了，因此在上面的基础上又增加了div(.two),div,p,span这四个，总共加起来是9个。ok！
4. 属性过滤选择器
$(‘[class]‘):选择有class属性的元素。
$(‘[class][id][d]‘):选择有class、id、d属性的元素。
注：在这种选择器中支持自定义的属性
$(‘[class=one]‘):选择class属性为one的元素。
$(‘[class!=one]‘):选择class属性不为one的元素。
$(‘[class^=one]‘):选择class属性以one开头的元素。
$(‘[class$=one]‘):选择class属性以one结尾的元素。
$(‘[class|=one]‘):选择class属性为one或以one-开头的元素
注：是以‘one-’开头，而不是‘one‘开头
<div class = ‘two‘> <div> <p> <span class = ‘one‘ id = ‘id_span‘ d = ‘dat‘>123</span> <span class = ‘one two‘>222</span> <span class = ‘one-two‘>333</span> <span class = ‘onetwo‘>444</span> </p> </div> </div> <script> $(function(){ alert($(‘[class|=one]‘).length); }); </script>
上面的代码的结果是2，也就是class分别为one和one-two的元素。
$(‘[class~=one]‘)：选择clss属性值为one或包含’one‘字符串的元素。
注：这种选择器表示属性值必须以空格分割，或者属性值等于one。
<div class = ‘two‘> <div> <p> <span class = ‘one‘ id = ‘id_span‘ d = ‘dat‘>123</span> <span class = ‘one two‘>222</span> <span class = ‘two one-two‘>333</span> <span class = ‘onetwo‘>444</span> </p> </div> </div> <script> $(function(){ alert($(‘[class~=one]‘).length); }); </script>
结果是2，选择到的是class分别为one和‘one two’的元素。
$(‘[class*=one]‘):选择属性值包含one的元素。
5. 子元素过滤选择器
$(‘div p:first-child):查找div中的第一个p元素。
注：用到first-child时p必须是div的第一个子元素，因此这个选择器是选择第一个子元素，如果这个子元素不是p的话就返回空jquery对象
<div>
<span>span1</span>
<p class = ‘a‘>p1</p>
<p>p2</p>
<span>span2</span>
<p>p3</p>
<span>span3</span>
</div>
<script>
$(function(){
$(‘div p:first-child‘).text(‘11111‘);
$(‘div span:first-child‘).text(‘22222‘);
});
</script>
这段代码会使第一个span的text为222222。而div中的第一个p的text不会是11111，因为它不是div的第一个子元素。
$(‘div p:last-child):查找div中最后一个为p标签的子元素。
注：last-child和first-child一样，last-child必须是div中的最后一个子元素，如果它不是p的话，返回空对象
$(‘p:nth-child(2)‘):选择第二个p元素。
注：此处的序号不是以0开始的，而是从1开始的。
<div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <script> $(function(){ alert($(‘p:nth-child(2)‘).html()); }); </script>
这段代码的结果就是2，选择的就是第二个p元素。
$(‘p:nth-child(2n+1):选择第2n+1(n = 0,1,2,3....)个p元素
在这里n是从0开始的自然数，可以选择多个元素。
<div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </div> <script> $(function(){ alert($(‘p:nth-child(2n+1)‘).length); }); </script>
这段代码的结果是3个，选择到的是第1、3、5个p元素。
$(‘span:only-child‘):选择父节点只有一个span子节点的那个子节点。
<div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <span>span</span> <p>6</p> </div> <div> <span>span</span> </div> <script> $(function(){ alert($(‘span:only-child‘).html()); }); </script>
结果是span，选择的是第二个div中的那个span元素。
$(‘p:nth-last-child(2)‘):选择倒数第二个p元素。
在nth-last-child的括号中可以添加数字、数学表达式（2n+3等）、event/odd等。
$(‘p:first-of-type‘):选择子元素中第一个类型是p标签的子元素。
<div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <span>span</span> <p>6</p> </div> <script> $(function(){ alert($(‘span:first-of-type‘).html()); }); </script>
这段代码的结果是span，选择到的是div中唯一的一个span元素。可以看到这个选择器与first-child的不同是first-child选择的必须是第一个子元素。同样的如果选择器是$(‘p:first-of-type‘)，那么结果就是1，选择到的就是div中类型为p的第一个p元素。
$(‘p:last-of-type‘):选择到的类型为p元素的最后一个p元素。
$(‘p:only-of-type‘):选择到是父元素中唯一一个类型的p元素。
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<p>3434</p>
<span>4</span>
</div>
<script>
$(function(){
alert($(‘p:only-of-type‘).html());
});
</script>
上述代码的结果是3434，选择到的是div中唯一一个p元素。
$(‘p:nth-of-type(2)‘):选择父元素中的第2个元素。
$(‘p:nth-of-type(2)‘):选择父元素中的倒数第2个元素。
6. 表单对象属性过滤器
$(‘:disabled‘)和$(‘:enabled‘)：选择可用或不可用元素。匹配范围包括input,textarea,select。
$(‘:checked‘):选择选中的单选框或复选框元素。
$(‘:selected‘):选择下拉框中被选择的option元素。
四. 表单元素选择器
包括:input,:select,:file,:password,:button,:reset,:submit,:checkbox,:text,:raido。这些都比较简单，不再详述。
五. 其他
之所以命名为其他，是因为在网上好多的关于jquery选择器的文章并没有将一些不常见的选择器进行描述，但是我在一些源代码中却看到了一些。因此，就多加了一类这样的选择器。在http://www.365mini.com/page/jquery-select-nth-of-type-selector.htm这个网站有中文手册，比较详细。
$(‘:focus‘):选择当前获得焦点的元素
$(‘:root‘):选择文档的根目录，实际上就是html标签。
$(‘:target‘):匹配id属性值等于当前文档URI的锚点名称的元素。如URI为http://www.365mini.com/#top，则选择ID为top的元素。
$(‘:lang(en)‘):选择指定语言的所有元素。
标签：
原文地址：http://www.cnblogs.com/jyybeam/p/5773247.html
