如何从 jQuery 选择器获取 DOM 元素？

在使用 jQuery 进行开发时，经常需要选取 HTML 元素并对其进行操作。jQuery 提供了强大的选择器，让开发者可以根据需要轻松地选取元素。

jQuery 选择器的分类

jQuery 选择器主要可以分为以下几类：

• 基本选择器
• 层次选择器
• 过滤选择器
• 表单选择器

基本选择器

基本选择器是最简单也是最常用的选择器，它可以根据元素的 id、class 或标签名等进行选取。

根据元素的 id 进行选取

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("#elementId");

其中 # 符号代表选取元素的 id 属性。

根据元素的 class 进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$(".elementClass");

其中 . 符号代表选取元素的 class 属性。

根据标签名进行选取

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("div");

根据属性进行选取

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("[data-name]");

其中 [] 符号代表选取元素的具体属性。

层次选择器

层次选择器可以根据元素的层次关系进行选取。

子元素选择器

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("parent > child");

其中 > 符号代表只选取直接子元素。

后代元素选择器

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("parent child");

其中空格代表选取所有后代元素。

兄弟元素选择器

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("prev + next");

其中 + 符号代表选取紧邻的下一个兄弟元素。

所有兄弟元素选择器

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("prev ~ siblings");

其中 ~ 符号代表选取所有兄弟元素。

过滤选择器

过滤选择器可以根据元素的属性、状态等进行选取。

根据属性值进行选取

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("[data-name='value']");

其中 = 符号代表选取具有指定属性值的元素。

根据属性值包含指定字符串进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("[data-name*='value']");

其中 * 符号代表选取属性值包含指定字符串的元素。

根据属性值以指定字符串开头进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("[data-name^='value']");

其中 ^ 符号代表选取属性值以指定字符串开头的元素。

根据属性值以指定字符串结尾进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("[data-name$='value']");

其中 $ 符号代表选取属性值以指定字符串结尾的元素。

根据属性值与指定的值相等进行选取（忽略大小写）

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("[data-name='value' i]");

其中 i 代表忽略大小写。

根据索引进行选取

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("element:eq(index)");

其中 : 符号代表选取具有指定索引的元素。

根据是否存在指定属性进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("[data-name]");

其中只使用属性名，不指定属性值。

根据是否可见进行选取

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("element:visible");

其中 :visible 表示选取可见元素。

根据是否被选中进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("element:selected");

其中 :selected 表示选取已被选中的元素。

根据是否具有指定类名进行选取

可以使用类似于 CSS 的语法来选取元素，如下所示：

$("element.hasClass('className')");

其中 hasClass() 方法可以判断元素是否具有指定类名。

表单选择器

表单选择器可以根据表单元素的类型进行选取。

根据是否为文本框进行选取

可以使用类似于 CSS 的语法来选取元素，如下所示：

$(":text");

其中 :text 表示选取文本框元素。

根据是否为单选框进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$(":radio");

其中 :radio 表示选取单选框元素。

根据是否为复选框进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$(":checkbox");

其中 :checkbox 表示选取复选框元素。

根据是否为下拉框进行选取

同样可以使用类似于 CSS 的语法来选取元素，如下所示：

$("select");

其中 select 表示选取下拉框元素。

总结

通过本文介绍，相信大家对 jQuery 的选择器有了更深入的了解。合理灵活地使用选择器，可以帮助我们快速高效地选取并操作元素，提高开发效率。