jQuery选择器详解：从基本到高级，掌握9种常用类型

在Web开发中，jQuery选择器是快速定位和操作DOM元素的重要工具。掌握不同的选择器类型可以帮助开发者更高效地实现页面交互和效果。本文将从基本到高级，详细介绍9种常用的jQuery选择器类型，帮助您更好地理解和应用jQuery选择器。

基本选择器是最常用的选择器，可以直接选择页面中的元素。以下是一些基本选择器的示例：

元素选择器：选择所有指定类型的元素。

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

ID选择器：通过元素的ID选择元素。

$("#myId"); // 选择ID为myId的元素

类选择器：通过元素的类名选择元素。

$(".myClass"); // 选择所有类名为myClass的元素

标签选择器：通过元素的标签名选择元素。

$("div"); // 选择所有<div>元素

层级选择器用于选择DOM树中的元素，根据元素之间的层级关系进行选择。

子选择器：选择父元素中直接包含的子元素。

$("#parent > div"); // 选择ID为parent的元素中直接包含的<div>元素

后代选择器：选择所有后代元素。

$("#parent div"); // 选择ID为parent的元素中所有<div>元素，包括子元素和后代元素

相邻兄弟选择器：选择紧接在指定元素后的兄弟元素。

$("#element + div"); // 选择紧接在ID为element的元素后的<div>元素

同辈选择器：选择所有同辈元素。

$("#element ~ div"); // 选择所有与ID为element同辈的<div>元素

属性选择器用于根据元素的属性值选择元素。

属性存在选择器：选择具有指定属性的元素。

$("[name]"); // 选择所有具有name属性的元素

属性值选择器：选择具有指定属性值的元素。

$("[name='myName']"); // 选择name属性值为myName的元素

属性开始选择器：选择属性值以指定值开头的元素。

$("[name^='myName']"); // 选择name属性值以myName开头的元素

属性结束选择器：选择属性值以指定值结尾的元素。

$("[name$='myName']"); // 选择name属性值以myName结尾的元素

属性包含选择器：选择属性值包含指定值的元素。

$("[name*='myName']"); // 选择name属性值包含myName的元素

过滤选择器用于对选择器结果进行筛选。

第一项过滤选择器：选择所有匹配元素中的第一个元素。

$("div:first"); // 选择所有<div>元素中的第一个元素

奇偶过滤选择器：选择所有匹配元素中的奇数或偶数元素。

$("tr:odd"); // 选择所有<tr>元素中的奇数行

存在过滤选择器：选择具有指定属性的元素。

$("input:checked"); // 选择所有选中的<input>元素

表单选择器用于选择表单元素。

所有表单元素：选择所有表单元素。

$(":input"); // 选择所有<input>元素

输入框：选择所有输入框元素。

$(":text"); // 选择所有文本输入框元素

单选按钮：选择所有单选按钮元素。

$(":radio"); // 选择所有单选按钮元素

伪类选择器用于选择具有特定状态的元素。

链接伪类选择器：选择具有指定状态的链接元素。

$:link; // 选择所有未被访问过的链接元素
$:visited; // 选择所有已被访问过的链接元素
$:hover; // 选择鼠标悬停状态的元素
$:active; // 选择活动状态的元素

伪元素选择器用于选择具有特定结构的元素。

首字母伪元素选择器：选择指定元素中的第一个字母。

$:first-letter; // 选择指定元素中的第一个字母

首行伪元素选择器：选择指定元素中的第一行文本。

$:first-line; // 选择指定元素中的第一行文本

通用选择器用于选择所有元素。

$:("*"); // 选择所有元素

伪对象选择器用于选择具有特定属性的元素。

表单域伪对象选择器：选择所有表单域元素。

$:(":input"); // 选择所有<input>元素

通过掌握以上9种常用的jQuery选择器类型，您可以更高效地定位和操作DOM元素，实现各种页面交互和效果。在实际开发中，灵活运用不同的选择器类型，可以大大提高开发效率。