jQuery选择器

日期:2020-05-07编辑作者:Web前端

时间: 2019-09-10阅读: 190标签: 选择器

选择器是Query的一个核心基础,正是有了各种丰富的选择器,才使得开发人员可以灵活的访问控制html中的各种元素,也让js如鱼得水。

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。不仅能简化代码,而且可以达到事半功倍的效果

本篇将详细介绍jQuery选择器,从类别上jQuery选择器可以划分为:基本选择器、层次选择器、过滤选择器、表单选择器。

jQuery的优点:

 一、基本选择器(Basic)

 基本选择器包括5种选择器:#id、element、.class、*和selectorl,selector2.selectorN,下面将配合实例分别介绍每种选择器的作用及使用方法。

**1.全匹配选择器
**匹配所有元素的选择器,包含文档header和body。其返回值为Array<Element(s)>。

www.129028.com金沙 1

1 //示例1:设置所border样式
2 $( "*" ).css( "border", "3px solid red" ).length
3 
4 
5 // 遍历form下的所有元素,将字体颜色设置为红色
6  $('form *').css('color', '#FF0000');

www.129028.com金沙 2

2.样式类选择器
.class选择器根据给定的类匹配元素,是一个用以搜索的样式类。一个元素可以有多个样式类,只要有一个符合就能被匹配到,其返回值为Array<Element(s)>。

www.129028.com金沙 3

1 <div class="notMe">div class="notMe"</div>
2 <div class="myClass">div class="myClass"</div>
3 span class="myClass"
4  
5 <script>
6 $( ".myClass" ).css( "border", "3px solid red" );
7 </script>

www.129028.com金沙 4

3.element选择器
element选择器是一个用于搜索的元素。指向DOM节点的标签名。其返回值为Array<Element(s)>。

www.129028.com金沙 5

1 <div>DIV1</div>
2 <div>DIV2</div>
3 SPAN
4  
5 <script>
6 $( "div" ).css( "border", "9px solid red" );
7 </script>

www.129028.com金沙 6

4.#id选择器

#id选择器根据给定的ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义,其返回值为Array<Element>。

www.129028.com金沙 7

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>

www.129028.com金沙 8

5.selector1,selector2,selectorN选择器

这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,其返回值为:Array<Element(s)>。在下例中通过对选择的项进行CSS操作来使读者清晰地了解selector1,selector2,selectorN选择器的作用。

www.129028.com金沙 9

1 <div>div</div>
2 <p class="myClass">p class="myClass"</p>
3 <p class="notMyClass">p class="notMyClass"</p>
4 span
5  
6 <script>
7 $( "div, span, p.myClass" ).css( "border", "3px solid red" );
8 </script>

www.129028.com金沙 10

1.简洁的语法

二、层次选择器(Herrarchy)

1.父子选择器

jQuery( "parent > child" ),选择所有给定元素的直接子元素。其返回值为:Array<Element(s)>。

www.129028.com金沙 11

 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>

www.129028.com金沙 12

2.后代选择器

jQuery( "ancestor descendant" ),选定祖先元素下匹配所有的后代元素,作为参数的ancestor代表任何有效的选择器,而descendant则用以匹配元素的选择器,并且它是第一个选择器的后代。其返回值为:Array<Element(s)>。

www.129028.com金沙 13

 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>

www.129028.com金沙 14

 

3.prev+next选择器 jQuery( "prev + next" ),选择prev元素后的第一个为next的元素,prev和next必须在同一个层次(相同父节点)。其返回值为Array<Element(s)>。

www.129028.com金沙 15

 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>

www.129028.com金沙 16

4.prev ~ siblings选择器

jQuery( "prev ~ siblings" )选择prev元素之后的所有siblings元素。prev,siblings为同一个父节点下。其返回值为Array<Element(s)>。

www.129028.com金沙 17

 1 <div>div (doesn't match since before #prev)</div>
 2 span#prev
 3 <div>div sibling</div>
 4 <div>div sibling <div id="small">div niece</div></div>
 5 span sibling (not div)
 6 <div>div sibling</div>
 7  
 8 <script>
 9 $( "#prev ~ div" ).css( "border", "3px groove blue" );
10 </script>

www.129028.com金沙 18

 

2.完善的事件处理机制

三、过滤选择器

过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号开头。
过滤选择器涉及的内容较多,总共有7 种类型,但是其可以进行归类。下面我们将对各种类型的选择器进行详细讲解。
1.基本过滤选择器 基本过滤选择器是过滤选择器中最常用的一种,其主要包括以下几种形式,在此做详细说明:
(1):first/:last选择器。
(2):not选择器。
(3):even和:odd选择器。
(4):eq:gt、:lt、选择器。
(5):header选择器。
(6):animated选择器。

www.129028.com金沙 19

//第一个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();

www.129028.com金沙 20

2.内容过滤选择器 内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器,这部分过滤器是对上面介绍基本过滤选择器的一个补充,对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
(1):contains选择器。
(2):empty选择器。
(3):has选择器。
(4):parent选择器。

www.129028.com金沙 21

//包含content的li的内容
$("li:contains('content')").text();
//内容为空的li的后一个li内容
$("li:empty+li").text();
//包含a标签的li的内容
$("li:has(a)").text();

www.129028.com金沙 22

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]选择器。

