传智播客学习之JQuery选择器

本文详细介绍了jQuery中的多种选择器,包括基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器及表单对象过滤选择器,帮助读者更好地理解和运用这些选择器。

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

一、 基本过滤选择器

基本过滤选择器重要包括:

:first :last:not(selector) :even:odd:eq(index):gt(index):lt(index):header:animated

二、 内容过滤选择器

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

$("div:contains('John')") 选取内容包含Johndiv元素

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

$("td:empty") 选择不含子元素或者文本的td

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

eg$("div:has(p)").addClass("test");选择有p元素的div,并给其增加class属性,值为test

parent 选取含有子元素或者文本德元素

eg$("td:parent") 选择有子元素或者文本的单元格

三、 可见性过滤选择器

:hidden  匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到

$("tr:hidden") 选择所有styledisplaynone即不可见的tr

注意hidden不仅包括样式属性的displaynone的元素,也包括文本隐藏域和visible=hidden等的元素。通过show方法可以让其变为显示元素。所以我们要设置隐藏的特效,需要在执行show方法之前设定。

:visible  匹配所有的可见元素

$("tr:visible") 选择styledisplay不为none即可见的tr

四、 属性过滤选择器

[attribute=value] 匹配所有含有指定的属性,但属性等于特定值的元素。

[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开头的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attribute]  匹配包含给定属性的元素

[selector1][selector2][selectorN]  复合属性选择器,需要同时满足多个条件时使用。

eg$("input[id][name$='man']") 含有id属性却name属性以man结尾的input元素

五、 子元素过滤选择器·

:first-child 匹配第一个子元素

eg:每个class为one的div元素下的第2个子元素 $("div.one :first-child")

:last-child  匹配最后一个子元素

eg:每个class为one的div元素下的第1个子元素 $("div.one :last-child")

:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素

eg:每个class为one的div元素下的最后1个子元素 $("div.one :nth-child(2)")

:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配

eg:每个class为one的div元素下只有1个元素的 $("div.one :only-child")

六、 表单对象过滤选择器

:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

:selected  匹配所有选中的option元素

:disabled 匹配所有不可用元素

:enabled  匹配所有可用元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值