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

Question

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

以下是w3schools.com的定义：

• [attribute~=value]选择器用a选择每个元素 特定属性，其值包含特定字符串。

• [attribute*=value]选择器用a选择每个元素 特定属性，其值包含字符串。

更新

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

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

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

Answer 1

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

  

    

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

  

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

  

    

选择具有指定属性的元素，其值包含由空格分隔的给定单词。

  

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

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

说明：

属性包含选择器[name * =＆＃34; value＆＃34;]

<强> 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"]

属性包含Word Selector [name~ =＆＃34; value＆＃34;]

<强> 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"]

Answer 2

那些不是jQuery选择器，它们是CSS属性选择器。

  

~= - 表示具有att属性的元素，该属性的值是以空格分隔的单词列表，其中一个正是＆＃34; val＆＃34;。如果＆＃34; val＆＃34;包含空格，它永远不会代表任何东西（因为单词用空格分隔）。如果＆＃34; val＆＃34;是空字符串，它永远不会代表任何东西。

     

*= - 表示具有att属性的元素，该属性的值至少包含子字符串＆＃34; val＆＃34;的一个实例。如果＆＃34; val＆＃34;是空字符串，然后选择器不代表任何东西。

差异是给定以下HTML：

<span class="abcd efg">First</span>
<span class="abcdefg">Second</span>

[class*=abcd]将匹配两个元素（因为它搜索列出的属性任何出现的给定字符串），而[class~=abcd]将只匹配第一个（因为它看起来对于给定字符串的空格分隔的出现。）

＆＃13;

＆＃13;

[class*=abcd] {
  color: #f00;
}

[class~=abcd] {
  border-bottom: 2px solid #0f0;
}

＆＃13;

<span class="abcd efg">First</span>
<span class="abcdefg">Second</span>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• CSS Attribute-selectors。

Answer 3

$("[class*='b']").css("color", "green");
$("[class~='b']").css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p class="a b c">1st</p>
<p class="abc">2nd</p>
<p class="a b c">3rd</p>
<p class="abc">4th</p>
<p class="adc">5th</p>

。

*=表示该属性包含值x（作为子字符串） ~=表示该属性包含由空格分隔的单词列表，x是其中之一 阅读更多here。

Answer 4

[attribute*=value] ,  a[href*="test"]     

     

选择href属性值包含的每个元素   子串“测试”

---

  

[attribute~ = value]，[title~ = flower]

     

用a选择所有元素   title属性包含单词“flower”

Answer 5

区别在于，＆＃34;包含＆＃34;运算符（*= value）在属性中查找任意位置中的这些字符，而＆＃34;包含单词＆＃34; （~= value）仅查找整个字词。

我建议您避免查看w3schools定义，并使用官方库API（如this for the contains selector和this for contains word selector）。对于其他问题，我建议直接推荐MDN site或W3C。