• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Quick introduction jQuery

  • 3,600 views
Uploaded on

HashTrain internal workshop …

HashTrain internal workshop

A quick introduction to jQuery

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,600
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
42
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HashTrain internal workshop A quick introduction to jQuery Shalva Usubov shaliko@ezid.ru http://hashtrain.com вторник, 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 jRails is a drop-in jQuery replacement for the Rails Prototype/script.aculo.us helpers. 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 вторник, 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 г.