jQuery 选择器

jQuery 是一款流行的 JavaScript 库。 选择器是 jQuery 的一大特色，它提供了一种简便的方法来选择 HTML 元素并操作它们。选择器类似于 CSS 选择器，但具有更强大，更灵活的功能。

基本选择器

元素选择器

元素选择器选取指定的 HTML 元素。语法为 $()，括号内为元素名称。

示例代码：

$('p') // 选取所有 <p> 元素

ID 选择器

ID 选择器选取指定 ID 的 HTML 元素。语法为 $()，括号内为 "#" + ID 名称。

示例代码：

$('#myId') // 选取 id 为 "myId" 的元素

类选择器

类选择器选取指定类名的 HTML 元素。语法为 $()，括号内为 "." + 类名。

示例代码：

$('.myClass') // 选取类名为 "myClass" 的元素

层次选择器

后代选择器

后代选择器选取指定元素的所有后代元素。语法为 $() ' ' $()，中间用空格隔开。

示例代码：

$('div p') // 选取所有 <div> 元素内部的 <p> 元素

子元素选择器

子元素选择器选取指定元素的子元素。语法为 $() > $()，中间用 ">" 隔开。

示例代码：

$('div > p') // 选取所有 <div> 元素的直接子元素 <p>

相邻兄弟选择器

相邻兄弟选择器选取紧接在另一个元素后面的元素，且二者有相同的父元素。语法为 $() + $()，中间用 "+" 隔开。

示例代码：

$('div + p') // 选取所有紧接着 <div> 元素之后的 <p> 元素

过滤选择器

:first

:first 选择器选取第一个匹配的元素。

示例代码：

$('p:first') // 选取第一个 <p> 元素

:last

:last 选择器选取最后一个匹配的元素。

示例代码：

$('p:last') // 选取最后一个 <p> 元素

:eq

:eq 选择器选取在选定的元素中，带有指定 index 值的元素。索引从 0 开始。

示例代码：

$('p:eq(1)') // 选取第二个 <p> 元素

:even

:even 选择器选取所有偶数位置的元素，索引从 0 开始。

示例代码：

$('p:even') // 选取所有偶数位置的 <p> 元素

:odd

:odd 选择器选取所有奇数位置的元素，索引从 0 开始。

示例代码：

$('p:odd') // 选取所有奇数位置的 <p> 元素

:not

:not 选择器选取所有不匹配的元素。

示例代码：

$('div:not(.myClass)') // 选取所有类名不为 "myClass" 的 <div> 元素

:contains

:contains 选择器选取包含指定文本的元素。

示例代码：

$('p:contains("text")') // 选取包含文本 "text" 的 <p> 元素

:empty

:empty 选择器选取不包含任何子元素或文本的空元素。

示例代码：

$('p:empty') // 选取空的 <p> 元素

复合选择器

复合选择器可以将多个选择器组合在一起使用。

多元素选择器

多元素选择器可以选取多个元素。语法为 $(), $()，中间用逗号隔开。

示例代码：

$('p, div') // 选取所有 <p> 和 <div> 元素

多选择器选择器

多选择器选择器可以根据多种选择器选取匹配的元素。语法为 $() $()。

示例代码：

$('div p, #myId') // 选取所有 <div> 下的 <p> 元素，以及 ID 为 "myId" 的元素

结束语

以上介绍了 jQuery 的选择器的基本使用，但远非全部。jQuery 选择器提供了丰富且灵活的选择器，可以根据实际需要使用。