Jquery选择器

本文详细介绍了jQuery中选择器的类型与应用,包括基本选择器、层次选择器、过滤选择器和表单选择器,提供了丰富的示例帮助理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Jquery中的选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

1 基本选择器

基本选择器是Jquery中常用的选择器,也是最简单的选择器。它通过元素IDClass和标签名等来查找DOM对象。在网页中,每个ID名称只能使用一次,Class可以重复使用。

序号

选择器

描述

返回值

示例

1

#ID

根据给定的ID匹配一个元素

单个元素

$(“#test”):选取IDtest的元素

2

.Class

根据给定的类名匹配元素

集合元素

$(“.test”):选取所有classtest的元素

3

Element

根据给定的元素名匹配元素

集合元素

$(“p”):选取所有p元素

4

*

匹配所有元素

集合元素

$(“*”):选取所有元素

5

selector1,selector2,..,selectorN

将每一个选择器匹配到的元素合并后一起返回

集合元素

$(“div,span,p.myClass”):选取所有div元素,span元素和class=’myClass’p元素

2 层次选择器

层次选择器是指通过DOM元素之间的层次关系(如后代元素、子元素、相邻元素、兄弟元素)来获取指定元素的选择器。

序号

选择器

描述

返回值

示例

1

$(“ancestor

descendant”)

选取ancestor元素里所有的descendant(后代)元素

集合元素

$(“div span”):选取div里的所有span元素

2

$(“parent>child”)

选取parent元素下的child()元素

集合元素

$(“div>span”):选取div元素下元素名为span的子元素

3

$(“prev+next”)

选取紧接在prev元素后的next元素

集合元素

$(“.test+div”):选取class名为test的下一个div元素

4

$(“prev~siblings”)

选取prev元素之后的所有siblings元素

集合元素

$(“#test~div”):选取IDtest的元素后面的所有div兄弟元素

其中,可以使用next()方法代替$(“prev+next”)选择器,使用nextAll()方法代替$(“prev~siblings”)选择器。

序号

选择器

方法

1

$(“.test+div”)

$(“.test”).next(“div”);

2

$(“#test~div”)

$(“#test”).nextAll(“div”)

 

3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,其选择器都以冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

3.1基本过滤选择器

序号

选择器

描述

返回值

示例

1

:first

选取第一个元素

单个元素

$(“div:first”):选取第一个div元素

2

:last

选取最后一个元素

单个元素

$(“div:last”):选取最后一个div元素

3

:not(selector)

清除所有与给定选择器匹配的元素

集合元素

$(“input:not(.test)”):选择class不是testinput元素

4

:even

选取索引为偶数的所有元素,索引从0开始

集合元素

$(“input:even”):选取索引为偶数的input元素

5

:odd

选取所有为奇数的所有元素,索引从0开始

集合元素

$(“input:even”):选取索引为奇数的input元素

6

:eq(index)

选取索引等于index的元素,index0开始

单个元素

$(“input:eq(1)”):选取索引为1input元素

7

:gt(index)

选取索引大于index的元素,index0开始

集合元素

$(“input:gt(1)”):选取索引大于1input元素(不包括1)

8

:lt(index)

选取索引小于index的元素,index0开始

集合元素

$(“input:lt(1)”):选取索引小于1input元素(不包括1)

9

:header

选取所有标题元素,如h1,h2

集合元素

$(“:header”):选取网页中所有的<h1>,<h2>……

10

:animated

选取当前正在执行动画的所有元素

集合元素

$(“div:animated”):选取当前正在执行动画的div元素

 

3.1 内容选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

序号

选择器

描述

返回值

示例

1

:contains(text)

选取含有文本内容为”text”的元素

集合元素

$(“div:contains(‘’)”):获取文本含有div元素

2

:empty

选取不包含子元素或者文本的空元素

集合元素

$(“div:empty”):获取不包含子元素(包括文本元素)的div元素

3

:has(selector)

选取选择器所匹配的元素的元素

集合元素

$(“div:has(p)”):获取含有p元素的div元素

4

:parent

选取含有子元素或文本的元素

集合元素

$(“div:parent”):获取拥有子元素(包括文本元素)div元素

3.3 可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

序号

选择器

描述

返回值

示例

1

:hidden

选取所有不可见的元素

集合元素

$(“:hidden”)选取所有不可见的元素

2

:visible

选取所有可见的元素

集合元素

$(“div:visible”):选取所有可见的div元素

$(“:hidden”):包括<input type=”hidden” /><div style=”display:none” /><div style=”visibility:hidden”>等元素,如果只想选取input元素,可以使用$(“input:hidden”)

 

3.4 属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

序号

选择器

描述

返回值

示例

1

[attribute]

选取拥有此属性的元素

集合元素

$(“div[id]”):选取拥有属性iddiv元素

2

[attribute=value]

选取属性的值为value的元素

集合元素

$(“div[id=‘test’]”):选取属性id”test”div元素

3

[attribute!=value]

选取属性的值不等于value的元素

集合元素

$(“div[id!=’test’]”):选取属性id不等于”test”div元素(没有属性iddiv元素也会被选取)

4

[attribute^=value]

选取属性的值以value开始的元素

集合元素

$(“div[id^=’test’]”):选取属性id”test”开头的div元素

5

[attribute$=value]

选取属性的值以value结束的元素

集合元素

$(“div[id$=’test’]”):选取属性id”test”结尾的div元素

6

[attribute*=value]

选取属性的值含有value的元素

集合元素

$(“div[id*=’test’]”):选取属性id含有”test”div元素

7

[attribute1] [attribute2]…

…[attributeN]

用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围

集合元素

$(“div[id][title^=’test’]”):选取拥有属性id并且属性titletest开头性的div元素

 

3.5 子元素过滤选择器

序号

选择器

描述

返回值

示例

1

:nth-child

(index/even/

odd/eq)

选取每个父元素下的第index个子元素或者奇偶元素(index1开始)

集合元素

:eq(index)只匹配单个元素,:nth-child将为每一个父元素匹配子元素,并且其index1开始,:eq(index)index0开始

2

:first-child

选取每个父元素的第一个子元素

集合元素

:first只返回单个元素,而:first-child为每个父元素匹配第一个子元素,例如:$(“ul li:first-child”):选取每个ul中第一个li元素

3

:last-child

选取每个父元素的最后一个子元素

集合元素

:last只返回单个元素,而:last-child为每个父元素匹配最后一个子元素,例如:$(“ul li:last-child”):选取每个ul中最后一个li元素

4

Only-child

如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配

集合元素

$(“ul li:only-child”):ul中选取是唯一子元素的li元素

:nth-child()选择器详细功能:

1)、:nth-child(even):选取每个父元素下的索引值是偶数的元素

2)、:nth-child(odd):选取每个父元素下的索引值是奇的元素

3)、:nth-child(2):选取每个父元素下的索引值等于2的元素

4)、:nth-child(3n):选取每个父元素下的索引值是3的倍数的元素(n0开始)

 

