Selecting elements

Open a blank HTML document within your text editor or IDE of choice. Ensure that you have the latest version of jQuery downloaded and is easily accessible for inclusion into this HTML document. When creating new HTML files within this chapter, ensure that they are all within the same directory as the jQuery library file, making it easy to include into the HTML document.

To understand how you can use jQuery to select a variety of DOM elements, perform each of the following recipe steps:

The simplest method of selecting a DOM element is by its ID. We know that all IDs within a HTML document should be unique; therefore, by selecting an element with its ID, you will be selecting a single element.

In reference to the preceding HTML document, if you wanted to select <div>, which has an ID content, you can use the following jQuery code to select it:

$(function(){
   var content = $('#content');
});

This would make the DOM element available within the content variable. More on what this means is covered later in the chapter.

We can also select elements in the same way using their class. The code is very similar to the preceding example, except that we use the class prefix (.) instead of the ID prefix (#), illustrated as follows:

$(function(){
   var span = $('.span-element');
});

Not only can we select elements based on some identifier we specify (that is, class or ID), but we can also select elements based on their tag name. If you wanted to select all the li elements within a page, you would use $('li'), illustrated as follows:

$(function(){
   var listelements = $('li');
   var i = 1;
   listelements.each(function(){
      console.log("Loop: " + i);
      i++;
   });
});

The preceding example uses the jQuery selector to select all the list elements within the page. To demonstrate that listelements now contains multiple elements, we loop through these and output some information to the console.

The console output for the preceding example is as follows:

Loop: 1
Loop: 2
Loop: 3

It is also possible to select elements based on other properties such as their rel or disabled attributes.

The following code shows us how we can select an anchor element that has a rel attribute of nofollow:

$(function(){
   var nofollow = $('a[rel="nofollow"]');
});