jquery - What's the difference between [attribute~=value] and [attribute*=value]? -

jquery - What's the difference between [attribute~=value] and [attribute*=value]? -

what's difference between these 2 jquery selectors?

here definitions w3schools.com:

the [attribute~=value] selector selects each element specific attribute, value containing specific string.

the [attribute*=value] selector selects each element specific attribute, value containing string.

update:

here definitions jquery.com. answers question:

[attribute~=value] - selects elements have specified attribute value containing given word, delimited spaces.

[attribute*=value] - selects elements have specified attribute value containing given substring.

*= attributecontains selector , jquery docs:

selects elements have specified attribute value containing given substring.

~= attributecontainsword selector , jquery docs:

selects elements have specified attribute value containing given word, delimited spaces.

see attributecontains selector illustration of usage here , attributecontainsword selector illustration , usage here

the attributecontains selector string contained in attribute value while attributecontainsword selector string seperated delimeted space. official jquery examples 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 in it!" );

output:

demo example:

example of attribute contains word selector [name~="value"]

jquery jquery-selectors