Selectors are very important and handy things to use. You might know them from CSS. But what jQuery does is take those selectors and tale them to a whole new level. Thre are quite a lot of them so this lesson will only cover frequently used selectors. You can find a full list of all the selectors at http://api.jquery.com
Parent, Child, Sibling ……… huh?
Before we actually take a look at the selectors you first need to know a few things. But if you know what a parent element of a child element is, head to the next section about the selectors. But if you have no clue what i’m talking about or you are still uneasy with those terms, i highly advice you to read this section.
<div> <div> <p><a></a></p> </div> <p> <a></a> <code></code> </p> </div>
This example doens’t contain any text. It only contains tags because that’s the thing we must focus on right now.
An example of a parent element in the example above is the red <div>. That <div> wraps all the content. But you could also say that the green <div> is a parent. Why? Because it is the parent of the blue <p> tag. And the blue <p> tag is also a parent parent because it wraps around the purple <a> tag.
A child is like in normal english a child of its parent. The green <div> is a child of the red <div>. The purple <a> tag is a child of the blue <p> tag. But like in CSS the blue <p> tag is also a child of the red <div>. In normal english you would say that it is a grandson but here we keep it simple by calling it a child. Another good thing to know is what a direct child is. Earlier i said that the blue <p> tag is a child of the red <div> tag. But a direct children are only direct children from the parent. So if the direct child get a ‘baby’, the baby isn’t a direct child of the first parent. Confusing? A little but here’s an example to help you out. If you look at the example about the green <div> and the pink <p> tag are direct children of the red <div> tag because they come directly after the parent. But the blue <p> tag isnt a direct child of the red <div> tag. It is on the other hand a direct child of the green <div>.
And finally you have a sibling. A nrother or sister. The pink <p> tag is a sibling of the green <div> tag. Or the black <a> tag is a sibling of the grey <code> tag.
This all might sound confusing but if is actually exactly the same as a family tree. But if you still don’t understand what this all means, google will give you a helping hand.
This may be a familiar selector for you CSS coders. This selects all the elements
By simply writing the element tag name you can select all the elements that match that tag. So writting p will select all <p> tags
This will select all the children of div that are an <a> tag. Note that this doens’t mean direct children. So it will select all <a> tags even if they are nestled deep into the code but are still wrapped by a <div> tag. That space between the elements if very important otherwise it can mean something totally different.
This will select all the direct children of div that are <a> tag.
This will select all siblings of the <a> nestled inside a <div> tag
A beautiful selector. It will select all <div> that have an <a> nestled inside it.
This will select all <div> tags with a class of text. It is important to not write a blank space otherwise it means select all elements with a class of text that are nestled inside a <div>.
Nearly the same as the previous selector but here you are selecting an id insted of a class
Here we select all <div> tags with a attribute of class. The name of the class doensn’t mater.
This will select all <input> tags with a type of text. Another example is img[alt=lol] which selects all images that have an attribute of alt that contains lol.
This selects all the <a> tags that have a href attribute that begins with http://. The upwards (^) means, “begins with”
Again, the same as the previous selector but the dollar ($) symbol means, “End with”. So this will select all <a> tags that end with .pdf
Returs the first match. So a:first will return the very first <a> tag on the page. Important to note is that :second or :third does not exist.
Selects the last element. a:last will select the last <a> tag on the page
This will return the first child. So if we go back to the previous section and have a look at the code example. If I said div:first-child it will only select the green <div>
Same as :first-child but returns the last child
This will select the element that has no siblings. Lets go back again to the code example. If you wrote div:only-child, what do you think it will return? Well….. it will return the purple <a> tag because it is the only tag that doesn’t have any ‘brothers’ or ‘sisters’
It will select all even elements. So if you have a unordered list (ul) it will select the 2nd, 4th, 6th and so on
This will select the 1st, 3rd and so on