jQuery Attribute Selector

First of all we should have to know about, What is Attribute in HTML
In the following given anchor tag
<a href="https://swclass.com" title="SW Class">SW Class</a>
href, title are called attributes.
With the help of jQuery Attribute selector, you can select html controls by their attribute. jQuery allows you to select html controls regardless of the browser being used.
The CSS specification allows elements to be identified by their attributes.
Attribute values in selector expressions must follow the rules for W3C CSS selectors.

1). Double quotes inside single quotes: $('a[title="SW Class"]')

2). Single quotes inside double quotes: $("a[title='SW Class']")

3). Escaped single quotes inside single quotes: $('a[title=\'nSW Class\']')

4). Escaped double quotes inside double quotes: $("a[title=\"nSW Class\"]")

Syntax:
$('{Selector}["{atrribute}{Special Character if any}={value}"]')

1) Without Attribute Value
Select elements that have the specified attribute, with any value.
Finds all div having id

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <script src="js/jquery.js"></script> </head> <body> <div>no id</div> <div id="hey">with id</div> <div id="there">has an id</div> <div>nope</div> <script> $("div[id]"); </script>  </body> </html>

Rules will be applicable for:
<div id="hey">with id</div>
<div id="there">has an id</div>

2) Without any Special character
Selects elements that have the specified attribute with a value exactly equal to a certain value.

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <script src="js/jquery.js"></script> </head> <body> <input type="radio" name="newsletter" value="Hot Fuzz"/> <input type="radio" name="newsletter" value="Cold Fusion"/> <input type="radio" name="newsletter" value="Evil Plans"/> <script> $("input[value='Hot Fuzz']"); </script> 

Rules will be applicable for:
<input type="radio" name="newsletter" value="Hot Fuzz"/>

3) |
Select elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).
Finds all links with an hreflang attribute that is english.

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <script src="js/jquery.js"></script> </head> <body> <a href="example.html" hreflang="en">Some text</a> <a href="example.html" hreflang="en-UK">Some other text</a> <a href="example.html" hreflang="english">will not be outlined</a> <script> $("a[hreflang|='en']").css("border","3px dotted green"); </script> </body> </html>

Rules will be applicable for:
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>

4) *
Select elements that have the specified attribute with a value containing a given substring.
Finds all inputs that have the name having substring 'man'

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <script src="js/jquery.js"></script> </head> <body> <input name="man-news"/> <input name="milkman"/> <input name="letterman2"/> <input name="newmilk"/> <script> $("input[name*='man']").val("has man in it!"); </script> </body> </html>

Rules will be applicable for:
<input name="man-news"/>
<input name="milkman"/>
<input name="letterman2"/>

5) ~
Select elements that have the specified attribute with a value containing a given word, delimited by spaces. Finds all inputs that have the name with word 'man'
<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <script src="js/jquery.js"></script> </head> <body> <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> </body> </html>

Rules will be applicable for:
<input name="milk man"/>

6) $
Select elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. Finds all inputs that don't have the name ends with 'letter'

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <script src="js/jquery.js"></script> </head> <body> <input name="newsletter"/> <input name="milkman"/> <input name="jobletter"/> <script> $("input[name$='letter']").val("a letter"); </script> </body> </html>

Rules will be applicable for:
<input name="newsletter"/>
<input name="jobletter"/>

7) !
Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.
Finds all inputs that don't have the name 'newsletter'

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <script src="js/jquery.js"></script> </head> <body> <input type="radio" name="newsletter" value="Hot Fuzz"/> <input type="radio" value="Cold Fusion"/> <input type="radio" name="accept" value="Evil Plans"/> <script> $("input[name!='newsletter']"); </script> </body> </html>

Rules will be applicable for:
<input type="radio" value="Cold Fusion"/>
<input type="radio" name="accept" value="Evil Plans"/>

8) ^
Select elements that have the specified attribute with a value beginning exactly with a given string.
Finds all inputs with an attribute name that starts with 'news' and puts text in them.

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <script src="js/jquery.js"></script> </head> <body> <input name="newsletter"/> <input name="milkman"/> <input name="newsboy"/> <script> $("input[name^='news']").val("news here!"); </script> </body> </html>

Rules will be applicable for:
<input name="newsletter"/>
<input name="newsboy"/>

If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.


Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.

 
 

{{c.Content}}

Comment By: {{c.Author}}  On:   {{c.CreatedDate|date:'dd/MM/yyyy'}} / Reply


Categories