jquery - [属性~=值] 和 [属性*=值] 有什么区别？

Question

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

以下是来自 w3schools.com 的定义:

• [attribute~=value] 选择器选择带有 特定属性，其值包含特定字符串。

• [attribute*=value] 选择器选择带有 特定属性，其值包含字符串。

更新:

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

• [attribute~=value] - 选择具有指定属性且值包含给定单词(以空格分隔)的元素。

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

Answer 1

*=是 attributeContains 选择器，来自 jquery docs :

Selects elements that have the specified attribute with a value containing a given substring.

~=是 attributeContainsWord 选择器，来自 jquery docs :

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

参见attributeContains selector with Example of usage here和 attributeContainsWord selector with example and usage here

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

说明:

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

HTML:

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

JQUERY:

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

输出:

演示示例:

Example of Attribute Contains Selector [name*="value"]

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

HTML:

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

JQUERY:

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

输出:

演示示例:

Example of Attribute Contains Word Selector [name~="value"]