当前位置：首页 > 项目案例 > 正文内容

jquery选择器写法，jQuery选择器，高效编写与使用指南

wzgly2个月前 (07-04)项目案例2

jQuery选择器是一种强大的工具，用于在HTML文档中查找元素，以下是几种常见的jQuery选择器写法：，1. 元素选择器：如$("#id")用于选择具有特定ID的元素，$(".class")用于选择具有特定类的元素，$("element")用于选择所有指定的HTML元素。，2. 属性选择器：如$("[attribute]")选择具有指定属性的元素，$("[attribute=value]")选择具有特定属性值的元素。，3. CSS选择器：如$("p:first-child")选择所有第一个子元素为`的元素，$("div + p")选择紧随元素后的元素。，4. 子代选择器：如$("ul li")选择所有元素下的`元素。，5. 等等，还有更多高级选择器，如筛选选择器、可见性选择器等，掌握这些选择器可以有效地在DOM中定位和操作元素。

作为一名前端开发者，我经常被问到关于jQuery选择器的问题,我就来和大家地聊聊jQuery选择器的写法。

问：什么是jQuery选择器？

答：jQuery选择器是jQuery中用于查找和操作DOM元素的方法，它允许开发者以简洁的方式选择HTML元素,并对它们进行各种操作。

一：基本选择器

元素选择器

点睛之笔：使用元素标签名直接选择元素。

$("#id").css("color", "red"); // 选择id为id的元素，并改变其颜色
$("p").hide(); // 隐藏所有<p>元素

类选择器

点睛之笔：使用类名选择具有特定类的元素。

$(".class").click(function() {
  alert("点击了有class的元素");
});

ID选择器

点睛之笔：使用ID选择具有特定ID的元素。

$("#id").mouseover(function() {
  $(this).css("background-color", "yellow");
});

二：层级选择器

父级选择器

点睛之笔：选择父级元素中的子元素。

$("#parent > .child").click(function() {
  alert("点击了直接子元素");
});

通用兄弟选择器

点睛之笔：选择紧跟在指定元素后面的兄弟元素。

$("#element + .sibling").click(function() {
  alert("点击了相邻兄弟元素");
});

后代选择器

点睛之笔：选择任意深度的后代元素。

$("#parent .descendant").click(function() {
  alert("点击了任意深度的后代元素");
});

三：属性选择器

精确匹配属性

点睛之笔：选择具有特定属性和值的元素。
```
$("input[type='text']").val("Hello, World!");
```

属性存在选择器

点睛之笔：选择具有特定属性的元素，不论属性值。
```
$("input[type]").val("Hello, World!");
```

属性值包含选择器

点睛之笔：选择属性值包含特定字符串的元素。
```
$("input[name*='user']").val("Hello, World!");
```

四：表单选择器

表单元素选择器

点睛之笔：选择表单中的元素。

$("input[type='submit']").click(function() {
  alert("提交表单");
});

表单选择器

点睛之笔：选择具有特定类的表单元素。

$("input[type='text'].required").val("Hello, World!");

表单选择器

点睛之笔：选择具有特定ID的表单元素。

$("input[type='password'][id='password']").val("Hello, World!");

五：伪类选择器

链接伪类选择器

点睛之笔：选择具有特定链接状态的元素。

$("a:link").css("color", "blue");
$("a:visited").css("color", "green");

动态伪类选择器

点睛之笔：选择具有特定动态状态的元素。
```
$("input:focus").css("border", "2px solid red");
```

状态伪类选择器

点睛之笔：选择具有特定状态的元素。

$("input:enabled").val("Enabled");
$("input:disabled").val("Disabled");

通过以上对jQuery选择器的讲解，相信大家已经对jQuery选择器的写法有了更全面的了解，在实际开发中，灵活运用这些选择器,可以大大提高开发效率。

其他相关扩展阅读资料参考文献：

基础选择器

ID选择器通过#符号匹配特定ID的元素
语法：$("#id")，例如$("#username")会精准选取ID为username的元素。
优点：效率高，适合唯一标识的元素。
注意：ID必须唯一,若重复可能导致选取结果不准确。
类选择器通过.符号匹配具有指定类的元素
语法：$(".class")，例如$(".btn")可选取所有类名为btn的元素。
适用场景：常用于样式统一或批量操作。
提示：一个元素可拥有多个类,选择器会匹配所有符合条件的类。
标签选择器通过元素名匹配所有同类型元素
语法：$("tag")，例如$("p")选取所有段落标签。
优势：无需额外属性，直接操作HTML结构。
局限：若页面元素过多,可能影响性能。

