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

相关文章
|
前端开发 JavaScript Java
Element-UI中Select选择器讲解(el-select详解)
案例详解Element-UI中Select选择器讲解,手把手教学!
870 0
Element-UI中Select选择器讲解(el-select详解)
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
4158 0
Element el-select 选择器(下拉框)详解
element-ui中Select 选择器value-key的使用
element-ui中Select 选择器value-key的使用
|
11月前
|
前端开发
如何在 React 中的 Select 标签上设置占位符?
如何在 React 中的 Select 标签上设置占位符?
76 0
|
JavaScript
JQUERY选择器--筛选选择器
JQUERY选择器--筛选选择器
50 0
element-ui中的Select选择器中remote-method方法带自定义参数
element-ui中的Select选择器中remote-method方法带自定义参数
|
前端开发 JavaScript
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
有关基础选择器的学习记录,包括标签选择器、类选择器、id选择器和通配符选择器...
298 0
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
|
前端开发
CSS——多类名选择器,id选择器,通配符选择器
CSS——多类名选择器,id选择器,通配符选择器
264 0
CSS——多类名选择器,id选择器,通配符选择器
html+css实战49-id选择器
html+css实战49-id选择器
86 0
html+css实战49-id选择器