3.6 表单对象属性过滤选择器

序号

选择器

描述

返回值

示例

1

:enabled

选取所有可用元素

集合元素

$(“#form :enabled”):选取IDform的表单内所有可用元素

2

:disabled

选取所有不可用元素

集合元素

$(“#form2 :disabled”):选取IDform2的表单内所有不可用元素

3

:checked

选取所有被选中的元素(单选框、复选框)

集合元素

$(“input :checked”):选取所有被选中的input元素

4

:selected

选取所有被选中的元素(下拉列表)

集合元素

$(“select :selected”):选取所有被选中的选项元素

4 表单选择器

序号

选择器

描述

返回值

示例

1

:input

选取所有<input><textarea><select><button>元素

集合元素

$(“:input”): 选取所有<input><textarea><select><button>元素

2

:text

选取所有的单行文本框

集合元素

$(“:text”):选取所有的单行文本框

3

:password

选取所有的密码框

集合元素

$(“:password”):选取所有的密码框

4

:radio

选取所有的单选框

集合元素

$(“:radio”):选取所有的单选框

5

:checkbox

选取所有的复选框

集合元素

$(“:checkbox”):选取所有的复选框

6

:submit

选取所有的提交按钮

集合元素

$(“:submit”):选取所有的提交按钮

7

:image

选取所有的图像按钮

集合元素

$(“:image”):选取所有的图像按钮

8

:reset

选取所有的重置按钮

集合元素

$(“:reset”):选取所有的重置按钮

9

:button

选取所有的按钮

集合元素

$(“:button”):选取所有的按钮

10

:file

选取所有的上传域

集合元素

$(“:file”):选取所有的上传域

11

:hidden

选取所有的不可见元素

集合元素

$(“:hidden”):选取所有的不可见元素

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值