[ jquery 选择器 总览 ] jquery选择器总览

Posted 2020-07-28 窗棂博客记录

选择器是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