www.129028.com金沙 23

//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();

www.129028.com金沙 24

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选择器。
www.129028.com金沙,(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

css选择器选择器语法描述实例标签选择器E{css规则}以文档标签作为选择符div{width:100px;}ID选择符#id {css规则}以文档元素的唯一标识id号作为选择符#box{width:100px;height:100px;}类选择符E.className{css规则}以文档元素的类名作为选择符div.box{color:#fff;}.box{background:red;}群组选择器E1,E2,E3{css规则}多个元素应用同样的样式div,p,h1{padding:0;margin:0}后代选择器E F{css规则}以元素E的后代元素F作为选择符.box a{color:green;}通配符选择器*{css规则}以文档的所有元素作为选择符*{font-size:14px;}伪类选择器:after :beforejQuery选择器

基本选择器是jquery中常用的选择器,也是最简单的选择器,他通过元素和标签来查找DOM中的元素,注意:在网页中,id名称只能使用一次,class允许多次使用。

基本选择器

选择器描述返回实例#id根据匹配给定的id匹配一个元素单个元素$("#test")选取id为test的元素.class根据给定的类名匹配元素集合元素$(".test")选取class为test的元素element根据给定的元素名称集合元素$("p")选取所有的p元素*匹配所有的元素集合元素$("*")选取所有的元素Selector1,Selector2,Selector3...将每一个选择器匹配到的元素合并后一起返回集合元素$("div,span,.p.box")选取所有div,所有span,和class名为box的p元素

层次选择器

层次选择器通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器。注意:(“prev~ div”)选择器只能选择 “#prev”元素后面的同辈元素; 而 jQuery 中的方法siblings()与前后位置无关, 只要是同辈节点就可以选取选择器描述返回实例$("ancestor descendant")选取ancestor元素里的所有descendant元素集合元素$("div span")选取div里的所有span元素$("parentchild")选取parent下的所有子元素child集合元素$("divspan")选取div下的所有名为span的子元素$(" prev+next ")选取紧接在prev元素后面的next元素集合元素$(".one+div")选取class名为one的下一个div元素$("prev~siblings")选取元素prev元素之后的所有兄弟siblings元素集合元素$(".one~p")选取class名为one后面的所有子元素为siblings的元素基本过滤选择器过滤选择器主要是通过特定的规则进行筛选出所需的DOM元素,该选择器都以 “:”开头;按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器.选择器描述返回实例:first选取第一个元素单个元素$("div:first")选取所有div的第一个div元素:last选取最后一个元素单个元素$("div:last")选取所有div第最后一个div元素:not(selector)选取除了selector元素之外的元素集合元素$("div:not('.box')")选取除了class名为box元素的其他div元素:even选取所有索引号为偶数的元素,索引号从0开始集合元素$("div:even")选取所有索引号为偶数的div元素:odd选取所有索引号为奇数的元素,索引号从0开始集合元素$("div:odd")选取所有索引号为奇数的 div元素:eq(index)选取索引号为index的元素单个元素$("div:eq(0)")选取索引号为0的div元素,也就是第一个div元素:gt(index)选过索引号大于index的元素集合元素$("div:gt(2)")选取索引号大于2的div元素:lt(index)选取索引号小于index的 元素集合元素$("div:lt(3)")选取索引号 小于3的 div元素:header选取网页中所有的标题元素(h1,h2,h3,h4,h5,h6)集合元素$(":header")选取网页中所有 的标题元素H1,h2...:animated选取当前正在执行动画的元素集合元素$("div:animated")选取当前正在执行动画的 div

内容过滤器

过滤器的规则主要体现在子元素和文本内容上.

选择器描述返回实例:conntains("text")筛选文本中包含"text"的元素集合元素$("p:contains('你好')")选取文本包含“你好”的元素:empty选取不包含子元素或文本的空元素集合元素$("div:empty")选取不包含子元素或文本的div元素:has(selector)选取含有selector元素的元素集合元素$("div:has('p')")选取含有p元素的div元素:parent选择含有子元素或文本的元素集合元素$("div:parent")选取含有子元素或文本的div元素

本文由www.129028.com金沙发布于Web前端,转载请注明出处:jQuery选择器

关键词:

Css媒体查询以及常用设置www.129028.com金沙

或者 rem是相对单位,px为固定单位。rem相对于根元素(html)定义的font-size大小而言。 @media 媒体类型 and|not|only (媒体特性...

详细>>

js查找和筛选的几种方式www.129028.com金沙

时间: 2019-09-06阅读: 108标签: 循环一、filter() 过滤数组 时间: 2019-11-29阅读: 153 find(); 创建一个新的数组,新的数组中的...

详细>>

www.129028.com金沙a标签调用js的几种方法

时间: 2019-09-10阅读: 249标签: 标签 a标签点击事件方法汇总 a 标签的 href 属性用于指定超链接目标的 URL,href属性的值可...

详细>>

实现一个前端路由,www.129028.com金沙如何实现浏览器的前进与后

时间: 2019-09-09阅读: 194标签: 路由1. 需求 写在前面:通常 SPA 中前端路由有2种实现方式: 如果要你实现一个前端路由...

详细>>