jQuery如何查询节点内的元素

在前端开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。其中，查询节点内的元素是 jQuery 最常用的功能之一。本文将详细介绍如何使用 jQuery 查询节点内的元素，包括基本选择器、层次选择器、过滤选择器等内容。

1. 基本选择器

jQuery 提供了多种基本选择器，用于选择 HTML 元素。以下是一些常用的基本选择器：

1.1 ID 选择器

ID 选择器通过元素的 id 属性来选择元素。语法如下：

$("#elementId")

例如，选择 id 为 myDiv 的元素：

$("#myDiv")

1.2 类选择器

类选择器通过元素的 class 属性来选择元素。语法如下：

$(".className")

例如，选择所有 class 为 myClass 的元素：

$(".myClass")

1.3 元素选择器

元素选择器通过元素的标签名来选择元素。语法如下：

$("elementName")

例如，选择所有的 <p> 元素：

$("p")

1.4 通配符选择器

通配符选择器选择所有的元素。语法如下：

$("*")

例如，选择页面中的所有元素：

$("*")

2. 层次选择器

层次选择器用于选择特定元素内部的元素。以下是一些常用的层次选择器：

2.1 后代选择器

后代选择器选择指定元素的所有后代元素。语法如下：

$("ancestor descendant")

例如，选择 id 为 myDiv 的元素内部的所有 <p> 元素：

$("#myDiv p")

2.2 子元素选择器

子元素选择器选择指定元素的直接子元素。语法如下：

$("parent > child")

例如，选择 id 为 myDiv 的元素内部的直接子元素 <p>：

$("#myDiv > p")

2.3 相邻兄弟选择器

相邻兄弟选择器选择指定元素的下一个兄弟元素。语法如下：

$("prev + next")

例如，选择 id 为 myDiv 的元素的下一个兄弟元素 <p>：

$("#myDiv + p")

2.4 一般兄弟选择器

一般兄弟选择器选择指定元素之后的所有兄弟元素。语法如下：

$("prev ~ siblings")

例如，选择 id 为 myDiv 的元素之后的所有兄弟元素 <p>：

$("#myDiv ~ p")

3. 过滤选择器

过滤选择器用于对已选择的元素进行进一步的过滤。以下是一些常用的过滤选择器：

3.1 :first 选择器

:first 选择器选择匹配的第一个元素。语法如下：

$("selector:first")

例如，选择第一个 <p> 元素：

$("p:first")

3.2 :last 选择器

:last 选择器选择匹配的最后一个元素。语法如下：

$("selector:last")

例如，选择最后一个 <p> 元素：

$("p:last")

3.3 :even 选择器

:even 选择器选择匹配的偶数索引元素（从 0 开始）。语法如下：

$("selector:even")

例如，选择所有偶数索引的 <p> 元素：

$("p:even")

3.4 :odd 选择器

:odd 选择器选择匹配的奇数索引元素（从 0 开始）。语法如下：

$("selector:odd")

例如，选择所有奇数索引的 <p> 元素：

$("p:odd")

3.5 :eq() 选择器

:eq() 选择器选择匹配的指定索引元素。语法如下：

$("selector:eq(index)")

例如，选择索引为 2 的 <p> 元素：

$("p:eq(2)")

3.6 :gt() 选择器

:gt() 选择器选择匹配的索引大于指定值的元素。语法如下：

$("selector:gt(index)")

例如，选择索引大于 2 的所有 <p> 元素：

$("p:gt(2)")

3.7 :lt() 选择器

:lt() 选择器选择匹配的索引小于指定值的元素。语法如下：

$("selector:lt(index)")

例如，选择索引小于 2 的所有 <p> 元素：

$("p:lt(2)")

3.8 :not() 选择器

:not() 选择器选择不匹配指定选择器的元素。语法如下：

$("selector:not(selector)")

例如，选择所有不是 <p> 的元素：

$(":not(p)")

3.9 :has() 选择器

:has() 选择器选择包含指定子元素的元素。语法如下：

$("selector:has(selector)")

例如，选择所有包含 <span> 元素的 <p> 元素：

$("p:has(span)")

3.10 :contains() 选择器

:contains() 选择器选择包含指定文本的元素。语法如下：

$("selector:contains(text)")

例如，选择所有包含文本 “Hello” 的 <p> 元素：

$("p:contains('Hello')")

4. 属性选择器

