jQuery: selectors

Tweet

If you are new to jQuery, you might be quite confused by the terms used to explain the famous library. On the other hand, if you've started to look into jQuery recently, there's one thing that is very important and that you should understand thoroughly: what are and how to use selectors.
When manipulating HTML elements in a web page, we need to be sure to select the correct element. Selectors are what you need. I know that this is the basic: without knowing what selectors are, we wouldn't be able to do almost anything with jQuery. However there are some things you might not know yet about selectors.

Select elements (tag, class and id)

The basic way of selecting HTML elements is using the tag itself:

$("div")

The above code will select all the divs in your document. This is used when we want to select all the elements, regardless of any specific distinction.
Moreover, we can use the class or the id in the same way:

$(".class1")
$("#id1")

We can then combine the first way of selecting with the latter two:

$("div.class1")
$("div#id1")

The first will select the div(s) with class="class1".
The second will select the first div with id="id1".

Attribute selectors

To select elements we can even use its attributes. To do so, we put the attribute in square brackets:

$("[href]")

The above will select all elements with an href attribute. That is quite a powerful thing, isn't it?
Even so, it is possible to apply some sort of filtering to attribute selectors:

$("[href='#']")

will select elements with href attribute value equal to #.
You can then use all kind of operators for that expression:
!=foo means NOT equal to foo
$=foo means an attribute value that ends with foo

Even more selectors!

Now, what we've just saw is only the beginning. Believe me, selectors are the probably most important thing in jQuery, so please take a close look to all possible selectors.
Starting from the easiest:
$("*") - All elements
$(".class1.class2") - Elements with class="class1" and elements with class="class2"
$("div:first") - The first div elements. We can use last, even and odd the same way. Please notice the even and odd selections. Very powerful!
Interesting are these other selectors: :eq(index), :gt(no), :lt(no), :not(selector).
$("ul li:eq(3)") will select the fourth (the index starts with 0) element in a list.
$("ul li:gt(3)") will select elements with index greater than 3.
$("ul li:lt(3)") will select elements with index less than 3.
$("div:not(:empty)") will select divs that are not empty.

Other selectors focus on elements state:
:contains(text)
:empty
:hidden
:visible
or characteristics:
:header
:animated

For forms elements, we can use specific selectors:
:input
:text
:password
:radio
:checkbox
:submit
:reset
:button
:enabled
:disabled
:selected
:checked
:image
:file

Wow, that was long! I think we have a quite wide selection! And remember that we can combine them to serve our needs.
Now that we have our list of selectors, try to use them creating dummy pages and playing around with them. Again, if you are new to jQuery, you will start to see its power... and eventually you won't stop using it.