选择器是Query的一个核心基础，正是有了各种丰富的选择器，才使得开发人员可以灵活的访问控制html中的各种元素，也让js如鱼得水。
本篇将详细介绍jQuery选择器，从类别上jQuery选择器可以划分为：基本选择器、层次选择器、过滤选择器、表单选择器。
一、基本选择器（Basic）
基本选择器包括5种选择器：#id、element、.class、*和selectorl,selector2.selectorN，下面将配合实例分别介绍每种选择器的作用及使用方法。
1．全匹配选择器
匹配所有元素的选择器，包含文档header和body。其返回值为Array<Element(s)>。
1 //示例1：设置所border样式 2 $( "*" ).css( "border", "3px solid red" ).length 3 4 5 // 遍历form下的所有元素，将字体颜色设置为红色 6 $('form *').css('color', '#FF0000');
2．样式类选择器
.class选择器根据给定的类匹配元素，是一个用以搜索的样式类。一个元素可以有多个样式类，只要有一个符合就能被匹配到，其返回值为Array<Element(s)>。
1 <div class="notMe">div class="notMe"</div> 2 <div class="myClass">div class="myClass"</div> 3 <span class="myClass">span class="myClass"</span> 4 5 <script> 6 $( ".myClass" ).css( "border", "3px solid red" ); 7 </script>
3．element选择器
element选择器是一个用于搜索的元素。指向DOM节点的标签名。其返回值为Array<Element(s)>。
1 <div>DIV1</div> 2 <div>DIV2</div> 3 <span>SPAN</span> 4 5 <script> 6 $( "div" ).css( "border", "9px solid red" ); 7 </script>
4．#id选择器
#id选择器根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义，其返回值为Array<Element>。
1 <div id="notMe"><p>id="notMe"</p></div> 2 <div id="myDiv">id="myDiv"</div> 3 4 <script> 5 $( "#myDiv" ).css( "border", "3px solid red" ); 6 </script>
5．selector1,selector2,selectorN选择器
这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内，其返回值为：Array<Element(s)>。在下例中通过对选择的项进行CSS操作来使读者清晰地了解selector1,selector2,selectorN选择器的作用。
1 <div>div</div> 2 <p class="myClass">p class="myClass"</p> 3 <p class="notMyClass">p class="notMyClass"</p> 4 <span>span</span> 5 6 <script> 7 $( "div, span, p.myClass" ).css( "border", "3px solid red" ); 8 </script>
二、层次选择器（Herrarchy）
1．父子选择器
jQuery( "parent > child" )，选择所有给定元素的直接子元素。其返回值为：Array<Element(s)>。
1 <ul class="topnav"> 2 <li>Item 1</li> 3 <li>Item 2 4 <ul> 5 <li>Nested item 1</li> 6 <li>Nested item 2</li> 7 <li>Nested item 3</li> 8 </ul> 9 </li> 10 <li>Item 3</li> 11 </ul> 12 13 <script> 14 $( "ul.topnav > li" ).css( "border", "3px double red" ); 15 </script>
2．后代选择器
jQuery( "ancestor descendant" )，选定祖先元素下匹配所有的后代元素，作为参数的ancestor代表任何有效的选择器，而descendant则用以匹配元素的选择器，并且它是第一个选择器的后代。其返回值为：Array<Element(s)>。
1 <form> 2 <div>Form is surrounded by the green border.</div> 3 4 <label for="name">Child of form:</label> 5 <input name="name" id="name"> 6 7 <fieldset> 8 <label for="newsletter">Grandchild of form, child of fieldset:</label> 9 <input name="newsletter" id="newsletter"> 10 </fieldset> 11 </form> 12 Sibling to form: <input name="none"> 13 14 <script> 15 $( "form input" ).css( "border", "2px dotted blue" ); 16 $( "form fieldset input" ).css( "backgroundColor", "yellow" ); 17 </script>
3．prev+next选择器
jQuery( "prev + next" )，选择prev元素后的第一个为next的元素，prev和next必须在同一个层次（相同父节点）。其返回值为Array<Element(s)>。
1 <form> 2 <label for="name">Name:</label> 3 <input name="name" id="name"> 4 <fieldset> 5 <label for="newsletter">Newsletter:</label> 6 <input name="newsletter" id="newsletter"> 7 </fieldset> 8 </form> 9 <input name="none"> 10 11 <script> 12 $( "label + input" ).css( "color", "blue" ).val( "Labeled!" ); 13 </script>
4．prev ~ siblings选择器
jQuery( "prev ~ siblings" )选择prev元素之后的所有siblings元素。prev，siblings为同一个父节点下。其返回值为Array<Element(s)>。
1 <div>div (doesn't match since before #prev)</div> 2 <span id="prev">span#prev</span> 3 <div>div sibling</div> 4 <div>div sibling <div id="small">div niece</div></div> 5 <span>span sibling (not div)</span> 6 <div>div sibling</div> 7 8 <script> 9 $( "#prev ~ div" ).css( "border", "3px groove blue" ); 10 </script>
三、过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号开头。
过滤选择器涉及的内容较多，总共有7 种类型，但是其可以进行归类。下面我们将对各种类型的选择器进行详细讲解。
1．基本过滤选择器
基本过滤选择器是过滤选择器中最常用的一种，其主要包括以下几种形式，在此做详细说明：
（1）:first/:last选择器。
（2）:not选择器。
（3）:even和:odd选择器。
（4）:eq:gt、:lt、选择器。
（5）:header选择器。
（6）:animated选择器。
//第一个li内容 $("li:first").text(); //最后一个li内容 $("li:last").text(); //input未被选中的值 $("li input:not(:checked)").val(); //索引为偶数的li $("li:even").text(); //索引为奇数的li $("li:odd").text(); //索引大于2的li的内容 $("li:gt(2)").text(); //索引小于1的li的内容 $("li:lt(1)").text();
2.内容过滤选择器
内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器，这部分过滤器是对上面介绍基本过滤选择器的一个补充，对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
（1）:contains选择器。
（2）:empty选择器。
（3）:has选择器。
（4）:parent选择器。
//包含content的li的内容 $("li:contains('content')").text(); //内容为空的li的后一个li内容 $("li:empty+li").text(); //包含a标签的li的内容 $("li:has(a)").text();
3．可见性过滤选择器
可见性过滤选择器比较简单，其包含两种选择器，主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。
（1）:hidden选择器。
（2）:visible选择器。
//不可见的li的内容 结果为不可见 $("li:hidden").text(); //可见的li的内容 结果为可见 $("li:visible").text();
4．属性过滤选择器
属性过滤选择器是用于匹配包含给定属性的元素，当然也可以匹配不包含此属性的元素等。属性过滤选择器共含有以下7种选择器。
（1） [attribute]选择器。
（2）[attribute=value]、[attribute!=value]选择器（此处包含两种）。
（3）[attribute^=value]、[attribute$=value]、[attribute*=value]选择器（此处包含三种）。
（4）[selector][selector2]选择器。
//name为id的值 $("input[name='id']").val(); //name以orgName开始的值 $("input[name^='org']").val(); //name以name结束的值 $("input[name$='name']").val(); //name包含oo的值 结果为HYIP $("input[name*='org']").val();
5．子元素过滤选择器
html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。
（1）:nth-child选择器。
（2）:first-child、:last-child选择器（两种）。
（3）:only-child选择器。
6．表单对象属性过滤选择器
这部分内容相当简单，只包含四种类型的选择器，这些选择器分别用来匹配可用元素或者不可用元素、选中元素等。下面将以实例的形式对此部分内容进行讲解。
（1）:enabled、:disabled选择器。
（2）:checked选择器。
（3）:selected选择器。
7．表单元素过滤选择器
表单过滤选择器是用于处理html中表单的选择器，其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等，还涉及了很少用到的图片、隐藏域、文件上传等标签。下面将会对这些选择器进行具体介绍。
（1）:input选择器。
（2）:text、:password选择器。
（3）:radio、:checkbox选择器。
（4）:submit、:image、:reset、:button、:file选择器。
（5）:hidden选择器。
| 选择器 | 描述 | 返回 | 示例 |
| 基本选择器 | |||
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取class为test的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的p元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有元素 |
|
selector1,selector2, .....,selectorN |
将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass")选取所有div,span和拥有class为myClass的p标签的一组元素 |
| 层次选择器 | |||
| $("ancestor descendant") | 选取ancestor元素里的所有descendant(后代)元素 | 集合元素 | $("div span")选取所有div里的所有的span元素 |
| $("parent > child") | 选取parent元素下的child(子)元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素 | 集合元素 | $("div>span")选取div元素下的名是span的子元素 |
| $("prev + next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one+div")选取class为one的下一个div元素 |
| $("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面的所有div兄弟元素 |
| 基本过滤选择器 | |||
| :first | 选取第一个元素 | 单个元素 | $("div:first")选取所有div元素中的第一个div元素 |
| :last | 选取最后一个元素 | 单个元素 | $("div:last")选取所有div元素中的最后一个div元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input:not(.myclass)")选取class不是myclass的元素 |
| :even | 选取索引是偶数的所有元素，索引是从0开始 | 集合元素 | $("input:event")选取索引是偶数的input元素 |
| :odd | 选取索引是奇数的所有元素，索引是从0开始 | 集合元素 | $("input:odd")选取索引是奇数的input元素 |
| :eq(index) | 选取索引等于index的元素(index从0开始) | 集合元素 | $("input:eq(1)")选取索引等于1的input元素 |
| :gt(index) | 选取索引大于index的元素(index从0开始) | 集合元素 | $("input:gt(1)")选取索引大于1的input元素(注：大于1，而不包括1) |
| :lt(index) | 选取索引小于index的元素(index从0开始) | 集合元素 | $("input:lt(1)")选取索引大于1的input元素(注：小于1，而不包括1) |
| :header | 选取所有的标题元素，例如h1,h2,h3等 | 集合元素 | $(":header")选取网页中所有的h1,h2,h3... |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div:animted")选取正在执行动画的div元素 |
| 内容过滤选择器 | |||
| :contains(text) | 选取文本内容为"text"的元素 | 集合元素 | $("div:contains('我')")选取含有文本"我"的div元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $(div:empty)选取不包含资源(包括文本元素)的div空元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有p元素的div元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素(包括文本元素)的div元素 |
| 可见性过滤选择器 | |||
| :hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden")选取所有不可见的元素。包括《input type="hidden"/》,《div style="display:none"》和《div style="visibility:hidden"》等元素。如果只想选取《input》元素，可以使用$("input:hidden") |
| :visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的div元素 |
| 属性过滤选择器 | |||
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性id的元素 |
| [attribute=value] | 选取属性的值为value的元素 | 集合元素 | $("div[title=test]")选取属性title为test的div元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $("div[title!=test]")选取属性title不等于"test"的divy元素(注意：没有属性title的div元素也会被选取) |
| [attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $("div[title^=test]")选取属性title以"test"开始的div元素 |
| [attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | $("div[title$=test]")选取属性title以"test"结束的div元素 |
| [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("div[titel*=test]")选取属性title含有'test'的div元素 |
| [selector1][selector2][selectorN] | 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围。 | 集合元素 | $("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的div元素 |
| 子元素过滤选择器 | |||
| :nth-child(index/event/odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素.(index从1算起) | 集合元素 | :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的 |
| :frist-child | 选取每个父元素的第一个子元素 | 集合元素 | :first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。例如$("ul li:first-child");选取每个ul中的第一个li元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素。例如$("ul li:last-child")；选择每个ul中的最后一个li元素 |
| :only-child | 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配 | 集合元素 | $(ul li:only-child)在ul中选取是唯一子元素的li元素 |
| 表单对象属性过滤选择器 | |||
| :enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled")选取id为"form1"的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form2:disabled")选取id为"form2"的表单内的所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框，复选框) | 集合元素 | $("input :checked")选取所有被选中的input元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select:selected");选取所有被选中的选项元素 |
| 表单对象属性过滤选择器 | |||
| 集合元素 | 集合元素 | 集合元素 | 集合元素a |