jQuery | 选择器完整参考

jQuery是一种流行的JavaScript库，它使用选择器从HTML文档中选择元素，以便进行操作和处理。本文将提供jQuery选择器的完整参考，包括基本选择器、层次选择器、属性选择器等，帮助程序员更有效地使用jQuery选择器。

基本选择器

基本选择器是从HTML文档中选择元素的最基本方式。以下是jQuery中的一些基本选择器及其用法：

元素选择器

使用元素名称来选择所有具有该名称的元素。例如：

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

class选择器

使用class名称来选择所有具有该class的元素。例如：

$('.my-class') //选择所有class为"my-class"的元素

id选择器

使用id名称来选择具有该id的元素。例如：

$('#my-id') //选择id为"my-id"的元素

属性选择器

使用元素属性来选择具有该属性的元素。例如：

$('input[name="username"]') //选择name属性为"username"的所有<input>元素

多元素选择器

将多个选择器组合在一起，以便选择多个元素。例如：

$('h1, h2, h3') //选择所有h1、h2和h3元素

层次选择器

层次选择器是基于元素之间的关系来选择元素的。以下是jQuery中的一些常见层次选择器及其用法：

后代选择器

选择某个元素的所有后代元素。例如：

$('div p') //选择所有<div>元素中的<p>元素

子元素选择器

选择某个元素的直接子元素。例如：

$('ul > li') //选择所有<ul>元素的直接子元素<li>元素

相邻兄弟选择器

选择某个元素后面的所有相邻兄弟元素。例如：

$('h1 + p') //选择<h1>元素后面的<p>元素

通用兄弟选择器

选择某个元素后面的所有兄弟元素。例如：

$('h1 ~ p') //选择<h1>元素后面的所有<p>元素

进阶选择器

除了基本选择器和层次选择器之外，jQuery还提供了一些更为灵活的选择器，以便更精准地选取元素。

:first选择器

选择第一个匹配元素。例如：

$('li:first') //选择第一个<li>元素

:last选择器

选择最后一个匹配元素。例如：

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

:even选择器

选择所有偶数位置的元素。例如：

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

:odd选择器

选择所有奇数位置的元素。例如：

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

:eq选择器

选择与索引号匹配的元素（索引从0开始）。例如：

$('li:eq(2)') //选择第3个<li>元素

:not选择器

选择所有不匹配选择器的元素。例如：

$('input:not(:checked)') //选择所有未选中的<input>元素

:has选择器

选择包含特定元素的所有元素。例如：

$('ul:has(li)') //选择所有包含<li>元素的<ul>元素

:contains选择器

选择包含特定文本的所有元素。例如：

$('p:contains("Lorem ipsum")') //选择所有包含文本"Lorem ipsum"的<p>元素

总结

本文提供了jQuery选择器的完整参考，包括基本选择器、层次选择器、属性选择器以及进阶选择器。程序员可以根据自己的需求灵活使用这些选择器，并结合jQuery的其他功能进行元素操作和处理。