JQuery Effects

Using jQuery effects is very easy. Here we describe how to do it.

The basic effects described here do not require any additional files; everything you need is already included for you by web2py_ajax.html.

HTML/XHTML objects can be identified by their type (for example a DIV), their classes, or their id. For example:

1 <div class= "one" id= "a">Hello</div>

2 <div class="two" id="h">World</div>

They belong to class "one" and "two" respectively. They have ids equal to "a" and "b" respectively.

In jQuery you can refer to the former with the following a CSS-like equivalent notations

1 jQuery( '.one') // address object by class "'one"

2 jQuery( '#a') // address object by id "a"

3 jQuery( 'DIV.one') // address by object of type "DIV" with class "'one"

4 jQuery( 'DIV #a') // address by object of type "DIV" with id "a"

and to the latter with

or you can refer to both with

Tag objects are associated to events, such as "onclick". jQuery allows linking these events to effects, for example "slideToggle":

1 <div class= "one" id="a" onclick= "jQuery ('.two').slideToggle()">Hello

2 <div class="two" id= "h">World</div>

Now if you click on "Hello", "World" disappears. If you click again, "World" reappears.

You can also link actions to events outside the tag itself. The previous code can be rewritten as follows:

1 <div class= "one" id= "a">Hello</div>

2 <div class="two" id= "h">World</div>

4 jQuery ( ' . one ') .click( function(){jQuery ( '.two') . slideToggle ()});

Effects return the calling object, so they can be chained.

When the click sets the callback function to be called on click. Similarly for change, keyup, keydown, mouseover, etc.

A common situation is the need to execute some JavaScript code only after the entire document has been loaded. This is usually done by the onload attribute of BODY butjQuery provides an alternative way that does not require editing the layout:

1 <div class= "one" id="a">Hello</div>

2 <div class="two" id="h">World</div>

4 jQuery(document).ready(function(){

5 jQuery ( '. one ') .click( function (){j Query ( '.two') . slideToggle ()});

The body of the unnamed function is executed only when the document is ready, after it has been fully loaded. Here is a list of useful event names:

Was this article helpful?

+1 0

Post a comment