With this post I want to start a new cycle of lessons dedicated to jQuery after a lot of requests I received in the past weeks from many readers about this topic. In particular this article is an introduction to jQuery Selectors and illustrates how to start using them with simple practical examples. In the next articles I’m going to add more detailed information and tutorials in order to cover every aspect about Selectors and their usage. For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.

Introduction to Selectors

jQuery selectors allow you to get quickly one or more elements in the Document Object Model. Selectors are classified in Basic, Hierarchy, Basic Filters, Content Filters, Visibility Filters, Attribute Filters, Child Filters, Form, Form Filters. In the following paragraph we’re going to see how to use some Basic Selectors, Attribute Filters, Basic Filters and Content Filters.

Basic Selectors

Basic Selectors are the most simple way to get a single element or group of elements with jQuery. You can get a single element with a specific #id and set the html content with “Hello World!” in this way:

The following code allows you to get all elements contained into the element with ID #section and sets, for each matched element, the CSS background property to the value #D1D1D1.

You can do the same thing using a CSS class selector. Here is the code that gets all elements with the attribute class with the value mylist and sets the CSS background property to #D1D1D:

Here is a very simple example of code that gets on click event the element with ID #my-paragraph, sets the html content to “Hello World” and color property to #444:

Attribute Filters

Attribute filters allow you to get elements with a specific attributes. The syntax is simple: $("element[attribute]"). The following code get all

elements that have the attribute #ID specified and sets on click event the html content to “Paragraph with ID attribute!”.

This code finds instead all element that have the attribute class not with the value “intro”.

Another useful is access to: Finds all inputs with a href attribute that contains a part of text (in this example the URL of my blog ‘woorkup.com’) and sets the value of the attribute class to .mysite.

Basic Filters

Basic filter are useful to access one or more elements with several criteria, for example the first or last element of a DOM element, odd or even elements, a single element by its index and so on.

:first and :last – :first and :last allow you to get to the first and last element of a specific DOM element. For example you can get easily the first an last element of a

list with a specific ID in this way. This is the html code for the list:
• Item A
• Item B
• Item C
• Item D

Here is a simple code that gets the first item of the list with id #t-myul-1 and sets the CSS color property with the value #0033CC. Then the code gets the last list item and sets the attribute class to last:

$("#t-myul-1 li:first").css("color", "#0033CC");
$("#t-myul-1 li:last").addClass("last");


And this is the CSS class .last:

.last{
background:#0033CC;
color:#FFF;
}

Here is the result (See the demo):


Practical application. Simple Vertical Scroller – :first and :last are very useful to implement a simple vertical or horizontal scroller. The following example describes you how to develop a simple vertical scroller in one minute using an

list and just some lines of JavaScript code. This picture illustrates how the scroller works:



Here is the html code for the list:

• Item 1
• Item 2
• Item 3
• Item 4

Scroll up


This is the result in a web browser:



The element Scroll up allows you to scroll up the list on click event. Here is the JavaScript code for jQuery to scroll up the list:

$(document).ready(function() {
$("span[name='scroll']").click(function scroll_up(){
first = $("#t-myul-2 li:first");
last = $("#t-myul-2 li:last");
first.clone(true).insertAfter(last);
first.remove();
});
});


The previous code can be easily reused and customized with a little effort to implement advanced vertical or horizontal scrollers with more complex effects and animations. See the demo.

:even and :odd – :even and :odd get even and odd elements. A typical situation in which these filters are useful is when you want to highlight with different colors even and odd items of a list. Image to have the following list with #id t-myul-3:

• Item A
• Item B
• Item C
• Item D

Define two CSS classes .even and .odd to highlight even and odd elements in your list:

.even{background:#EFEFEF;}
.odd{background:#FFF;}


Here is the JavaScript code for jQuery to highlight with different colors even and odd list items:

$(document).ready(function() {
$("#t-myul-3 li:odd").addClass("odd");
$("#t-myul-3 li:even").addClass("even");
});


The first line of the previous code $("#t-myul-3 li:odd").addClass("odd") gets all odd list items within the element with id #t-myul-3 (in this example an unordered list) and add to each given element the CSS class .odd. And here is the result (See the demo):



Content Filters

Content Filters allow you to get elements by their content. This example illustrates how to highlight one or more list item containing a specific text (in this case “Woork Up”). This is the

list with ID #t-myul-4:
• Mashable
• Smashing Magazine
• Woork Up
• Noupe

This is the CSS code I used to define the class .highlight:

.highlight {
background:#FFC;
}

And here is the Javascript code for jQuery:

$(document).ready(function() {
$("#t-myul-4 li:contains('Woork Up')").addClass("highlight");
});

Here is the result:


You can also use :contain combined with :even and :odd in this way:

$(document).ready(function() {
$("#t-myul-4 li:even").addClass("even");
$("#t-myul-4 li:odd").addClass("odd");
$("#t-myul-4 li:contains('Woork Up')").addClass("highlight");
});

And here is the final result (See the demo):



Conclusions

In this post we’ve started learning how to use some jQuery Selectors that allow you to move first steps with jQuery. In the next articles I’m going to cover every aspect about Selectors and their usage. For a list of all available Selectors take a look at the official jQuery Documentation. If you are a developer I suggest you to download my jQuery 1.3 Visual Cheat Sheet. Comments and suggestions are appreciated.