16. Animations
⊠$(â#menuâ).slideDown(âslowâ);
⊠Individual properties:
$(âdivâ).animate({
fontWeight: â2emâ,
width: â+=20%â,
color: âgreenâ // via plugin
});
⊠Callbacks:
$(âdivâ).hide(500, function(){
// $(this) is an individual <div> element
$(this).show(500);
});
17. Ajax
⊠$(â#bodyâ).load(âsample.html div > h1â);
⊠Before:
<div id=âbodyâ></div>
⊠After:
<div id=âbodyâ>
<h1>Hello, world!</h1>
</div>
⊠$.getJSON(âtest.jsonâ, function(js){
for ( var name in js )
$(âulâ).append(â<li>â + name + â</li>â);
});
18. Chaining
⊠You can have multiple actions against a single set
of elements
⊠$(âdivâ).hide();
⊠$(âdivâ).hide().css(âcolorâ,âblueâ);
⊠$(âdivâ).hide().css(âcolorâ,âblueâ).slideDown();
19. Chaining (cont.)
⊠$(âul.openâ) // [ ul, ul, ul ]
.children(âliâ) // [ li, li, li ]
.addClass(âopenâ) // [ li, li, li]
.end() // [ ul, ul, ul ]
.ïŹnd(âaâ) // [ a, a, a ]
.click(function(){
$(this).next().toggle();
return false;
}) // [ a, a, a ]
.end(); // [ ul, ul, ul ]
20. Why jQuery?
⊠Fully documented
⊠Great community
⊠Tons of plugins
⊠Small size (14kb)
⊠Everything works in IE 6+, Firefox,
Safari 2+, and Opera 9+
21. jQuery Plugins
⊠Extend the jQuery system
⊠Add on extra methods:
$(âdivâ).hideRemove();
⊠Trivial to implement:
jQuery.fn.hideRemove = function(speed){
return this.hide(speed, function(){
jQuery(this).remove();
});
};
22. Plugins
⊠Drag and Drop
⊠Sortables
⊠Modal Dialogs
⊠Tabbed Navigation
⊠Sortable Tables
⊠And hundreds more...