Attribute selectors allow you to select elements based on their attributes. Let’s take a look at the
ul part of our page.
<ul class="list-one"> <li> <a href="http://dan.saigon.ro">My website contains:</a> <ul> <li><a href="http://dan.saigon.ro/about/">About Page</a></li> <li><a href="http://dan.saigon.ro/portfolio/">Portfolio Page</a></li> <li><a href="http://dan.saigon.ro/contact/">Contact Page</a></li> <li>And many other pages</li> </ul> </li> <li>I have other websites as well <ul> <li>About chemistry website</li> <li>About Math website</li> </ul> </li> </ul>
http:// at the beginning of the string value for the link’s
href attribute. In CSS , you could select links that have an
href value starting with
http:// with the following selector:
In jQuery we can do it as shown below:
var $linksToWeb = $("a[href^='http://']");
The above code matches all links with an
href value beginning with the
^ character specifies that the match has to be at the beginning of a value (see the similarity with regular expressions in Python and many other programming languages).
Pay attention to the single and double quotes!
Let’s say you want all the links but those pointing to Dan’s website homepage.
$(" a[href!='http://dan.saigon.ro'] ")
The “not equal attribute” selector selects all links but not the one shown in code.
Here you have another examples:
form[method]– This matches any
formelement that has a method attribute.
div[title^='main']– This selects all div elements with a title attribute whose value begins with
a[href$='.jpg']– This selects all links that reference a
$sign means that it has to match at the end.
a[href*='dan.saigon.ro']– This selector matches all
aelements that reference the Dan’s website.
div[class|='main']– This selector will select all the
div-s that have the
class="main"or a class name that starts with
span[moto-brands~="honda"]– This selects
span-s elements that have an attribute like
moto-brands="honda yamaha suzuki".
input[type="text"][required]– This selector retrieves all the
input-s that are
requiredand are of type