JQuery的选择器有哪些?

jQuery 提供了多种选择器,用于在 DOM(文档对象模型)中选择元素。这些选择器可以基于元素名称、ID、类、类型、属性等进行选择。以下是一些常用的 jQuery 选择器:

1.基本选择器
        1.1元素选择器:选择特定类型的元素。

        1.2ID 选择器:选择具有指定 ID 的元素。

        1.3类选择器:选择具有指定类的元素。

        1.4通配符选择器:选择所有元素。

javascript// 元素选择器
$('p') // 选择所有 <p> 元素

// ID 选择器
$('#myId') // 选择 ID 为 "myId" 的元素

// 类选择器
$('.myClass') // 选择所有 class 为 "myClass" 的元素

// 通配符选择器
$('*') // 选择所有元素

2.层次选择器

        2.1祖先元素选择器:选择给定元素的所有祖先元素。

        2.2后代元素选择器:选择给定元素的所有后代元素。

        2.3子元素选择器:选择给定元素的直接子元素。

        2.4相邻同胞选择器:选择紧接在给定元素之后的元素。

        2.5一般同胞选择器:选择给定元素的所有同胞元素。

javascript// 祖先元素选择器
$('div#myId p') // 选择 ID 为 "myId" 的 <div> 元素内的所有 <p> 元素

// 后代元素选择器
$('div p') // 选择所有 <div> 元素内的 <p> 元素

// 子元素选择器
$('div#myId > p') // 选择 ID 为 "myId" 的 <div> 元素的直接 <p> 子元素

// 相邻同胞选择器
$('div#myId + p') // 选择紧接在 ID 为 "myId" 的 <div> 元素之后的 <p> 元素

// 一般同胞选择器
$('div#myId &#126; p') // 选择 ID 为 "myId" 的 <div> 元素之后的所有 <p> 同胞元素

3.过滤选择器

        3.1首元素选择器:选择第一个元素。

        3.2末元素选择器:选择最后一个元素。

        3.3索引选择器:选择具有指定索引的元素。

        3.4头部选择器:选择前 N 个元素。

        3.5尾部选择器:选择后 N 个元素。

        3.6偶数选择器:选择所有索引为偶数的元素。

        3.7奇数选择器:选择所有索引为奇数的元素。

        3.8不包含子元素选择器:选择所有没有子元素的元素。

        3.9包含特定元素的父元素选择器:选择包含特定元素的父元素。

        3.10具有特定属性的元素选择器:选择具有特定属性的元素。

        3.11不具有特定属性的元素选择器:选择不具有特定属性的元素。

javascript// 首元素选择器
$('p:first') // 选择第一个 <p> 元素

// 末元素选择器
$('p:last') // 选择最后一个 <p> 元素

// 索引选择器
$('p:eq(2)') // 选择第三个 <p> 元素(索引从 0 开始)

// 头部选择器
$('p:lt(3)') // 选择前三个 <p> 元素

// 尾部选择器
$('p:gt(2)') // 选择第三个之后的 <p> 元素

// 偶数选择器
$('p:even') // 选择所有索引为偶数的 <p> 元素

// 奇数选择器
$('p:odd') // 选择所有索引为奇数的 <p> 元素

// 不包含子元素选择器
$('p:empty') // 选择所有没有子元素的 <p> 元素

// 包含特定元素的父元素选择器
$('p:has(span)') // 选择所有包含 <span> 元素的 <p> 元素

// 具有特定属性的元素选择器
$('p[title]') // 选择所有具有 title 属性的 <p> 元素

// 不具有特定属性的元素选择器
$('p:not([title])') // 选择所有不具有 title 属性的 <p> 元素

以上只是 jQuery 选择器的一部分,jQuery 还提供了许多其他选择器,用于更复杂的选择需求。您可以访问 jQuery 官方文档以获取完整的选择器列表和更多示例。

  • 24
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值