Dmitri's Javascript Quickstart

Here's the basic jQuery statement: $("CSS selector").
The CSS selector is a standard CSS3 selector. For example, you can use classes and IDs, such as .myClass > #MyID, so you could use: $(".myClass > #MyID")

That selects all elements that match the CSS selector. Then you can do stuff to those elements. For example, you could do something like this: $(".myClass > #MyID").hide(); This hides all elements matching the CSS selector. Basically, $("...") selects elements, then you can do actions to them, like $("...").hide();. That's the basic concept.

Another concept is bindings. You can "bind" the click event of an element to do something. For example, you can do
$('.myclass > #MyID').bind("click", function() { Do something here });

Time for a quiz:
I have this HTML: <div class="myDiv">Hi</div> How do I make myDiv hide when myDiv is clicked?
Correct answer: $('.myclass').bind("click", function() { $('.myclass').hide(); });

One more concept - chaining. There are many "action" functions. For example, there is .hide(), .css('Property', 'TheValueOfTheProperty') which assigns the css attribute Property to TheValueOfTheProperty on the elements. You can chain them, like
$('#mydiv').hide().bind('click', function() { $('#mydiv').show().css('color', 'pink'); });

This has two examples of chaining - one .hide().bind(), which hides the element and binds it, and .show().css(), which shows it and sets the CSS. The execution happens from left to right.

 
 

Drupal is a registered trademark of Dries Buytaert.