jQuery 选择符详细介绍及整理

针对 "jQuery 选择符详细介绍及整理" 这个主题，下面是一个完整的攻略。

一、什么是选择符？

选择符是 jQuery 中用来选取 HTML 元素的一种方法。利用选择符，我们可以找到需要操作的 HTML 元素，从而可以对它们进行各种操作。

二、选择符的分类

选择符可以分为基本选择符和层次选择符两种。

1. 基本选择符

基本选择符是 jQuery 中最常用的选择符，包括：

• 元素选择器
• ID 选择器
• 类选择器
• 属性选择器

1.1 元素选择器

元素选择器是选择 HTML 元素的基础方式。它使用 HTML 元素的名称作为选择的依据。例如：

$("p")

这个代码将选取文档中所有的 <p> 元素。

1.2 ID 选择器

ID 选择器使用 HTML 元素的 ID 属性作为选择的依据，以"#"符号开头。例如：

$("#myId")

这个代码将选取一个 ID 值为 "myId" 的元素。

1.3 类选择器

类选择器使用 HTML 元素的 class 属性作为选择的依据，以"."符号开头。例如：

$(".myClass")

这个代码将选取所有 class 属性中包含 "myClass" 的元素。

1.4 属性选择器

属性选择器可以使用 HTML 元素的任意属性作为选择的依据。它们使用"["和"]"来定义属性条件，并在方括号中指定所需的属性名、操作符和属性值。例如：

$("input[type='text']")

这个代码将选择所有类型为 "text" 的 input 元素。

2. 层次选择符

层次选择符包括：

• 后代选择器
• 群组选择器

2.1 后代选择器

后代选择器会选取指定元素的后代元素。例如：

$("div p")

这个代码将选取所有 <div> 元素内的所有 <p> 元素。

2.2 群组选择器

群组选择器可以一次选择多个元素。例如：

$("div, p")

这个代码将同时选取 <div> 元素和 <p> 元素。

三、选择符的高级用法

1. 伪类选择符

伪类选择符用于选取不属于结构的元素。比如，选取鼠标悬停在一个元素上的样式、选取表单元素的当前值等。例如：

$("a:hover")

这个代码将选取所有鼠标悬停在 <a> 元素上的元素。

2. 筛选器选择符

筛选器选择符可以选取符合特定条件的元素。例如，选取前三个元素：

$("li:first-child")

这个代码将选取文档中所有的第一个 <li> 元素。

四、示例说明

下面是两个使用选择符的示例。

1. 选取所有含有特定 class 的元素

$(".myClass").css("background-color", "red");

这个代码将选取所有 class 属性中包含 "myClass" 的元素，并将它们背景色设为红色。

2. 选取表格中的特定元素

$("table tr:eq(2) td:eq(1)")

这个代码将选取表格中第三行第二列的元素。