Using jQuery with the DOM
First off, before you can use jQuery in your web documents, you must include it some way. The most popular way is to include it directly into the <head> of your document from Google's development servers:
Now that your web document is jQuery-aware, you can start finding elements via CSS selectors and controlling them with jQuery calls. One of the beautiful things about jQuery is that all jQuery methods return the element that you're working with, which means that you can endlessly chain together methods for tighter, cleaner code. Less coding, more doing. Suppose you wanted to hide all the DIVs on your web document at once; to do this with jQuery you'd write this:
The above code selects all the DIVs on your web page and hides them via the "hide" jQuery method. To make all DIVs visible again, you simply replace the "hide" method with the "show" method. Suppose we now want to only hide the DIVs that are derived from a ".dosomething" class, we can do this:
Or if "dosomething" were an ID instead of a class, we would code it like so:
Are you starting to see the power of jQuery? jQuery objects contain a wealth of methods, such as the "fadeIn" and "fadeOut" methods, which makes animation a snap. For example, using the fade methods on a DIV will animate it by sliding it in or out of view. Using jQuery's animation and user interface methods can give your web pages panache that would take too long to code without jQuery by your side.