📅 最后修改于: 2023-12-03 15:32:12.047000 🧑 作者: Mango
jQuery是一个流行的JavaScript库，它提供了一种方便的方法来操作HTML文档和处理事件。选择器是jQuery重要的一部分，它用于查找和访问HTML元素。本文将介绍jQuery中的 [属性~=值] 选择器。
[属性~=值] 选择器用于选取具有指定属性值的元素。它的语法如下：
$('[attribute~=value]')
其中，attribute代表要匹配的属性名，value代表要匹配的字符串值。~=表示匹配属性值为一个空格分隔的单词列表中包含指定值的元素。例如：
<div class="fruit apple banana"></div>
<div class="fruit cherry"></div>
<div class="fruit apple"></div>
<div class="fruit pear"></div>
要选择所有包含"apple"的水果元素，可以使用以下代码：
$('.fruit[class~="apple"]')
它将匹配所有包含"apple"的class的水果元素：<div class="fruit apple banana"></div>和<div class="fruit apple"></div>。
以下示例演示了如何使用 [属性~=值] 选择器来选择具有相应属性值的元素：
<!DOCTYPE html>
<html>
<head>
<title>[属性~=值]选择器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.fruit {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="fruit apple banana">苹果香蕉</div>
<div class="fruit cherry">樱桃</div>
<div class="fruit apple">苹果</div>
<div class="fruit pear">梨子</div>
<script>
// 匹配包含"apple"的class的水果元素
$('.fruit[class~="apple"]').css('background-color', 'pink');
</script>
</body>
</html>
在上面的示例中，所有包含"apple"的class的水果元素都会被着色为粉色。
[属性~=值] 选择器是jQuery中一个强大的工具，用于选取具有指定属性值的元素。您可以使用它来针对不同的元素进行样式和事件操作以及其他操作。希望这篇文章能够帮助您更好地理解 [属性~=值] 选择器的使用方法。