jQuery选择器

基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素。

选择器描述返回
#id根据给定的i己匹配一个元素单个元素组成的集合
.class根据给定的类各匹配元素集合元素
element根据给定的元素名匹配元素集合元素
*根据给定的元素名匹配元素集合元素
selector1, selector2,…, selectorN将每一个选择器匹配到的元素集合元素

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。

选择器描述返回
$(“ancestor descendant”)选取 ancestor 的所有descendant(后代)元素集合元素
B( “parent child”)选取parent元素下的child(子)元素,与 ( " a n c e s t o r d e s c e r d a n t ” ) 有 区 别 , (" ancestor descerdant”)有区别, ("ancestordescerdant(" ancestor descendant)选择的是后代元素集合元素
$(“prev + next”)选取紧接在prev元素后的下一个next元素集合元素
$(“prev + next”)选取 prev元素后的所有siblings元素集合元素

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

基本过滤选择器

选择器描述返回
:last选取最后一个元素集合元素
:first选取第一个元素单个元素组成的集合
:not(selector)去除所有与给定选择器匹配的元素集合元素
:even选取索引时偶数的所有元素,索引从0开始集合元素
.odd选取索引时奇数的所有元素。索引从0开始集合元素
.eq(index)选取索引等于index的元素,索引从0开始集合元素
.gt(index)迷取索引大于index的元素,索引从0开始集合元素
:lt(index)选取索引小于index的元素,索引从0开始集合元素
:header选取所有的标题元素,如: h1,h2等集合元素
:animated选取当前正在执行动画的所有元素集合元素

内容过滤选择器

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

选择器描述返回
:contains(text)选取含有文本内容为text的元素集合元素
:empty选取不包含子元素或者文本的空元素集合元素
:empty选取含有选择器所匹配的的元素的元素集合元素
:has(selector)选取含有子元素或者文本的元素集合元素

可见性过滤选择器

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

选择器描述返回
: hidden选取所有不可见的元素集合元素
:visible选取所有可见的元素集合元素

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素。

属性过滤选择器

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

选择器描述返回
[attribute]选取拥有此属性的元素集合元素
[attribute=value]选取指定属性的值为value的元素集合元素
[attribute!=value]选取指定属性的值不等于value的元素集合元素
[attribute^=value]选取指定属性的值以 value开始的元素集合元素
[attribute$=value]选取指定属性的值以 value结束的元素集合元素
[attribute*=value]选取指定属性的值含有value的元素集合元素
[selector1][selector2.]…[selectorN]用属性选择器合开成一个复合属性选择器,满足多个条件,每选择一次缩小一次范围集合元素

子元素过滤选择器

选择器描述返回
:nth-childfindexevenioddfequation)选取每个父元素下的第index个元素或者奇偶元素(index 从1算起)集合元素
.first-child选取每个父元素的第一个子元素集合元素
:last-child选取每个父元素的最后一个子元素集合元素
: only-child如果某个元素是它父元素中唯一的子元素,那么将被匹配.集合元素

nth-child() 选择器详解如下:

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素

(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤。

选择器描述返回
:enabled选取所有可用元素集合元素
:disabled选取所有不可用元素集合元素
:checked选取所有被选中的元素(单选框,复选框)集合元素
:selected选取所有被选中选项元素(下拉列表)集合元素

表单选择器

选择器描述返回
:input选取所的, ,,和元素集合元素
:text选取所有的单行文本框集合元素
:password选取所有的密码框元素集合元素
:radio选取所有的单选框集合元素
:checkbox选取所有的多选框集合元素
:subnit选取所有的提交按钮集合元素
:image选取所有的图像按钮集合元素
:reset选取所有的重置按钮集合元素
: button选取所有的按钮集合元素
:file选取所有的上传域集合元素
:hidden选取所有的不可见元素集合元素
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力做一只合格的前端攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值