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(\'\');
});
</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(\'\');
});
</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></li>
<li></li>
<li></li>
<li></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\'></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\'></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></span>
<span></span>
<span></span>
<p></p>
<span></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)\'):选择指定语言的所有元素。
