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