[attribute~ = value]和[attribute*= value]之间有什么区别？

Question

这两个jQuery选择器有什么区别？

以下是w3schools.com的定义:

• 所述[attribute~=value]选择器选择与特定的属性的每个元件,用含有特定字符串的值.

• 所述[attribute*=value]选择器选择与特定的属性的每个元件,用含有一个字符串的值.

更新:

以下是jquery.com的定义.这回答了我的问题:

• [attribute~=value] - 选择具有指定属性的元素,其值包含由空格分隔的给定单词.

• [attribute*=value] - 选择具有指定属性的元素,其值包含给定的子字符串.

Answer 1

*=是attributeContains 选择器，来自jquery 文档：

选择具有指定属性且其值包含给定子字符串的元素。

~=是attributeContainsWord 选择器，来自jquery 文档：

选择具有指定属性且其值包含给定单词（以空格分隔）的元素。

请参阅此处的 attributeContains 选择器及其用法示例和此处的 attributeContainsWord 选择器及其示例和用法

attributeContains选择器用于包含在属性值中的字符串，而attributeContainsWord 选择器用于以分隔空格分隔的字符串。jquery官方的例子解释的很清楚。

解释：

属性包含选择器 [名称*=“值”]

HTML：

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

查询：

$( "input[name*='man']" ).val( "has man in it!" );

输出：

演示示例：

属性包含选择器的示例 [name*="value"]

属性包含单词选择器 [name~="value"]

HTML：

<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">

查询：

$( "input[name~='man']" ).val( "mr. man is in it!" );

输出：

演示示例：

属性包含单词选择器 [name~="value"] 的示例