jQuery Overview
Jakob Jenkov |
When you use JQuery, you typically follow these steps of action:
- Wait for the page to be ready.
- Select some HTML elements to modify.
- Traverse the selected HTML elements.
- Modify the HTML element attributes, CSS styles etc.
- 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.
| Tweet | |
Jakob Jenkov | |
