jQuery 过滤 - 精准选择 DOM 元素

jQueryフィルタリング

jQuery 提供了强大的过滤选择器，帮助你从文档中精确定位需要的 DOM 元素，实现高效的网页操作。本文将详细介绍 jQuery 过滤方法，助你轻松掌握 DOM 元素筛选技巧。

1. 类型过滤选择器

根据元素类型进行筛选：

选择器	描述
`:button`	选择所有按钮元素。
`:checkbox`	选择所有复选框元素。
`:file`	选择所有文件上传元素。
`:image`	选择所有图像元素。
`:input`	选择所有输入框、文本域、选择框和按钮元素。
`:password`	选择所有密码输入框元素。
`:radio`	选择所有单选按钮元素。
`:reset`	选择所有重置按钮元素。
`:submit`	选择所有提交按钮元素。
`:text`	选择所有文本输入框元素。


<button>按钮</button>
<input type="checkbox"> 复选框
<input type="file">
<img src="image.jpg" alt="图片">

$(":button").css("background-color", "yellow");
$(":checkbox").prop("checked", true);

2. 内容过滤选择器

根据元素内容进行筛选：

选择器	描述
`:contains(text)`	选择包含指定文本的元素。
`:empty`	选择不包含子元素或文本的空元素。
`:has(selector)`	选择包含匹配选择器元素的元素。
`:parent`	选择拥有子元素或文本的非空元素。


<p>这是一个包含文本的段落。</p>
<p></p>
<div>
  <p>子元素</p>
</div>

$("p:contains('文本')").css("color", "red");
$("p:empty").text("这是一个空段落");

3. 可见性过滤选择器

根据元素可见性进行筛选：

选择器	描述
`:hidden`	选择隐藏的元素（包括 display: none;、type="hidden"、width: 0; height: 0;、visibility: hidden; 以及父元素隐藏的元素）。
`:visible`	选择可见的元素。


<p style="display: none;">隐藏的段落</p>
<p>可见的段落</p>

$(":hidden").show();

4. 属性过滤选择器

根据元素属性进行筛选：

选择器	描述
`[attribute]`	选择拥有指定属性的元素。
`[attribute=value]`	选择属性值等于指定值的元素。
`[attribute!=value]`	选择属性值不等于指定值的元素。
`[attribute^=value]`	选择属性值以指定值开头的元素。
`[attribute$=value]`	选择属性值以指定值结尾的元素。
`[attribute*=value]`	选择属性值包含指定值的元素。
`[selector1][selector2][selectorN]`	选择同时满足多个选择器条件的元素。


<a href="https://www.example.com">链接</a>
<input type="text" name="username" disabled>

$("a[href]").css("text-decoration", "underline");
$("input[name='username']").prop("disabled", false);

5. 子元素过滤选择器

根据子元素进行筛选：

选择器	描述
`:first-child`	选择每个父元素的第一个子元素。
`:last-child`	选择每个父元素的最后一个子元素。
`:nth-child(n)`	选择每个父元素的第 n 个子元素（n 从 1 开始）。
`:nth-last-child(n)`	选择每个父元素的倒数第 n 个子元素（n 从 1 开始）。
`:only-child`	选择是父元素中唯一子元素的元素。


<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

$("li:first-child").css("font-weight", "bold");
$("li:nth-child(2)").css("color", "red");

6. 表单对象属性过滤选择器

根据表单对象属性进行筛选：

选择器	描述
`:enabled`	选择可用的表单元素。
`:disabled`	选择不可用的表单元素。
`:checked`	选择已选中的单选框或复选框。
`:selected`	选择已选中的下拉列表选项。


<input type="text" disabled>
<input type="checkbox" checked>
<select>
  <option>选项 1</option>
  <option selected>选项 2</option>
</select>

$(":disabled").prop("disabled", false);
$(":checked").prop("checked", false);

总结

jQuery 提供了丰富的过滤选择器，让你能够轻松地从文档中精确定位所需的 DOM 元素，提高网页操作的效率。熟练掌握这些选择器，将为你的网页开发工作带来极大的便利。

参考文章

QA

Q1: jQuery 的过滤选择器和 CSS 选择器有什么区别？

A1: jQuery 的过滤选择器基于 CSS 选择器语法，但扩展了更多功能，例如根据元素内容、可见性、属性等进行筛选。CSS 选择器主要用于样式设置，而 jQuery 选择器则用于 DOM 操作。

Q2: 如何组合使用多个 jQuery 过滤选择器？

A2: 可以将多个选择器直接连接在一起，例如 $("div.container p:first-child")，表示选择所有 class 为 "container" 的 div 元素中，第一个 p 子元素。

Q3: jQuery 过滤选择器的性能如何？

A3: jQuery 过滤选择器的性能取决于选择器的复杂程度和文档大小。建议尽量使用简洁高效的选择器，避免过度嵌套或使用过于复杂的表达式。