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

Posted 窗棂博客记录

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[ 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 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

以上是关于[ jquery 选择器 总览 ] jquery选择器总览的主要内容,如果未能解决你的问题,请参考以下文章

jQuery选择器如何选择页面中的所有单选按钮和多选按钮?

jQuery 表单域选中选择器

使用选择器加速这个 jQuery 代码

在 Bootstrap 选择器上使用 jQuery 取消选择选项

对于jQuery选择器和动画效果停止动画的实战心得前端jQuery框架

jQuery选择器