• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

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.

Like this presentation? Why not share!

Quick introduction jQuery

on

  • 4,014 views

HashTrain internal workshop

HashTrain internal workshop

A quick introduction to jQuery

Statistics

Views

Total Views
4,014
Views on SlideShare
4,012
Embed Views
2

Actions

Likes
2
Downloads
40
Comments
0

2 Embeds 2

http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Quick introduction jQuery Quick introduction jQuery Presentation Transcript

    • HashTrain internal workshop A quick introduction to jQuery Shalva Usubov shaliko@ezid.ru http://hashtrain.com вторник, 9 ноября 2010 г.
    • $() vs jQuery() $() jQuery() Always use jQuery() вторник, 9 ноября 2010 г.
    • 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 г.
    • 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 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 г.
    • Creating New Elements jQuery("<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 г.
    • 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 г.
    • 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 г.
    • 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 г.
    • My own global function jQuery.globalFunction = function() { alert("Hi!"); }; // Alternate syntax jQuery.extend({ functionOne: function() { alert("Hi!"); } }); // Usage jQuery.globalFunction(); вторник, 9 ноября 2010 г.
    • 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 г.
    • 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 г.