7 jQuery选择器之属性选择器

在前面的教程中，我们讨论了过滤选择器，了解了如何利用 jQuery 对元素进行过滤选择。今天，我们将深入探讨 jQuery 的属性选择器。属性选择器提供了一种强大的方式来选择具有特定属性或属性值的元素，使得我们在操作 DOM 时更加灵活和高效。

什么是属性选择器

属性选择器是 jQuery 用于选择具有特定属性的元素的选择器。语法格式如下：

$("[attribute]")                      // 选择具有指定属性的所有元素
$("[attribute='value']")              // 选择具有指定属性且值为指定值的元素
$("[attribute^='value']")             // 选择属性值以指定值开头的元素
$("[attribute$='value']")             // 选择属性值以指定值结尾的元素
$("[attribute*='value']")             // 选择属性值中包含指定值的元素

示例案例

接下来，我们将通过一些简单的案例来了解如何使用属性选择器。

1. 选择所有具有特定属性的元素

假设在 HTML 页面中，我们有以下元素：

<div class="item" data-category="fruit">苹果</div>
<div class="item" data-category="vegetable">胡萝卜</div>
<div class="item" data-category="fruit">香蕉</div>
<div class="item">没有分类</div>

我们要选择所有具有 data-category 属性的元素，使用属性选择器可以这样写：

var itemsWithCategory = $("[data-category]");
itemsWithCategory.css("color", "blue");

这段代码将所有带有 data-category 属性的元素文本颜色设置为蓝色。

2. 选择具有特定属性值的元素

我们可以进一步筛选选择，选择 data-category 属性值为 fruit 的元素：

var fruits = $("[data-category='fruit']");
fruits.css("font-weight", "bold");

在这个例子中，只有“苹果”和“香蕉”这两个元素的字体会变为粗体。

3. 选择属性以指定值开头或结尾的元素

如果我们想选择那些 data-category 属性值以 fr 开头的元素，可以使用开头选择器：

var itemsStartingWithFr = $("[data-category^='fr']");
itemsStartingWithFr.css("background-color", "yellow");

这段代码会给所有以 fr 开头的元素（如“水果”）添加黄色背景。

同样，我们可以查找 data-category 属性值以 table 结尾的元素：

var itemsEndingWithTable = $("[data-category$='table']");
itemsEndingWithTable.css("text-decoration", "underline");

4. 选择属性值中包含指定值的元素

如果我们需要选择那个 data-category 中包含字符串 get 的元素，可以使用包含选择器：

var itemsContainingGet = $("[data-category*='get']");
itemsContainingGet.css("border", "2px solid red");

通过这个选择器，我们可以选中包含 get 的元素并给它们添加红色边框。

结语

通过使用 jQuery 的属性选择器，我们可以便捷地选择并操作 DOM 中的元素，极大地提高了开发效率。在本篇教程中，我们介绍了基本的属性选择器用法并结合实例进行了讲解。理解和掌握这些选择器对于后续的 jQuery 事件处理和动画效果实现非常重要。

接下来，我们将进入事件处理之事件的绑定与解绑的内容，继续深入学习 jQuery 的强大功能，用以增强我们对前端开发的理解和实践。