Learn jQuery-2 : Selectors

Posted: December 7, 2010 in jQuery
Tags:

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.

Example Code:

<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.

Selectors

*

This may be a familiar selector for you CSS coders. This selects all the elements
div

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
div a

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.
div>a

This will select all the direct children of div that are <a> tag.
div~a

This will select all siblings of the <a> nestled inside a <div> tag
div:has(a)

A beautiful selector. It will select all <div> that have an <a> nestled inside it.
div.text

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>.
div#text

Nearly the same as the previous selector but here you are selecting an id insted of a class
div[class]

Here we select all <div> tags with a attribute of class. The name of the class doensn’t mater.
input[type=text]

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.
a[href^=http://]

This selects all the <a> tags that have a href attribute that begins with http://. The upwards (^) means, “begins with”
a[href$=.pdf]

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

:first

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.
:last

Selects the last element. a:last will select the last <a> tag on the page
:first-child

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>
:last-child

Same as :first-child but returns the last child
: only-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’
:even

It will select all even elements. So if you have a unordered list (ul) it will select the 2nd, 4th, 6th and so on
: odd

This will select the 1st, 3rd and so on

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s