Quick introduction jQuery
•
2 j'aime•1,550 vues
HashTrain internal workshop A quick introduction to jQuery
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (19)
Similaire à Quick introduction jQuery
Similaire à Quick introduction jQuery (20)
Quick introduction jQuery
- 1. A quick introduction to jQuery Shalva Usubov shaliko@ezid.ru http://hashtrain.com HashTrain internal workshop вторник, 9 ноября 2010 г.
- 2. $() vs jQuery() $() jQuery() Always use jQuery() вторник, 9 ноября 2010 г.
- 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 г.
- 4. 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 г.
- 5. 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 г.
- 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 г.
- 7. Creating New Elements jQuery("<h1>Hello!</h1>").appendTo("body"); jQuery("<a href='http://hashtrain.com'>HashTrain</a>") .insertAfter("div.footer p"); вторник, 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 г.