Using jQuery selectors and methods

One of the things that make jQuery so easy to use is that you can use CSS style selectors to look for elements in your page. So rather than having to learn more JavaScript methods, you just use what you already know. In real code, this means instead of using the following:

var content = document.getElementById("content");

You can use:

var content = $('#content');

$ () is a shorthand notation for jQuery(). If you use jQuery together with a similar library, such as Dojo, check the documentation on how to keep the two apart.

The above statement will create a jQuery object, which will contain zero or one DOM elements (because there can only be one element with the id content). The next statement can potentially contain a lot more elements, as many as there are with the class green:

var greens = $('.green');

As you can tell, this is the same as in CSS, # for an id, . for a class.

Now we can start using methods. What if we wanted to change all elements of the class...