jQuery | [属性~=值] 选择器

在jQuery中，[属性~=值]选择器用于选取具有指定属性值的元素。它匹配拥有指定属性且属性值包括包含指定字符串的元素。

语法

$("[attribute~=value]")

其中，attribute是要匹配的属性名称，value是要包含的字符串。

示例

HTML代码：

<ul>
  <li data-color="red">Red</li>
  <li data-color="green">Green</li>
  <li data-color="blue">Blue</li>
  <li data-color="yellow green">Yellow-green</li>
</ul>

jQuery代码：

// 获取属性data-color包含green的元素
$("li[data-color~=green]").css("background-color", "green");

解释：上述代码可以选取所有li元素中data-color属性包含green字符串的元素，并将它们的背景颜色设置为绿色。

注意事项

• 该选择器选择的元素可能不仅包含指定的属性值，还可能包含其他属性值。
• 该选择器选取的元素是大小写敏感的。

参考文献

• jQuery API Documentation - Attribute Contains Word Selector