Delphinidin

JavaScript has native functions that can select elements by ID and tag. The downside of these functions is that you have to use a diff erent function for each of the three types of elements. Also, this creates repetition and code bloat, which can become a nightmare to manage. When you use selectors in jQuery, one selector can handle multiple types of elements. This makes writing clean and manageable code much easier.

All examples in this book show the browser output as well as the Firebug output so you can see what is being added or changed to the DOM. When you view the page source, you don't see the rendered source. The rendered source is the actual code that is created after the browser loads and the JavaScript has fired, which, as you are manipulating the DOM, can change quite noticeably. Firebug shows the rendered source, and can even show you the source as it changes, so it's the perfect way to test your JavaScript and jQuery.
The following list outlines the most common jQuery CSS selectors, which I explain in more depth with code and browser throughout in this chapter:

+ $('*')
+ $('p')
+ $('.class')
+ $('#id')
+ $('.parent ul li')

In this chapter, I apply CSS to the elements using the jQuery .css() method. The CSS method in jQuery works by allowing you to pass any CSS properties to the CSS method that are then applied to the element matched by the selector. The CSS is added to the element, as an inline style after the DOM is loaded and ready. In each example, you are not limited to the CSS I am applying. I'm just showing individual examples of problems you may encounter yourself and how to quickly solve them using selectors.

- Selecting Elements by Using the Wildcard (*) Selector
If you would like to select all the elements in your DOM or within other elements, use the wildcard (*) selector. The wildcard is wrapped in quotes between the parentheses directly after the alias.

- Selecting Elements by Using the HTML Tag
After you understand how the wildcard selector works, you can see that the other CSS selectors work the same way. You can select any element within the DOM using the element selector — you need to pass a tag name to the selector, which is present in the page. This selector uses the native JavaScript method getElementsByTagName().

The native JavaScript function getElementsByTagName() retrieves all elements by their tag name. The code is set up like this:

document.getElementsByTagName('h1');

- Selecting Elements by Using the ID Selector
You can select any ID within the page using the ID ('#') selector. The ID selector uses the native JavaScript method getElementById(). To select a class using the native JavaScript function getElementById(), the code is set up in the following manner:

document.getElementById('sidebar');

The ID selector always includes the # (hash) symbol when referencing the ID in the selector. Without that symbol, the selector won't work correctly. The ID selector returns only the one ID that it matches. Remember that with CSS no two elements on a page should share the same ID.

- Selecting Elements by Class
Similar to selecting by ID, you can also select elements in your page by class (.class). This selector uses the native JavaScript method getElementsByClassName(). The class selector selects all elements of the given class in the DOM. If you want to select a class using the native JavaScript method getElementsByClassName(), the code is set up as follows:

document.getElementsByClassName('product-image');

By using jQuery, I can achieve the same result as the getElementsByClassName() method, but with much less code.

- Selecting One or Many Elements with Multiple Classes
In some cases, you may have applied multiple classes to the same element and you may want to select only elements with those classes applied. The class selector accepts multiple classes.

Read More:
How to Selecting Page Elements by Using CSS Selectors with jQuery - Part 2