锋利的jQuery之jQuery选择器

本文详细介绍了jQuery中的选择器,包括基本选择器、层次选择器、过滤选择器和表单选择器等。每种选择器都有具体的使用场景和示例。

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

jQuery选择器

 

1.基本选择器

基本选择器是jQuery中最常用的选择器。基本选择器有:

#id根据给定的Id匹配一个元素,返回单个元素。

.class根据给定的类名匹配元素,返回集合元素。

tag根据给定的标签名匹配元素,返回集合元素。

*匹配所有元素,返回集合元素。

s1,s2,...,sn逐个选择器匹配,返回集合元素。

 

2.层次选择器

层次选择器,顾名思义,就是根据DOM元素之间的层次关系来选取元素,例如有父元素,子元素,兄弟元素等等。层次选择器有:

ancestor descendent选取ancestor元素中所有的descendent元素,返回集合元素

parent > children选取parent元素的子元素中的children元素,返回集合元素

prev + next选取紧接在prev元素后的next元素,返回集合元素

prev ~ siblings选取prev后的所有siblinngs元素,返回集合元素

 

3.过滤选择器

过滤选择器就是通过特定的规则筛选所需要的DOM元素。过滤规则与伪类选择器类似,过滤选择器的分类有基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。

3.1基本过滤选择器

:first选取第一个元素,返回单个元素

:last选取最后一个元素,返回单个元素

:not(selector)去除所有与给定选择器匹配的元素,返回集合元素

:even选取所有索引为偶数的元素,返回集合元素

:odd选取所有索引为奇数的元素,返回集合元素

:eq(index)选取索引等于index的元素(从0开始),返回单个元素

:gt(index)选取所有索引值大于index的元素(从0开始),返回集合元素

:lt(index)选取所有索引值小于index的元素(从0开始),返回集合元素

:header选取所有的标题元素,返回集合元素

:animated选取所有当前正在执行动画的元素,返回集合元素

:focus选取当前获取焦点的元素,返回集合元素

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

:contains(text)选取含有文本内容为"text"的元素,返回集合元素

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

:has(selector)选取含有选择器所匹配的元素的元素

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

3.3可见性过滤选择器,根据元素的可见性选取相应的元素。

:hidden选取所有的不可见元素,返回集合元素

:visible选取所有的可见元素,返回集合元素

3.4属性过滤选择器,通过元素的属性选取元素。

[attribute]选取所有拥有此属性的元素,返回集合元素

[attribute=value]选取所有属性值为value的元素,返回集合元素

[attribute!=value]选取所有属性值不是value的元素,返回集合元素

[attribute^=value]选取所有属性值以value开头的元素,返回集合元素

[attribute$=value]选取所有属性值以value结尾的元素,返回集合元素

[attribute*=value]选取所有属性值中包含value的元素,返回集合元素

[attribute|=value]选取所有属性值为value或以value作为前缀的元素,返回集合元素

[attribute~=value]选取属性中用空格分隔的值中包含value的元素,返回集合元素

[attribute1]..[attributeN]复合属性选择器,选取满足所有属性选择器的元素,返回集合元素

3.5子元素过滤选择器

:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素,索引为偶数的子元素,索引为奇数的子元素,索引值等于equation(equation中的n从1开始计算)计算出的值的子元素,返回集合元素

:first-child选取每个父元素的第一个子元素,返回集合元素

:last-child选取每个父元素的最后一个子元素,返回集合元素

:only-child选取所有只有一个子元素的子元素,返回集合元素

3.6表单对象属性过滤器,对所选取的表单元素进行过滤。

:enabled选取所有可用元素,返回集合元素

:disabled选取所有不可用元素,返回集合元素

:checked选取所有被选中的元素(单选框,复选框),返回集合元素

:selected选取所有被选择的元素(下拉列表),返回集合元素

 

4.表单选择器

:input选取所有的<input><textarea><select><button>元素,返回集合元素

:text 选取所有的单行文本框,返回集合元素

:password选取所有的密码框,返回集合元素

:radio选取所有的单选框,返回集合元素

:checkbox选取所有的复选框,返回集合元素

:submit选取所有的提交按钮,返回集合元素

:image选取所有的图像按钮,返回集合元素

:reset选取所有的重置按钮,返回集合元素

:button选取所有的按钮,返回集合元素

:file选取所有的上传域,返回集合元素

:hidden选取所有不可见元素,返回集合元素

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值