属性选择器用于选择具有特定属性的元素。以下是一些常用的属性选择器：

4.1 [attribute] 选择器

[attribute] 选择器选择具有指定属性的元素。语法如下：

$("selector[attribute]")

例如，选择所有具有 title 属性的 <a> 元素：

$("a[title]")

4.2 [attribute=value] 选择器

[attribute=value] 选择器选择具有指定属性且属性值等于指定值的元素。语法如下：

$("selector[attribute=value]")

例如，选择所有 href 属性值为 https://example.com 的 <a> 元素：

$("a[href='https://example.com']")

4.3 [attribute!=value] 选择器

[attribute!=value] 选择器选择具有指定属性且属性值不等于指定值的元素。语法如下：

$("selector[attribute!=value]")

例如，选择所有 href 属性值不等于 https://example.com 的 <a> 元素：

$("a[href!='https://example.com']")

4.4 [attribute^=value] 选择器

[attribute^=value] 选择器选择具有指定属性且属性值以指定值开头的元素。语法如下：

$("selector[attribute^=value]")

例如，选择所有 href 属性值以 https 开头的 <a> 元素：

$("a[href^='https']")

4.5 [attribute$=value] 选择器

[attribute$=value] 选择器选择具有指定属性且属性值以指定值结尾的元素。语法如下：

$("selector[attribute$=value]")

例如，选择所有 href 属性值以 .com 结尾的 <a> 元素：

$("a[href$='.com']")

4.6 [attribute*=value] 选择器

[attribute*=value] 选择器选择具有指定属性且属性值包含指定值的元素。语法如下：

$("selector[attribute*=value]")

例如，选择所有 href 属性值包含 example 的 <a> 元素：

$("a[href*='example']")

5. 表单选择器

表单选择器用于选择表单元素。以下是一些常用的表单选择器：

5.1 :input 选择器

:input 选择器选择所有的表单元素（包括 <input>、<textarea>、<select> 和 <button>）。语法如下：

$(":input")

例如，选择所有的表单元素：

$(":input")

5.2 :text 选择器

:text 选择器选择所有的文本输入框（<input type="text">）。语法如下：

$(":text")

例如，选择所有的文本输入框：

$(":text")

5.3 :password 选择器

:password 选择器选择所有的密码输入框（<input type="password">）。语法如下：

$(":password")

例如，选择所有的密码输入框：

$(":password")

5.4 :radio 选择器

:radio 选择器选择所有的单选按钮（<input type="radio">）。语法如下：

$(":radio")

例如，选择所有的单选按钮：

$(":radio")

5.5 :checkbox 选择器

:checkbox 选择器选择所有的复选框（<input type="checkbox">）。语法如下：

$(":checkbox")

例如，选择所有的复选框：

$(":checkbox")

5.6 :submit 选择器

:submit 选择器选择所有的提交按钮（<input type="submit"> 和 <button type="submit">）。语法如下：

$(":submit")

例如，选择所有的提交按钮：

$(":submit")

5.7 :reset 选择器

:reset 选择器选择所有的重置按钮（<input type="reset"> 和 <button type="reset">）。语法如下：

$(":reset")

例如，选择所有的重置按钮：

$(":reset")

5.8 :button 选择器

:button 选择器选择所有的按钮（<button> 和 <input type="button">）。语法如下：

$(":button")

例如，选择所有的按钮：

$(":button")

5.9 :file 选择器

:file 选择器选择所有的文件输入框（<input type="file">）。语法如下：

$(":file")

例如，选择所有的文件输入框：

$(":file")

5.10 :image 选择器

:image 选择器选择所有的图像输入框（<input type="image">）。语法如下：

$(":image")

例如，选择所有的图像输入框：

$(":image")

5.11 :checked 选择器

:checked 选择器选择所有被选中的复选框和单选按钮。语法如下：

$(":checked")

例如，选择所有被选中的复选框和单选按钮：

$(":checked")

5.12 :selected 选择器

:selected 选择器选择所有被选中的 <option> 元素。语法如下：

$(":selected")

例如，选择所有被选中的 <option> 元素：

$(":selected")

6. 总结

本文详细介绍了如何使用 jQuery 查询节点内的元素，包括基本选择器、层次选择器、过滤选择器、属性选择器和表单选择器。掌握这些选择器的使用方法，可以大大提高前端开发的效率。希望本文对你有所帮助！