3. The power of chaining
// Example 1
jQuery("div").removeClass("on").addClass("off").addClass("yellou");
// Example 2
jQuery("div").hide("slow", function(){
jQuery(this)
.addClass("done")
.find("span")
.addClass("done")
.end()
.show("slow", function(){
jQuery(this).removeClass("done");
});
});
вторник, 9 ноября 2010 г.
6. Cache jQuery Objects
jQuery("div.gallery").bind("click", function(){...});
jQuery("div.gallery").css("background-color", "yellow");
jQuery("div.gallery").fadeIn("fast");
// Instead, first save the object to a local variable
var $gallery = jQuery("div.gallery");
$gallery.bind("click", function(){...});
$gallery.css("background-color", "yellow");
$gallery.fadeIn("fast");
вторник, 9 ноября 2010 г.
8. .live()
jQuery("a.click").bind("click", function() {
alert("Base click!");
});
jQuery("a.live").live("click", function() {
alert("Live click!");
});
// This new element also matches the selector .clickme, but since
it was added after the call to .bind(), clicks on it will do
nothing.
jQuery("body").append("<a href='http://hashtrain.com'
class='click'>HashTrain</a>");
// Then clicks on the new element will also trigger the handler.
jQuery("body").append("<a href='http://hashtrain.com'
class='live'>HashTrain</a>");
вторник, 9 ноября 2010 г.
9. Namespaced Events
// Add handler
jQuery(".class").bind("click.namespace", function(){
// do something
});
// call handler
jQuery(".class").trigger("click.namespace");
// remove all the handlers in a given namespace
jQuery(".class").unbind("click.namespace");
вторник, 9 ноября 2010 г.
10. Ajax
jQuery("#body").load("/boby_content")
// AJAX base function
jQuery.ajax({
type: "POST",
url: "/articles",
data: "page=1&per_page=10",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
вторник, 9 ноября 2010 г.
11. AJAX
// GET
jQuery.get("/articles", function(data){
alert("Data Loaded: " + data);
});
// POST
jQuery.post("/articles", { parent_id: 7, visible: 1 }, function
(data) {
alert("Data Loaded: " + data);
});
// GETJSON
jQuery.getJSON("/articles.js", { page: 1, per_page: 10 }, function
(json) {
alert("JSON Data: " + json);
});
// GETScript - Load JavaScript file and execute it.
jQuery.getScript("/articles.js");
вторник, 9 ноября 2010 г.
12. My own function
jQuery.fn.myFunction = function() {
return jQuery(this).addClass("changed");
}
// Alternate syntax
jQuery.fn.extend({
myFunction: function() {
return jQuery(this).addClass("changed");
}
});
// And now, use it like this:
jQuery(".changePlease").myFunction();
вторник, 9 ноября 2010 г.
13. My own global function
jQuery.globalFunction = function() {
alert("Hi!");
};
// Alternate syntax
jQuery.extend({
functionOne: function() {
alert("Hi!");
}
});
// Usage
jQuery.globalFunction();
вторник, 9 ноября 2010 г.
14. jQuery on Rails
Install
• .script/plugin install git://github.com/aaronchi/jrails.git
Project Site
• code.google.com/p/ennerchi
Web Site
• www.ennerchi.com/projects/jrails
Group Site
• groups.google.com/group/jrails
jRails is a drop-in jQuery replacement for the Rails Prototype/script.aculo.us helpers.
вторник, 9 ноября 2010 г.
15. jQuery docs
• jQuery wiki - http://docs.jquery.com
• jQuery API - http://api.jquery.com
• "Visual jQuery" from Remy Sharp and
Yehuda Katz - http://visualjquery.com
вторник, 9 ноября 2010 г.