jQuery Overview

When you use JQuery, you typically follow these steps of action:

1. Wait for the page to be ready.
2. Select some HTML elements to modify.
3. Traverse the selected HTML elements.
4. Modify the HTML element attributes, CSS styles etc.
5. Add listener functions, e.g. click() or wait for a JQuery effect to finish etc.

This tutorial will get into more detail about each of the above in separate texts, but let me just show you an example, right here:

// 1. Wait for the page to be ready.
$(document).ready(function() {


    // 2. select the HTML element with id 'theDiv'
    var theDiv = $('#theDiv');

    // 3. since only 1 element was selected, no traversal is necessary

    // 4. modify the HTML elements CSS attributes
    theDiv.css("border", "1px solid black");

    // 5. add a click-listener function to it.
    theDiv.click(function() {
        $('#theDiv').show(300);
        });

}

First the example calls JQuery's $(document).ready() function, passing a function as parameter. The function passed as parameter is executed when the page is ready.

Second, the example selects the HTML element with the id "theDiv". It does so by calling JQuery's selection function, the $() function, passing a selection string as parameter. Selection strings are covered in more detail in a later text.

Third, the example modifies the CSS attribute "border" of the HTML element. This is done by calling the css() function on the selected HTML element. Modifying the CSS styles is also covered in a later text.

Fourth, the example adds a click listener function to the HTML element. It does so by calling the click() function on the selected element. When the HTML element is clicked, this function is executed. Event listeners are also covered in a later text.

That is all there is to it, in the simple cases. Throughout the rest of this tutorial you will see how to meet the needs of somewhat more advanced cases.