jQuery Selectors tutorial

→ Are you a new visitor? Please visit the page guidance for new visitors ←

jQuery selectors

As I promised, I will write a series of jquery tutorials starting from beginner to advanced, so the first episode of these series will be about jquery selectors.

What are jquery selectors ?

jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow users to select and identify any set of page elements to operate on the client side.

What for?

Selectors, as their name indicate, are used to select elements from the DOM in order to allow access to modify information on client side. This thing is called “DOM traversing”.

What is DOM?

From Wikipedia, the Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. In other words, the DOM is constructed with elements that you know like divs, tables, lists and other stuff related.

DOM traversing

Select a html elements based on their relation to other elements from the same page. Start with one selection and move through their children or parents until you reach the elements that you desire. For dom traversing, you have to be familiar with words like “parent”, “child” or “sibling”. Let’s see an example:

dom traversing

DOM traversing

The above example explains the relationship between html elements inside the DOM. In the top tier we have the “body” element which is a parent for all the elements inside them (called children). The divs inside the body element, and the ul are called siblings.

Jquery selectors in examples

Basically if you know css selectors or pseudo classes (by the way, you can see a good tutorial about pseudo-classes here ), you can use them in conjunction with jquery. Simple as that! Let’s see some example though.

Hint You can use either single quotes or double quotes in jquery selectors. 

$(“*”): This selector selects all elements in the document. The result on the above picture will be an object containing the body, the two divs and the ul.

$(“#something”): This selector selector gets the element with id=”something”. If our first div would have id=”something” attribute, and we will call from jquery the following method: $(“#something”); the object that will result will contain only the specified div.

$(“.something”): This selector gets all the elements that have the class of “something”. Works like the above example but it selects the element if it has the class of “something” not the id.

$(“:empty”): Selects all elements that have no children at all. In our case, one of the two divs. You can use this in conjunction with this: $(“div:empty”), which selects all the divs that have no children. In this case, both divs will be selected.

$(“li > ul”): Selects all elements matched by <ul> that are children of an element matched by <li>

$(“#body p”): Selects all elements matched by <p> that are descendants of an element that has an id of body.

$(“code, em, strong”): Selects all elements matched by <code> or <em> or <strong>.

$(“li:last”): Selects the last <li> element.
$(“li:visible”): Selects all elements matched by <li> that are visible.
$(“li:hidden”): Selects all elements matched by <li> that are hidden.
$(“:radio”): Selects all radio buttons in the form.
$(“:checked”): Selects all checked boxex in the form.
$(“:input”): Selects only form elements (input, select, textarea, button).
$(“:text”): Selects only text elements (input[type=text]).

I am sure that you got the ideea behind this already, but I will show to you some less known selectors that can be used for DOM traversal. Here they are:

$(“strong + em”): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
$(“p ~ ul”): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
$(“p[.myclass]“): Selects all elements matched by <p> that contain an element with a class of myclass.
$(“a[@rel]“): Selects all elements matched by <a> that have a rel attribute.
$(“input[@name=myname]“): Selects all elements matched by <input> that have a name value exactly equal to myname.
$(“input[@name^=myname]“): Selects all elements matched by <input> that have a name value beginning with myname.
$(“a[@href*=domain.com]“): Selects all elements matched by <a> that have an href value containing domain.com.
$(“li:eq(2)”): Selects the third <li> element. Why the third ? Because in programming, you start counting from zero :)
$(“li:lt(2)”): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
$(“li:gt(1)”): Selects all elements matched by <li> after the second one.
$(“div//code”): Selects all elements matched by <code>that are descendants of an element matched by <div>.

Summary

Jquery is using css selectors for DOM traversal. In this article I covered some of them, they are many of them. The only thing that remains for you, is to create a html structure and start testing these thing out. You will learn faster that way.

I will see you the next time when I will be presenting “jQuery  – DOM attributes“.

Request an article ←