层级选择器

后代选择器用空格分隔，匹配所有嵌套元素
语法：$("ancestor descendant")，例如$(".container p")选取container内所有p标签。
核心：无需关注层级关系，自动遍历所有子元素。
建议：优先使用后代选择器,避免手动遍历DOM树。
子元素选择器用>符号匹配直接子元素
语法：$("parent > child")，例如$(".nav > li")选取nav下直接的li子元素。
区别：与后代选择器不同，仅匹配直接子节点。
应用：常用于精确控制父子结构的样式或行为。
相邻兄弟选择器用+符号匹配紧邻的兄弟元素
语法：$("prev + next")，例如$(".header + .content")选取紧接在header后的content元素。
限制：仅匹配前一个元素的下一个兄弟节点。
替代：若需匹配多个兄弟节点,使用兄弟选择器。

属性选择器

属性存在选择器用[属性名]匹配具有指定属性的元素
语法：$("[attr]")，例如$("[type]")选取所有带有type属性的元素。
用途：适用于动态属性或条件筛选。
示例：$("[data-role='menu']")可选取自定义data-role属性为menu的元素。
属性值匹配选择器用[属性名='值']精确匹配属性值
语法：$("[attr='value']")，例如$("[name='email']")选取name属性值为email的元素。
注意：值需完全匹配，区分大小写。
替代方案：若需模糊匹配，可用$("[attr*='value']")。
属性包含选择器用[属性名~='值']匹配属性值包含指定字符串的元素
语法：$("[attr~='value']")，例如$("[title~='error']")选取title属性包含error的元素。
适用：适合处理多值属性，如class或title。
示例：$("[class~='warning']")可选取class中包含warning的元素。

过滤选择器

:first选择器选取第一个匹配的元素
语法：$("selector:first")，例如$("li:first")选取列表中第一个li项。
替代：可直接使用$("selector").first()方法。
注意：与:first-child不同,仅根据匹配结果排序。
:even和:odd选择器选取偶数或奇数索引元素
语法：$("tr:even")选取表格中偶数行，$("tr:odd")选取奇数行。
用途：常用于表格行交替样式或分页功能。
提示：索引从0开始计算,需注意起始位置。
:not选择器排除特定元素
语法：$("div:not(.hidden)")选取所有非隐藏的div元素。
优势：灵活组合条件，减少重复代码。
示例：$("a:not([href])")可排除无href属性的链接。

表单选择器

:checked选择器选取被选中的单选按钮或复选框
语法：$(":checked")，例如选取页面中所有选中的表单元素。
适用：常用于表单提交前的校验逻辑。
注意：需结合表单元素类型使用,如radio或checkbox。
:disabled选择器选取禁用状态的表单元素
语法：$(":disabled")，例如选取所有不可操作的输入框。
用途：可动态处理禁用状态的样式或行为。
示例：$(":disabled").css("background-color", "gray")可统一修改禁用元素背景色。
:input选择器选取所有表单元素
语法：$(":input")，包括input、textarea、select、button等。
优势：简化对表单元素的统一操作。
注意：需结合其他选择器使用，如$(":input[type='text']")。

jQuery选择器是操作DOM的核心工具，掌握其写法能显著提升开发效率。基础选择器适合快速定位元素，层级选择器可精准控制嵌套结构，属性选择器适用于动态属性筛选，过滤选择器能灵活排除或排序元素，表单选择器则专注于表单交互，实际应用中，建议结合具体场景选择合适的类型，例如用$(":input")替代多次书写input标签选择器。避免过度嵌套，保持选择器简洁性，同时注意性能优化，减少不必要的DOM遍历，通过不断实践，开发者可以熟练运用选择器解决复杂问题，如动态生成表单时使用$("[name='username']")快速绑定事件，或用$("li:even")实现列表行交替样式。选择器的灵活性与高效性是jQuery强大功能的关键,合理使用能事半功倍。