jQuery选择器 - 一开一阖

jQuery选择器

选择器是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 ><p></p></div>
2 <div ></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" >
 6  
 7   <fieldset>
 8     <label for="newsletter">Grandchild of form, child of fieldset:</label>
 9     <input name="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" >
 4   <fieldset>
 5     <label for="newsletter">Newsletter:</label>
 6     <input name="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 >span#prev</span>
 3 <div>div sibling</div>
 4 <div>div sibling <div >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选择器。