0
A quick introduction to jQuery
Shalva Usubov
shaliko@ezid.ru
http://hashtrain.com
HashTrain internal workshop
вторник, 9 н...
$() 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...
jQuery.noConflict()
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.no...
Selectors
jQuery("p")
jQuery("#some-id")
jQuery(".some-class")
jQuery("#container div.gallery")
jQuery("body > div");
jQue...
Cache jQuery Objects
jQuery("div.gallery").bind("click", function(){...});
jQuery("div.gallery").css("background-color", "...
Creating New Elements
jQuery("<h1>Hello!</h1>").appendTo("body");
jQuery("<a href='http://hashtrain.com'>HashTrain</a>")
....
.live()
jQuery("a.click").bind("click", function() {
alert("Base click!");
});
jQuery("a.live").live("click", function() {...
Namespaced Events
// Add handler
jQuery(".class").bind("click.namespace", function(){
// do something
});
// call handler
...
Ajax
jQuery("#body").load("/boby_content")
// AJAX base function
jQuery.ajax({
type: "POST",
url: "/articles",
data: "page...
AJAX
// GET
jQuery.get("/articles", function(data){
alert("Data Loaded: " + data);
});
// POST
jQuery.post("/articles", { ...
My own function
jQuery.fn.myFunction = function() {
return jQuery(this).addClass("changed");
}
// Alternate syntax
jQuery....
My own global function
jQuery.globalFunction = function() {
alert("Hi!");
};
// Alternate syntax
jQuery.extend({
functionO...
jQuery on Rails
Install
• .script/plugin install git://github.com/aaronchi/jrails.git
Project Site
• code.google.com/p/enn...
jQuery docs
• jQuery wiki - http://docs.jquery.com
• jQuery API - http://api.jquery.com
• "Visual jQuery" from Remy Sharp ...
Upcoming SlideShare
Loading in...5
×

Quick introduction jQuery

3,727

Published on

HashTrain internal workshop

A quick introduction to jQuery

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,727
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Quick introduction jQuery"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×