Query的选择器有哪些?

简介: Query的选择器有哪些?

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

相关文章
|
2月前
|
JavaScript
id 选择器
jQuery 的 #id 选择器用于通过 HTML 元素的 id 属性选取指定元素。由于页面中每个元素的 id 应该是唯一的,因此 #id 选择器常用于选取唯一的元素。使用方法为 `$(&quot;#test&quot;)`。例如,当用户点击按钮时,可以通过 `$(&quot;#test&quot;).hide();` 隐藏具有 id=&quot;test&quot; 的元素。
|
3月前
|
JavaScript
Query 遍历 - 后代
Query 遍历 - 后代
37 7
|
3月前
<select>标记和<option>标签的常用属性
<select>标记和<option>标签的常用属性
87 2
|
7月前
|
Web App开发 前端开发
id 选择器
id 选择器。
40 0
element-ui中Select 选择器value-key的使用
element-ui中Select 选择器value-key的使用
|
JavaScript 前端开发 索引
jQuery选择器之过滤选择器
jQuery选择器之过滤选择器
192 11
|
JavaScript
JQUERY选择器--筛选选择器
JQUERY选择器--筛选选择器
66 0
|
前端开发 JavaScript
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
有关基础选择器的学习记录,包括标签选择器、类选择器、id选择器和通配符选择器...
410 0
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
element-ui中的Select选择器中remote-method方法带自定义参数
element-ui中的Select选择器中remote-method方法带自定义参数
|
前端开发
CSS——多类名选择器,id选择器,通配符选择器
CSS——多类名选择器,id选择器,通配符选择器
348 0
CSS——多类名选择器,id选择器,通配符选择器