问题描述:

What's the difference between these two jQuery selectors?

Here are the definitions from w3schools.com:

  • The [attribute~=value] selector selects each element with a

    specific attribute, with a value containing a specific string.

  • The [attribute*=value] selector selects each element with a

    specific attribute, with a value containing a string.

UPDATE:

Here are the definitions from jquery.com. This answers my question:

  • [attribute~=value] - Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

  • [attribute*=value] - Selects elements that have the specified attribute with a value containing a given substring.

网友答案:

*= is attributeContains selector , From jquery docs:

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

~= is attributeContainsWord selector , From jquery docs:

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

See attributeContains selector with Example of usage here and attributeContainsWord selector with example and usage here

The attributeContains selector is for the string to be contained in the attribute value while attributeContainsWord selector is for string seperated with delimeted space. The official jquery examples clearly explain it.

EXPLANATION:

Attribute Contains Selector [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!" );

OUTPUT:

DEMO EXAMPLE:

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

Attribute Contains Word Selector [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!" );

OUTPUT:

DEMO EXAMPLE:

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

网友答案:

Those are not jQuery selectors, they're CSS attribute-selectors.

~= - Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

*= - Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

The difference is that, given the following HTML:

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

[class*=abcd] will match both elements (since it searches the listed attribute for any occurrence of the given string), whereas [class~=abcd] will match only the first (because it looks for a white-space separated occurrence of the given string).

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

[class~=abcd] {
  border-bottom: 2px solid #0f0;
}
<span class="abcd efg">First</span>
<span class="abcdefg">Second</span>
网友答案:
[attribute*=value] ,  a[href*="test"]     

Selects every element whose href attribute value contains the substring "test"


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

Selects all elements with a title attribute containing the word "flower"

网友答案:

The difference is, that the "contains" operator (*= value) look for these characters anywhere in the attribute, whereas "contains word" (~= value) looks only for whole words.

I would recommend you to rather avoid looking at w3schools definitions, and use official library API (like this for the contains selector and this for contains word selector). For other matters, I'd recommend MDN site or the W3C specification directly.

网友答案:

$("[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>
相关阅读:
Top