jQuery Attribute selectors example

jQuery get element by element attribute name and value. Select element by different condition i.e., Select element which have name “firstname”, Select element which have value “jQuery”. Example and detail taken from jQuery site and showing in one place with example.

Attribute Contains Prefix Selector [name|=”value”]

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

//HTML
<a href="example.html" hreflang="en">Text line 1</a>
<a href="example.html" hreflang="en-UK">Text line 2</a>
<a href="example.html" hreflang="english">Text line 3</a>

<script>
$( "a[hreflang|='en']" ).css( "color", "red" );
</script>

Attribute Contains Selector [name*=”value”]

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

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

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

Attribute Contains Word Selector [name~=”value”]

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

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

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

Attribute Ends With Selector [name$=”value”]

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

//HTML
<input name="newsletter">
<input name="milkman">
<input name="jobletter">

<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>

Attribute Equals Selector [name=”value”]

Selects elements that have the specified attribute with a value exactly equal to a certain value.

//HTML
<label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
</label>

<script>
$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );
</script>

Attribute Not Equal Selector [name!=”value”]

Select elements that either don?t have the specified attribute, or do have the specified attribute but not with a certain value.

//HTML
<div>
  <input type="radio" name="newsletter" value="Hot Fuzz">
  <span>name is newsletter</span>
</div>
<div>
  <input type="radio" value="Cold Fusion">
  <span>no name</span>
</div>

<script>
$( "input[name!='newsletter']" ).next().append( "; not newsletter" );
</script>

Attribute Starts With Selector [name^=”value”]

Selects elements that have the specified attribute with a value beginning exactly with a given string.

//HTML
<input name="newsletter">
<input name="milkman">
<input name="newsboy">

<script>
$( "input[name^='news']" ).val( "news here!" );
</script>

Has Attribute Selector [name]

Selects elements that have the specified attribute, with any value.

//HTML
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>

<script>
// Using .one() so the handler is executed at most once
// per element per event type
$( "div[id]" ).one( "click", function() {
  var idString = $( this ).text() + " = " + $( this ).attr( "id" );
  $( this ).text( idString );
});
</script>

Multiple Attribute Selector [name=”value”][name2=”value2″]

Matches elements that match all of the specified attribute filters.

//HTML
<input id="man-news" name="man-news">
<input name="milkman">
<input id="letterman" name="new-letterman">
<input name="newmilk">

<script>
$( "input[id][name$='man']" ).val( "only this one" );
</script>

Click here for more detail and more example.