首页 前端知识 JQuery的选择器有哪些?

JQuery的选择器有哪些?

2024-08-14 22:08:43 前端知识 前端哥 634 947 我要收藏

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 官方文档以获取完整的选择器列表和更多示例。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15669.html
标签
评论
发布的文章

JQuery 详细教程

2024-08-21 22:08:08

jQuery2 高级教程(八)

2024-08-21 22:08:06

jQuery Spellchecker 使用教程

2024-08-21 22:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!