jQuery: Selectors

[Brandon W]

G'day everyone.

In this tutorial I will be teaching you all the selectors of jQuery. jQuery is a very powerful AJAX/Javascript based framework, that can be downloaded freely (link at the bottom of the tutorial). If you wish to use jQuery, you don't need to have any knowledge of Javascript at all. As long as you have 10 minutes you can learn it :) I am not joking! 10 minutes is all it takes!

This is a fairly basic and straight forward reference, but I am writing this one so you can refer back to this when you stuck on my future tutorials. I hope to start writing many jQuery tutorials, so I am starting from the very basics.

jQuery supports most of the CSS2 and CSS3 selectors, so if you already have a background in CSS, you have already got a head start.

Enough chit chat and let's get started.

Basics
#id
This will match any element with the given ID.

element
This will match any element supplied.

.class
This will match any element with the given class.

*
This will match any element, also known as the wildcard.

Hierarchy
ancestor descendant
This will match any elements descendants of the ancestor given.

parent > child
This will match any elements child of the parent given. (similar to above)

prev + next
This will match any element that is given next to the previous. Both must be given.

prev ~ siblings
This will match any elements siblings after the previous element.

Basic Filters
:first
This will match any first selected element given.

:last
This will match any last selected element given.

:not(selector)
This will filter out any given selector.

:even
This will match any even elements, zero indexed

:odd
This will match any odd elements, zero indexed.

:eq(index)
This will match a single element indexed by the given index.

:gt(index)
This will match all elements with the index above the given one.

:lt(index)
This will match all elements below the given one.

:header
This will match all header elements eg. h1, h2, h3 etc.

:animated
This will match all animated elements.

Content Filters
:contains(text)
This will match all elements with the contained text.

:empty
This will match all elements that have no children. (includes text nodes)

:has(selector)
This will match all elements which contain at least one of the given selector.

:parent
This will match all elements which have children. (includes text)

Visibility Filters
:hidden
This will match all elements that are hidden.

:visibile
This will match all elements that are visibile.

Attribute Filters
[attribute]
This will match all elements with the given attribute.

[attribute=value]
This will match all elements with the given value that equals the given attribute.

[attribute!=value]
This will match all elements that do not have the given value that equals the given attribute.

[attribute^=value]
This will match all elements that either don't have the given attribute or do have the given attribute but not with a certain value.

[attribute$=value]
This will match all elements that have the given attribute and ends with the given value.

[attribute*=value]
This will match all elements that have the given attribute and it contains the given value.

[attributeFilter1][attributeFilter2][attributeFilter3]
This will match all elements that have the given attributes.

Child Filters
:nth-child(index/even/odd/equation)
This will match all elements that are the nth-child of their parents or that their parent's even or odd children.

:first-child
This will match all the elements that are the first child of the given parent.

:last-child
This will match all the elements that are the last child of the given parent.

:only-child
This will match all the elements thare the the only child of the given parent.

Forms
:input
This will match all the input, textarea, select and button elements.

:text
This will match all the input elements of type text.

:password
This will match all the input elements of type password.

:radio
This will match all the input elements of type radio.

:checkbox
This will match all the input elements of type checkbox.

:submit
This will match all the input elements of type submit.

:image
This will match all the input elements of type image.

:reset
This will match all the input elements of type reset.

:button
This will match all the button elements and input elements of type button.

:file
This will match all the input elements of type file.

Form Filters
:enabled
This will match all elements that are enabled.

:disabled
This will match all elements that are disabled.

:checked
This will match all elements thare are checked.

:selected
This will match all elements that are selected.


That is just about every selector jQuery supports. And as mentioned above, if you have a background of CSS, you already have a head start.

Over the next couple of weeks, we will be using a fair bit of these selectors but not all of them. So you don't need to memorize them ;) It's a good idea to save them somewhere or even print them for easier finding :)

I hope my next tutorial will be on adding certain CSS styles to a table row without having to write a class for each and every one of them ;)

+rep if you found this information useful


Regards,
Brandon

jQuery latest;
Downloading jQuery - jQuery JavaScript Library

[Jordan]

Nice tutorial Brandon. I've disabled smilies in your post because they were conflicting with the filter names.

+rep

[Brandon W]

I thought I put them in code tags. Thanks anyway Jordan

[amrosama]

cool tutorial
+rep

[Brandon W]

Thanks amro Glad you liked it.

[mendim.]

Perfect Way to learn jQuery ...
It's a great Tutorial for me !
You Really deserve a +rep Brandon .. !

[Brandon W]

Thanks mendim. If you liked this one, more are coming.

[Egz0N]

nice .. +rep when it lets me too .

[Brandon W]

Thanks Egz. This is mainly a reference, but it will help you if you decide to do jQuery.