quick introduction jquery
DESCRIPTION
HashTrain internal workshopA quick introduction to jQueryTRANSCRIPT
A quick introduction to jQuery
Shalva [email protected]
http://hashtrain.com
HashTrain internal workshop
вторник, 9 ноября 2010 г.
$() vs jQuery()
$() jQuery()
Always use jQuery()
вторник, 9 ноября 2010 г.
The power of chaining// Example 1jQuery("div").removeClass("on").addClass("off").addClass("yellou");
// Example 2jQuery("div").hide("slow", function(){ jQuery(this) .addClass("done") .find("span") .addClass("done") .end() .show("slow", function(){ jQuery(this).removeClass("done"); });});
вторник, 9 ноября 2010 г.
jQuery.noConflict()<html> <head> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); // Use jQuery via jQuery(...) jQuery(document).ready(function(){ jQuery("div").hide(); }); // Use Prototype with $(...), etc. $("someid").hide(); </script> </head> <body></body> </html>
вторник, 9 ноября 2010 г.
Selectors jQuery("p")
jQuery("#some-id")
jQuery(".some-class")
jQuery("#container div.gallery")
jQuery("body > div");
jQuery("body > div: has(a)");
jQuery("a[href$=pdf]");
jQuery("ul li:first")
вторник, 9 ноября 2010 г.
Cache jQuery ObjectsjQuery("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 г.
Creating New ElementsjQuery("<h1>Hello!</h1>").appendTo("body");
jQuery("<a href='http://hashtrain.com'>HashTrain</a>") .insertAfter("div.footer p");
вторник, 9 ноября 2010 г.
.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 г.
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 г.
AjaxjQuery("#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 г.
AJAX// GETjQuery.get("/articles", function(data){
alert("Data Loaded: " + data);});
// POSTjQuery.post("/articles", { parent_id: 7, visible: 1 }, function(data) {
alert("Data Loaded: " + data);});
// GETJSONjQuery.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 г.
My own functionjQuery.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 г.
My own global functionjQuery.globalFunction = function() { alert("Hi!");};
// Alternate syntaxjQuery.extend({ functionOne: function() { alert("Hi!"); }});
// UsagejQuery.globalFunction();
вторник, 9 ноября 2010 г.
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 г.
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 г.