jQuery常用的选择器
当我们想要操所页面中的元素时，首先要做的就是选取元素。选取页面中元素可以使用jQuery给我们提供的$()方法，该方法需要提供选择器作为参数，方法执行完成后会返回给我们一个jQuery对象，被选取的元素就包含在该对象中。
1.1基础选择器
| 选择器 | 实列 | 说明 |
| 全局选择器 | $('*') | 选择所有元素 |
| 标签选择器 | $('p') | 选择所有的p元素 |
| ID选择器 | $('#top') | 选择所有id属性值为top的元素 |
| class选择器 | $('.box') | 选择所有clss属性值为top的元素 |
| 多重选择器 | $('div, p') | 选择所有的div元素和p元素 |
2.2 按层次结构选取元素
| 选择器 | 实列 | 说明 |
| 子代选择器 | $('div > p') | 选择作为div元素子元素的所有p元素 |
| 后代选择器 | $('div p') | 选择作为div后代的所有p元素 |
| 相邻选择器 | $('div + p' | 选择紧邻div元素且位于其后的p元素 |
| 兄弟选择器 | $('div ~ p') | 选择作为div元素且位于其后的所有p元素 |
2.3 使用属性选择元素
| 选择器 | 实列 | 说明 |
| tag[attr] | $('p[class]') | 选择所有带有class属性的p元素 |
| tag[attr="value"] | $('p[class="top"]') | 选择所有class属性值恰好等于top的p元素 |
| tag[attr^="value"] | $('p[class^="top"]') | 选择所有class属性值以top开头的P元素（包括class等于top的p元素) |
| tag[attr$="value"] | $('p[class$="top"]') | 选择所有class属性值以top结尾的p元素（包括class属性值恰好等于top的p元素） |
| tag[attr!="value"] | $('p[class!="top"]') | 选择所有class属性值不等于top的p元素 |
| tag[attr*="value"] | $('p[class*="top"]') | 选择所有class属性值中包含字符串top的p元素（包括class属性值恰好等于top的p元素） |
| tag[attr|="value"] | $('p[class|="top"]') | 选择所有class属性值为连接符分隔的字符串并且该字符串以top开头的p元素和class属性值恰好等于top的p元素 |
| tag[attr~="value"] | $('p[class~="top"]') | 选择所有class属性值为空格分隔的多个字符串且其中一个字符串等于top的p元素和class属性值恰好等于top的p元素 |
| tag[attr="value"]... | $('p[class="top"][id]') | 选择所有class属性值恰好等于top并且带有id属性的p元素 |
<p class="center" id="p1">段落内容1</p>
<p class="center right">段落内容2</p>
<p class="left center right">段落内容3</p>
<p class="center-right">段落内容4</p>
<p class="left-center">段落内容5</p>
<p class="left-center-right">段落内容6</p>
// 1. 选择带有Class属性的所有p元素
var $p1 = $('p[class]');
// 2. 选择class属性值恰好等于center的p元素
var $p2 = $('p[class="center"]');
// 3. 选择class属性值以center开始的p元素和class属性值恰好等于center的p元素
var $p3 = $('p[class^="center"]');
// 4. 选择Class属性值以center结尾的p元素和class属性值恰好等于center的p元素
var $p4 = $('p[class$="center"]');
// 5. 选择Class属性不等于center的p元素
var $p5 = $('p[class!="center"]');
// 6. 选择Class属性值中包含center字符串的p元素和class属性值恰好等于center的p元素
var $p6 = $('p[class*="center"]');
// 7. 选择所有class属性值为连接符分隔的字符串并且该字符串以center开头的p元素和class属性值恰好等于center的p元素
var $p7 = $('p[class|="center"]');
// 8. 选择所有class属性值为空格分隔的多个字符串且其中一个字符串等于center的p元素和class属性值恰好等于center的p元素
var $p8 = $('p[class~="center"]');
// 9. 选择所有class属性值恰好等于center并且id属性值恰好等于的p1元素
var $p9 = $('p[class="center"][id="p1"]');
2.4基础过滤器
| 选择器 | 实列 | 说明 |
| ：firs | $('li:first') | 选择匹配元素集合中第一个li元素 |
| ：last | $('li:last') | 选择匹配元素集合中最后一个li元素 |
| :even | $('li:even') | 选择匹配元素集合中偶数位的li元素 |
| :odd | $('li:odd') | 选择匹配元素集合中奇数位的li元素 |
| :eq(n) | $('eq(3)') | 选择匹配元素集合中索引等于3的li元素 |
| :gt(n) | $('gt(3)') | 选择匹配元素集合中索引大于3的li元素 |
| :lt(n) | $('lt(3)') | 选择匹配元素集合中索引小于3的li元素 |
| :root | $(':root') | 选择文档的根元素 |
| :header | $(':header') | 选择所有的标题元素(h1-h6) |
| :lang(language) | $('div:lang(en-us)') | 选取指定的语言元素 |
| :not(selector) | $('a:not(.active)') | 选择不匹配.active选择器的a元素 |
| :target | $(':target') | 选择处于目标状态的元素（锚链接目标元素） |
| :hidden | $(':hidden') | 选择处于隐藏的状态 |
| :visible | $(':visible') | 选择处于可见状态的元素。 |
| :animated | $(':animated') | 选取正在应用动画效果的元素（只对通过jq方法添加动画有效） |
2.5子元素过滤器
| 选择器 | 示例 | 说明 |
|---|---|---|
tag:first-child |
$('div p:first-child') |
选择作为其父元素第一个子元素的p元素 |
tag:last-child |
$('div p:last-child') |
选择作为其父元素最后一个子元素的p元素 |
tag:first-of-type |
$('p:first-of-type') |
选择几个同辈p元素中的第一个 |
tag:last-of-type |
$('p:last-of-type') |
选择几个同辈p元素中的最后一个 |
tag:nth-child(n) |
$('p:nth-child(2)') |
选择作为其父元素正数第2个子元素的所有p元素 |
tag:nth-last-child(n) |
$('p:nth-last-child(2)') |
选择作为其父元素倒数第2个子元素的所有p元素 |
tag:nth-of-type(n) |
$('p:nth-of-type(1)') |
选择几个同辈p元素中的正数第1个 |
tag:nth-last-of-type(n) |
$('p:nth-last-of-type(1)') |
选择几个同辈p元素中的倒数第1个 |
tag:only-child |
$('p:only-child') |
选择作为其父元素唯一子元素的p元素 |
tag:only-of-type |
$('p:only-of-type') |
选择同辈元素中唯一一个标签为p的元素 |
提示：tag:nth-child(n)，tag:nth-last-child(n)和tag:nth-of-type(n)中的n可以替换成even|odd，或者表达式，比如：Xn+Y。
2.6 内容过滤器
| 选择器 | 示例 | 说明 |
|---|---|---|
tag:contain(text) |
$('div:contain("hello")') |
选择匹配元素集合中包含指定文本的所有div元素 |
tag:empty |
$('div:empty') |
选择所有没有子元素的div元素（包括文本节点） |
tag:has(selector) |
$('div:has(p)') |
选择所有子元素中包含p元素的div元素 |
tag:parent |
$('div:parent') |
选择匹配元素集合中包含子元素的所有div元素（包括文本节点） |
2.7 选取表单元素
jQuery提供了一些专门为表单设计的选择器，用于快速访问表单元素。
| 选择器 | 示例 | 说明 |
|---|---|---|
:text |
$(':text ') |
选择所有文本字段（type="text"，或没有写type属性的input元素） |
:password |
$(':password') |
选择所有密码字段（type="password"） |
:submit |
$(':submit ') |
选择所有提交按钮（type="submit"） |
:reset |
$(':reset ') |
选择所有重置按钮（type="reset"，）选取type类型为reset的button元素 |
:button |
$(':button ') |
选择所有其他按钮（type="button"） |
:checkbox |
$(':checkbox') |
选择所有复选按钮（type="checkbox"） |
:radio |
$(':radio ') |
选择所有单选按钮（type="radio"） |
:file |
$(':file ') |
选取type类型为file的input元素 |
:image |
$(':image ') |
选择所有图片按钮（type="image"） |
:input |
$(':input ') |
选择所有的表单元素（input，select，textarea，button） |
:enabled |
$(':enabled ') |
选择处于可用状态的元素 |
:disabled |
$(':disabled ') |
选择处于不可用状态的元素（button, input, optgroup, option, select, textarea） |
:selected |
$(':selected') |
选择处于被选中状态的option元素 |
:focus |
$(':focus ') |
选择处于焦点状态的元素 |
:checked |
$(':checked ') |
选择处于选中状态的checkbox，radio，option元素 |
6. 使用context提高检索效率
先前我们选取页面中的元素时，不可避免的要检索页面中的所有元素，这样就降低了检索的效率。这不是我们想要的，能不能在我们指定的的范围中检索我们想要获取的元素。
下面的选择器会在id属性值为box的元素中查找p元素，而不是在整个文档中查找：
$('p', '#box')
后代选择器也可以像上面那样写：
$('#box p')
// 等价于
$('p', '#box')
