jQuery 选择器详解

jQuery 是一个流行的 JavaScript 库，它极大地简化了 HTML 文档遍历和操作、事件处理、动画以及 Ajax 交互。jQuery 的强大之处很大程度上源于其简洁而灵活的选择器系统。通过 jQuery 选择器，开发者可以快速找到并操作页面上的各种元素，无论是基于 ID、类名、标签名还是更复杂的属性匹配。

基本选择器

ID 选择器

ID 选择器是获取特定 ID 元素的最快方式。在 jQuery 中，使用 # 后跟 ID 名称来选择元素。例如：

$('#myId').css('color', 'red');

这段代码会将 ID 为 myId 的元素的文字颜色设置为红色。由于页面中每个 ID 应该是唯一的，因此 ID 选择器通常只返回一个元素。

类选择器

类选择器用于选取所有具有指定类名的元素。在 jQuery 中，使用 . 后跟类名来选择元素。例如：

$('.myClass').hide();

此代码将隐藏所有类名为 myClass 的元素。类选择器非常灵活，允许多个元素共享相同的类名。

标签选择器

标签选择器根据 HTML 标签名称来选取元素。例如：

$('p').text('Hello, World!');

这会将页面上所有

标签的文本内容设置为 "Hello, World!"。

属性选择器

除了基本的 ID、类和标签选择器外，jQuery 还提供了强大的属性选择器，允许根据元素的属性来选择元素。

[attribute] 选择器

选择所有拥有指定属性的元素。例如：

$('[target]').addClass('external-link');

这段代码将给所有带有 target 属性的元素添加 external-link 类。

[attribute=value] 选择器

选择具有特定属性值相等的元素。例如：

$('[type="text"]').css('background-color', 'yellow');

这将把所有 type 属性值为 "text" 的元素的背景颜色设置为黄色。

层级选择器

层级选择器允许你基于 HTML 文档中的层级关系来选择元素。

后代选择器

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

$('div p').hide();

这将隐藏所有在

$('ul > li').addClass('sub-list-item');