Easy jQuery

1. When you add some handler for the event - it does no replace previous handler . So both handlers will run.

In this example, if you click on element with id “example” - you will see both alerts:

$('#example').click(function(){ alert('one'); } );
$('#example').click(function(){ alert('two'); } );

2. Basing on previous fact we can do next conclusion - you can use function

$(document).ready();

as many times as you want in your page.

3. You can create your own events in jQuery. This method allow make your code more simple and readable.

$('button').click(function(){ jQuery.event.trigger('buttonClicked'); });
$('div').bind('buttonClicked',function(){ $(this).hide(); });
$('span').bind('buttonClicked',function(){ $(this).show(); });

4. Annimation effects in iQuery is asynchronous so question “how to excecute one function exactly after another” can appears very often. But all animation core-functions of jQuery receive callback function as a last argument.

$('element-1').fadeOut(3000,function() {
                        $('element-2').fadeIn(1500,function() {
                            alert('done second effect');
                        });
});

5. You can add any attribute to any html-element:

<span myownattr="somevalue" />

and match them using jQuery selectors:

var elements_by_attr = $('[@myownattr]');
var elements_by_attr_with_value = $('[@myownattr="somevalue"]');
var spans_by_attr = $('span[@myownattr]');