JQuery总结一:选择器归纳

本文详细介绍了CSS中的六类选择器,包括基本选择器、位置选择器、属性选择器、表单选择器、过滤选择器及结果集选择器,并列举了各种选择器的使用方式和应用场景。

1、基本选择器

选择符匹配元素
*所有元素
id给定ID的元素
element给定类型的所有元素
.class给定类的所有元素
a,b与a或b匹配的元素
a ba的后代元素中与b匹配的元素
a>ba的直接子元素中与b匹配的元素
a+ba的直接同辈元素中与b匹配的元素
a~ba的同辈元素中与b匹配的元素
 

2、位置选择器

选择符匹配元素
a b:nth-child(index)a的子元素中,第index个与b匹配的元素(从1开始计数)
a b:nth-child(even)a的子元素中,第偶数个与b匹配的元素(从1开始计数)
a b:nth-child(odd)a的子元素中,第奇数个与b匹配的元素(从1开始计数)
a b:nth-child(2n+2)a的子元素中,第2n+2个与b匹配的元素(从1开始计数),n为自然数
a b:nth-last-child()同:nth-child(),从最后一个元素开始计数
a b:first-childa的子元素中,第1个与b匹配的元素
a b:last-childa的子元素中,最后一个个与b匹配的元素
:only-child作为其父元素唯一一个子元素的元素
a b:nth-of-type()同:nth-child(),只计同类元素
a b:nth-last-of-type()同:nth-last-child(),只计同类元素
a b:first-of-type()同:first-child(),只计同类元素
a b:last-of-type()同:last-child(),只计同类元素
a b:only-of-type()没有同名元素的元素
 

3、属性选择器

选择符匹配元素
[attr]带有属性attr的元素
[attr="value"]attr属性值为value的元素
[attr!="value"]attr属性值不为value的元素)
[attr^="value"]attr属性值以value开头的元素
[attr$="value"]attr属性值以value结尾的元素
[attr*="value"]attr属性值包含value字符串的元素
[attr~="value"]attr属性值是空格分隔的字符串,其中一个字符串值是value的元素
[attr|="value"]attr属性值等于value或value后跟一个连字符(-)的元素
 

4、表单选择器

选择符匹配元素
:input所有<input><textarea><select><button>元素
:texttype=”text”的<input>元素
:passwordtype=”password”的<input>元素
:filetype=”file”的<input>元素
:radiotype=”radio”的<input>元素
:checkboxtype=”checkbox”的<input>元素
:submittype=”submit”的<input>元素
:imagetype=”image”的<input>元素
:resettype=”reset”的<input>元素
:buttontype=”button”的<input>元素
:enabled启用的表单元素
:disabled禁用的表单元素
:checked选中的复选框和单选按钮
:selected选中的<option>元素
 

5、过滤选择器

选择符匹配元素
:root文档根元素
:header标题元素,h1~h6
:animated动画正在运行的元素
:contains(text)包含文本text的元素
a:empty不包含子节点的a元素
a:has(b)至少包含一个b元素匹配的a元素(返回父元素a而非子元素b)
:parent与:empty相反,返回包含子节点的元素
:hidden隐藏的元素,包括<input type="hidden">
:visible可见元素
:focus获得焦点的元素
:lang(language)给定语言代码的元素
:targetURI标识符指向的目标元素,具体见::target用法
 

6、用于结果集中的选择器

这类选择器在CSS中不存在,但可以用于JQuery的结果中进行筛选。

选择符匹配元素
:first结果集中的第一个元素,对应方法为first(),如$("a b:first")<==>$("a b").first()
:last结果集中的最后一个元素,对应方法为last(),如$("a b:last")<==>$("a b").last()
:not(a)结果集中不与a匹配的元素,对应方法为not(),如$("a b:not(c)")<==>$("a b").not(c)
:even结果集中索引是偶数的元素(从0开始),如$("a b:even")
:odd结果集中索引是奇数的元素(从0开始),如$("a b:odd")
:eq(index)结果集中索引是index的元素(从0开始),对应方法是eq(index),如$("a b:eq(2)")<==>$("a b").eq(2)
:gt(index)结果集中索引大于index的元素(从0开始),如$("a b:gt(2)")
:lt(index)结果集中索引小于index的元素(从0开始),如$("a b:lt(2)")

转载于:https://www.cnblogs.com/aytsoft/p/4921555.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值