Cooking with jQuery

6,132
-1

Published on

Slides from the Cooking with jQuery Tutorial Session at OSCON 2010

Published in: Technology
2 Comments
16 Likes
Statistics
Notes
  • very nicely arranged and presented thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great Overview of all essential parts of jQuery
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,132
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
333
Comments
2
Likes
16
Embeds 0
No embeds

No notes for slide

Cooking with jQuery

  1. 1. THE jOUERY COMPANY http://appendto.com Copyright © 2010 appendTo, LLC.
  2. 2. OSCON jQuery Training Introduction to jQuery Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  3. 3. OSCON jQuery Training Introduction to jQuery ‣ The jQuery Project ‣ Including jQuery ‣ The jQuery Object ‣ Introduction to JavaScript ‣ Lifecycle of a Page Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  4. 4. OSCON jQuery Training The jQuery Project Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  5. 5. OSCON jQuery Training jQuery Project - jquery.org (Software Freedom Conservancy) jQuery Core jQuery UI jquery.com jqueryUI.com Sizzle JS QUnit sizzlejs.com qunitjs.com Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  6. 6. OSCON jQuery Training ‣ jquery.com Downloading ‣ api.jquery.com Documentation ‣ forum.jquery.com Community ‣ meetups.jquery.com Local Community ‣ plugins.jquery.com Extending ‣ jqueryui.com Project Supported UI Library Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  7. 7. OSCON jQuery Training Including jQuery Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  8. 8. OSCON jQuery Training Locations ‣ http://code.jquery.com/jquery-1.4.2.min.js ‣ SSL vs. Non SSL? ‣ src=“//code.jquery.com/jquery-1.4.2.min.js” Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  9. 9. OSCON jQuery Training Source Minified Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  10. 10. OSCON jQuery Training The jQuery Object function jQuery(selector) { ... } // Select an element with jQuery jQuery(‘body’); // Use the $ for brevity var $ = jQuery; $(‘body’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  11. 11. OSCON jQuery Training Introduction to JavaScript Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  12. 12. OSCON jQuery Training Introduction to JavaScript ‣ Script blocks ‣ Quotes and Whitespace ‣ Variables ‣ Functions ‣ Object-Hash ‣ Objects Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  13. 13. OSCON jQuery Training Script Blocks ‣ Scripts can be included inline ‣ <script type=”text/javascript”> // Your script here </script> ‣ Or externally ‣ <script src=”url-to-script.js” type=”text/javascript”></script> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  14. 14. OSCON jQuery Training Quotes & Whitespace // Single Quotes var name = ‘John’; // Double Quotes var name = “John”; // Whitespace var name = ‘John’; // Terminate statements with a semi colon; // Will work, but bad practice! var name = ‘John’ Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  15. 15. OSCON jQuery Training Variables ‣ Variable names may include a-zA-Z0-9_$ as valid characters ‣ Variable scope is applied through the use of the var keyword ‣ Variables have type: ‣ object, number, string, boolean ‣ array(object), function(object) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  16. 16. OSCON jQuery Training Variables // String var name = ‘John’; // Integer(number) var age = 30; // Array var children = [‘Jane’, ‘Jimmy’]; // Boolean var isMarried = true; Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  17. 17. OSCON jQuery Training Functions function alertName() { alert(‘Hello John’); } // Accept arguments function alertName(name) { alert(‘Hello ‘ + name); } // Call the function alertName(‘John’); //Hello John Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  18. 18. OSCON jQuery Training Functions // Function assignment var alertName = function(name) { alert(‘Hello ‘ + name); } // Call the function alertName(‘John’); //Hello John Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  19. 19. OSCON jQuery Training Variable Scope var name = ‘John’; function myFunction() { alert(‘Name is: ‘ + name); } ... myFunction(); //Name is John Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  20. 20. OSCON jQuery Training Variable Scope var name = ‘John’; function myFunction() { var name = ‘Jim’; alert(‘Name is: ‘ + name); } Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  21. 21. OSCON jQuery Training Object-hash (Object Literal) // Empty object var person = {}; // Object-hash may contain key/values var person = { name: ‘John’, age: 30, children: [‘Jane’, ‘Jimmy’], isMarried: true }; Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  22. 22. OSCON jQuery Training Object var person = { name: ‘John’, age: 30, introduceYourself: function() { alert(this.name + ‘ is ‘ + this.age); } }; person.introduceYourself(); //John is 30 Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  23. 23. OSCON jQuery Training Lifecycle of a Page Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  24. 24. OSCON jQuery Training Lifecycle of a Page ‣ Initial HTTP Request ‣ Load Scripts, Stylesheets and Images ‣ Scripts block! ‣ Head first style, scripts later Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  25. 25. OSCON jQuery Training Page Load <!doctype html> <html><head> <link href=”style.css” rel=”stylesheet” /> <script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> $(‘p’).css(‘color’, ‘red’); //magic </script> </head> <body> <p>Hello world!</p> </body></html> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  26. 26. OSCON jQuery Training DOM Ready // Callback function function domIsReady() { $(‘body’).append(‘Hello world’); //magic } $(document).ready(domIsReady); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  27. 27. OSCON jQuery Training Page Load <!doctype html> <html><head> <link href=”style.css” rel=”stylesheet” /> <script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> function domIsReady() { $(‘p’).css(‘color’, ‘red’); //magic } $(document).ready(domIsReady); </script> </head> <body> <p>Hello world!</p> </body></html> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  28. 28. OSCON jQuery Training Page Load <!doctype html> <html><head> <link href=”style.css” rel=”stylesheet” /> </head><body> <p>Hello world!</p> <script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> $(‘p’).css(‘color’, ‘red’); //magic </script> </body> </html> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  29. 29. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  30. 30. OSCON jQuery Training jQuery and Selectors Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  31. 31. OSCON jQuery Training jQuery and Selectors ‣ Selectors ‣ Compound Selectors ‣ Selecting by the API ‣ The Context Argument Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  32. 32. OSCON jQuery Training Selectors // Select By ID <div id=”foo”></div> <div></div> $(‘#foo’); <div id=”foo”></div> <div></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  33. 33. OSCON jQuery Training Selectors // Select by class <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> $(‘.myClass’) <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  34. 34. OSCON jQuery Training Selectors // Select by tag <ul> <li>Apple</li> <li>Pear</li> </ul> $(“li”); <ul> <li>Apple</li> <li>Pear</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  35. 35. OSCON jQuery Training Compound Selectors <p class=”important”></p> <p></p> <p class=”warning”></p> <p class=”important warning”></p> $(‘p.important,p.warning’); <p class=”important”></p> <p></p> <p class=”warning”></p> <p class=”important warning”></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  36. 36. OSCON jQuery Training Compound Selectors ‣ As of 1.4+ elements are always returned in document order Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  37. 37. OSCON jQuery Training Select By Relationship Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  38. 38. OSCON jQuery Training Select By Relationship // Children by method <ul> <li>Fork</li> <li>Spoon</li> </ul> $(“ul”).children(); <ul> <li>Fork</li> <li>Spoon</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  39. 39. OSCON jQuery Training Select By Relationship // Children by selector <ul> <li>Fork</li> <li>Spoon</li> </ul> $(“ul > li”); <ul> <li>Fork</li> <li>Spoon</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  40. 40. OSCON jQuery Training Select By Relationship // Siblings by method <div> <a href=’#’>link</a> <p>Lorem Ipsum</p> </div> <div> <a href=’#’>another link</a> <p>Lorem Ipsum</p> </div> $(‘a’).siblings(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  41. 41. OSCON jQuery Training Select By Relationship // Siblings by method <div> <a href=’#’>link</a> <p>Lorem Ipsum</p> </div> <div> <a href=’#’>another link</a> <p>Lorem Ipsum</p> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  42. 42. OSCON jQuery Training Select By Relationship // Parent by method <div> <a href=’#’>link</a> <p>Lorem Ipsum</p> </div> <div> <a href=’#’>another link</a> <p>Lorem Ipsum</p> </div> $(‘a’).parent(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  43. 43. OSCON jQuery Training Select By Relationship // Parent result <div> <a href=’#’>link</a> <p>Lorem Ipsum</p> </div> <div> <a href=’#’>another link</a> <p>Lorem Ipsum</p> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  44. 44. OSCON jQuery Training Select By Relationship // Descendant by method <ul> <li>Fork <a href=’#’>Click to use</a></li> <li>Spoon <a href=’#’>Click to use</a></li> </ul> $(“ul”).find(‘a’); //selector within find method <ul> <li>Fork <a href=’#’>Click to use</a></li> <li>Spoon <a href=’#’>Click to use</a></li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  45. 45. OSCON jQuery Training Select By Relationship // Descendant by selector <ul> <li>Fork <a href=’#’>Click to use</a></li> <li>Spoon <a href=’#’>Click to use</a></li> </ul> $(“ul a”); <ul> <li>Fork <a href=’#’>Click to use</a></li> <li>Spoon <a href=’#’>Click to use</a></li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  46. 46. OSCON jQuery Training Selector Pitfalls //Over selection $(‘div#myId’); vs. $(‘#myId’); //Under selection $(‘.randomClass’); vs. $(‘div.randomClass’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  47. 47. OSCON jQuery Training The Context //Entire Document $(‘div’) //Scope your selector //$(‘selector’, <context>) $(‘#table’).find(‘selector’) $(‘a’).click(function() { $(‘span’, this)... }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  48. 48. OSCON jQuery Training The Context ‣ Two different scoping methods ‣ $(‘selector’, this) ‣ $(this).find(‘selector’) ‣ Can access context with the context property ‣ 1.3 and later Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  49. 49. OSCON jQuery Training Context Pitfalls var $mySelection = $(‘selector’, ‘#myid’); var $mySelection.context = ? var $mySelection2 = $(‘selector’, $(‘#myid’)[0]); var $mySelection2.context = ? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  50. 50. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  51. 51. OSCON jQuery Training jQuery and Methods Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  52. 52. OSCON jQuery Training jQuery and Methods ‣ Do Something ‣ Showing and Hiding ‣ Iteration ‣ Styling ‣ Behavior Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  53. 53. OSCON jQuery Training Do Something $('p').bind('click',function(){ $(this).effect('drop'); }); // hides element by pulling it left Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  54. 54. OSCON jQuery Training Do Something <p>One</p> <p>Two</p> <p>Three</p> // Find Something $(‘p’) // Do Something $(‘p’).hide(); // Generic Syntax $(‘p’) . <Method Name> ( [PARAMETERS] ); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  55. 55. OSCON jQuery Training Showing and Hiding Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  56. 56. OSCON jQuery Training Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  57. 57. OSCON jQuery Training Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  58. 58. OSCON jQuery Training Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  59. 59. OSCON jQuery Training Iteration Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  60. 60. OSCON jQuery Training Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  61. 61. OSCON jQuery Training Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  62. 62. OSCON jQuery Training Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  63. 63. OSCON jQuery Training Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  64. 64. OSCON jQuery Training Iteration ‣ The anonymous function Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  65. 65. OSCON jQuery Training The Anonymous Function function foo() { ... } Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  66. 66. OSCON jQuery Training The Anonymous Function function foo() { ... } var foo = function() { ... } //do this $(document).click(foo); //dont do this $(document).click(foo()); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  67. 67. OSCON jQuery Training The Anonymous Function function foo() { ... } var foo = function() { ... } $(document).click(foo); $(document).click(function() { ... }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  68. 68. OSCON jQuery Training Iteration // HTML <p>One</p> <p>Two</p> <p>Three</p> // Changes all elements returned // via Implicit Iteration $(‘p’).css(‘color’,‘red’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  69. 69. OSCON jQuery Training “Each”itis AntiPattern // HTML <p>One</p> <p>Two</p> <p>Three</p> // Changes all elements returned // via incredibly inefficient explicit iteration $(‘p’).each(function(i,v){ $(this).css(‘color’,‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  70. 70. OSCON jQuery Training Styling Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  71. 71. OSCON jQuery Training Styling // HTML <p>One</p> <p class=”foo”>Two</p> <p>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  72. 72. OSCON jQuery Training Styling // HTML <p class=”enabled”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  73. 73. OSCON jQuery Training Styling // HTML <p class=”enabled”>One</p> <p class=”enabled”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  74. 74. OSCON jQuery Training Styling // HTML <p class=”enabled foo”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled foo”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  75. 75. OSCON jQuery Training Styling <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).css(‘color’,‘red’); $(‘p’).css(‘font-weight’,‘bold’); $(‘p’).css({ color: ‘red’, fontWeight: ‘bold’ }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  76. 76. OSCON jQuery Training Styling <p style=”color: red;”>One</p> <p style=”color: red;”>Two</p> <p style=”color: red;”>Three</p> $(‘p’).css(‘color’,‘red’); $(‘p’).css(‘font-weight’,‘bold’); $(‘p’).css({ ‘background-color’: ‘blue’, fontWeight: ‘bold’, border: ‘1px solid black’ }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  77. 77. OSCON jQuery Training Behavior Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  78. 78. OSCON jQuery Training Behavior // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  79. 79. OSCON jQuery Training Behavior // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).hover(function(event) { $(this).css(‘color’, ‘red’); }, function(event) { $(this).css(‘color’, ‘’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  80. 80. OSCON jQuery Training Behavior // HTML <p>One</p> <p>Two</p> <p>Three</p> // Add event $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); // Remove event $(‘p’).unbind(‘click’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  81. 81. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  82. 82. OSCON jQuery Training Chaining and Sentences Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  83. 83. OSCON jQuery Training Chaining and Sentences ‣ Method Chaining ‣ The Stack Architecture ‣ Finding vs. Filtering Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  84. 84. OSCON jQuery Training Method Chaining Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  85. 85. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  86. 86. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  87. 87. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  88. 88. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  89. 89. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) //jQuery selector .html(‘Hello world’) .addClass(‘hello’) $(...) .html() .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  90. 90. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) //non breaking .addClass(‘hello’) $(...) .html() .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  91. 91. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) //class will be added $(...) .html() .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  92. 92. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) //jQuery selector .html() .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  93. 93. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) .html() //breaking .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  94. 94. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) .html() .addClass(‘hello’) //runtime error Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  95. 95. OSCON jQuery Training What Breaks the Chain? //put getter last var myHtml = $(...) .addClass(‘hello’) .html(); //store selection in variable //when multiple getters //are needed var $mySelection = $(...); var myHtml = $mySelection.html(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  96. 96. OSCON jQuery Training The Stack Architecture Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  97. 97. OSCON jQuery Training jQuery Collections (Buckets) $(‘body’) [body] .find(‘p’) [p, p, p] => [body] .find(‘a’) [a, a] => [p, p, p] => [body] .addClass(‘foo’) .end() [p, p, p] => [body] .end() [body] Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  98. 98. OSCON jQuery Training Method Chaining $(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  99. 99. OSCON jQuery Training Finding vs. Filtering Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  100. 100. OSCON jQuery Training Finding Elements $(‘body’) [body] .find(‘p’) [p, p, p] => [body] .find(‘a’) [a, a] => [p, p, p] => [body] .addClass(‘foo’) .end() [p, p, p] => [body] .end() [body] Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  101. 101. OSCON jQuery Training Filtering Elements $(‘a’) [a, a.foo, a] .filter(‘.foo’) [a.foo] => [a, a.foo, a] .attr(‘href’, ‘http://appendto.com’) .end() [a, a.foo, a] Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  102. 102. OSCON jQuery Training Find vs. Filter ‣ find() searches the DOM for descendants of elements in the current jQuery wrapped collection ‣ filter() searches the current jQuery collection and returns a reduced set (sub set) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  103. 103. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  104. 104. OSCON jQuery Training jQuery and DOM Manipulation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  105. 105. OSCON jQuery Training jQuery and DOM Manipulation ‣ Creating Elements ‣ Inserting Elements ‣ Removing Elements ‣ Cloning Elements ‣ Wrapping Elements ‣ Attributes ‣ Data Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  106. 106. OSCON jQuery Training Creating Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  107. 107. OSCON jQuery Training Creating Elements $(‘<div></div>’); // Creates ... <div></div> var ul = $(‘<ul><li>Hello</li></ul>’); // Creates ... <ul> <li>Hello</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  108. 108. OSCON jQuery Training Creating Elements // New in 1.4 $("<div/>", { class: "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }); // Clicking toggles the class <div class=”test”>Click me!</div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  109. 109. OSCON jQuery Training Inserting Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  110. 110. OSCON jQuery Training Inserting Elements // Before <p>Apple</p> <p>Orange</p> $(‘p’).after(‘<img src=”logo.png” />’); // After <p>Apple</p> <img src=”logo.png /> <p>Orange</p> <img src=”logo.png /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  111. 111. OSCON jQuery Training Inserting Elements // Before <p>Apple</p> <p>Orange</p> $(‘p’).before(‘<img src=”logo.png” />’); // After <img src=”logo.png” /> <p>Apple</p> <img src=”logo.png” /> <p>Orange</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  112. 112. OSCON jQuery Training Inserting Elements // Before <p id=”apple”>Apple</p> <p id=”orange”>Orange</p> $(‘#apple’).prepend(‘<img src=”apple.png” />’); $(‘#orange’).append(‘<img src=”orange.png” />’); // After <p id=”apple”><img src=”apple.png” />Apple</p> <p id=”orange”>Orange<img src=”orange.png” /></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  113. 113. OSCON jQuery Training // Before <p id=”apple”>Apple</p> <p id=”orange”>Orange</p> $(‘<img src=”apple.png” />’).prependTo(‘#apple’); $(‘<img src=”orange.png” />’).appendTo(‘#orange’); // After <p id=”apple”><img src=”apple.png” />Apple</p> <p id=”orange”>Orange<img src=”orange.png” /></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  114. 114. OSCON jQuery Training Element Creation Best Practice //Use object literal syntax for single (non-nested) element creation //If creating nested elements use a single string //yes $(‘<div><a href=”url”>link text</a></div>’) .appendTo(‘body’); //slower $(‘<a href=”url”>link text</a>’) .appendTo(‘<div>’) .appendTo(‘body’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  115. 115. OSCON jQuery Training Removing Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  116. 116. OSCON jQuery Training Removing Elements // Before <div> <p>Red</p> <p>Green</p> </div> // Removing Elements Directly $(‘p’).remove(); // After <div> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  117. 117. OSCON jQuery Training Empty Elements // Before <div> <p><em>Red</em></p> <p><em>Green</em></p> </div> $(‘p’).empty(); // After <div> <p></p> <p></p> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  118. 118. OSCON jQuery Training Detaching Elements // Before <div id=”container”> <p>Foo Bar</p> </div> var $bucket = $(‘p’).detach(); $bucket.insertAfter(‘#container’); // After <div id=”container> </div> <p>Foo Bar</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  119. 119. OSCON jQuery Training Cloning Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  120. 120. OSCON jQuery Training Cloning Elements // Before <div id=”source”> <strong>The Source</strong> </div> // Copies the element instead of moving it $(‘#source’).clone().appendTo(‘body’); // After <div id=”source”> <strong>The Source</strong> </div> <div id=”source”> <strong>The Source</strong> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  121. 121. OSCON jQuery Training Cloning Elements // Before <div id=”source”> <strong>The Source</strong> </div> // Copies the element instead of moving it $(‘#source’).clone(true).appendTo(‘body’); // After <div id=”source”> <strong>The Source</strong> </div> <div id=”source”> <strong>The Source</strong> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  122. 122. OSCON jQuery Training Modifying Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  123. 123. OSCON jQuery Training Wrapping Elements // Before <p>Hello world</p> <p>Foo bar</p> $(‘p’).wrap(‘<div></div>’); // After <div><p>Hello world</p></div> <div><p>Foo bar</p></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  124. 124. OSCON jQuery Training Wrapping Elements // Before <p>Hello world</p> <p>Foo bar</p> // As a group $(‘p’).wrapAll(‘<div></div>’); // After <div><p>Hello world</p> <p>Foo bar</p></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  125. 125. OSCON jQuery Training Wrapping Elements // Before <p>Hello world</p> <p>Foo bar</p> // Wrapping Children $(‘p’).wrapInner(‘<a href=”#”></a>’); // After <p><a href=”#”>Hello world</a></p> <p><a href=”#”>Foo bar</a></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  126. 126. OSCON jQuery Training Unwrapping Elements (new in 1.4+) // Before <div><p>Hello world</p></div> <div><p>Foo bar</p></div> //Individually $(‘p’).unwrap(); // After <p>Hello world</p> <p>Foo bar</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  127. 127. OSCON jQuery Training Attributes Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  128. 128. OSCON jQuery Training .attr() // Before <img id=”logo” /> $(‘#logo’).attr(‘src’, ‘logo.png’); // After <img id=”logo” src=”logo.png” /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  129. 129. OSCON jQuery Training .attr() // Markup <img id=”logo” title=”Hello world” /> var title = $(‘#logo’).attr(‘title’); //title === “Hello world” Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  130. 130. OSCON jQuery Training .attr() // Before <img id=”logo” /> $(‘#logo’).attr({ src: ‘logo.png’, alt: ‘Company logo’ }); // After <img id=”logo” src=”logo.png” alt=”Company logo” /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  131. 131. OSCON jQuery Training .attr() // Before <img id=”logo” src=”logo.png” alt=”Company logo” /> $(‘#logo’).attr(‘class’, function() { var c = [‘a’, ‘b’, ‘c’]; var r = Math.floor( Math.random() * 3 ); return c[r]; }); // After (randomized class name) <img id=”logo” src=”logo.png” alt=”Company logo” class=”a” /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  132. 132. OSCON jQuery Training Element Contents <div id=”header”> <em>HEADER</em> </div> // Returns ‘<em>HEADER</em> var theHtml = $(‘#header’).html(); $(‘#header’).html(‘<ul><li>One</li></ul>’); <div id=”header”> <ul><li>One</li></ul> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  133. 133. OSCON jQuery Training Element Contents <div id=”header”> <em>HEADER</em> </div> // Returns ‘HEADER’ $(‘#header’).text(); $(‘#header’).text(‘<em>Hello world</em>’); <div id=”header”> &lt;em&gt;Hello world&lt;/em&gt; </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  134. 134. OSCON jQuery Training .val() <input id=”email” type=‘text’ value=‘foo bar’ /> // Returns ‘foo bar’ $(‘#email’).val(); // Sets value to ‘The value’ $(‘#email’).val(‘The value’); <input id=”email” type=‘text’ value=‘The value’ /> $(‘select’).val([ ‘red’, ‘green’ ]); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  135. 135. OSCON jQuery Training Data Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  136. 136. OSCON jQuery Training Data // HTML <div id=”myDiv”> <p>One</p> </div> // Potential for a Memory Leak var elem = $(‘#myDiv’)[0]; elem.foo = new String(‘xyz’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  137. 137. OSCON jQuery Training Data // HTML <div id=”myDiv”> <p>One</p> </div> // Cross Browser Safe Method to attach data $(‘#myDiv’).data(‘foo’, new String(‘xyz’)); var myVar = $(‘#myDiv’).data(‘foo’); $(‘#myDiv’).removeData(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  138. 138. OSCON jQuery Training Data (new in 1.4+) var object1 = { abc: 123 }; var object2 = { xyz: 789 }; $(‘#myDiv’).data(‘object1’, object1); $(‘#myDiv’).data(‘object2’, object2); var objects = $(‘#myDiv’).data(); objects.object1; objects.object2; Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  139. 139. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  140. 140. OSCON jQuery Training jQuery and Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  141. 141. OSCON jQuery Training jQuery and Events ‣ Binding Events ‣ Binding Multiple Events ‣ The Event Object ‣ Event Namespacing ‣ Event Propagation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  142. 142. OSCON jQuery Training Binding Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  143. 143. OSCON jQuery Training jQuery Event Shortcuts // Binding an event $('a.tab').click(function(){ // event handling code $(this).css(‘color’, ‘red’); }); // Binding an event $('a.tab').mouseover(function(){ // event handling code $(this).css(‘color’, ‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  144. 144. OSCON jQuery Training Common Types of Events ‣ click, dblclick, mouseover, mouseout ‣ mouseenter, mouseleave ‣ change, focus, blur ‣ keydown, keyup, keypress ‣ scroll, resize Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  145. 145. OSCON jQuery Training Hover Shortcut // mouseenter, mouseleave $(‘li’).hover( function() { $(this).addClass(‘hover’); }, function() { $(this).removeClass(‘hover’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  146. 146. OSCON jQuery Training Hover Shortcut // mouseenter, mouseleave $(‘li’) .bind(‘mouseenter’, function() { $(this).addClass(‘hover’); }) .bind(‘mouseleave’, function() { $(this).removeClass(‘hover’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  147. 147. OSCON jQuery Training Hover Shortcut // Optimal hover $(‘li’) .hover(function(evt) { var add = evt.type == ‘mouseenter’; $(this).toggleClass(‘hover’, add); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  148. 148. OSCON jQuery Training Hover Shortcut // Optimal hover $(‘li’) .hover(function(evt) { $(this).toggleClass(‘hover’, evt.type == ‘mouseenter’); }); $(‘li’) .bind(‘mouseenter mouseleave’,fn); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  149. 149. OSCON jQuery Training Binding Events with .bind() // Binding an event $('a.tab').bind('click',function(e){ // event handling code $(this).css(‘color’, ‘red’); }); // Unbinding an event $('a.tab').unbind('click'); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  150. 150. OSCON jQuery Training Binding Events // Bind an event to execute once $('a.tab').one('click',function(e){ // event handling code $(this).css(‘color’,‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  151. 151. OSCON jQuery Training Binding Multiple Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  152. 152. OSCON jQuery Training Binding Multiple Events $(‘div’).bind(‘mouseover mouseout’, function(e) { if ( e.type == ‘mouseover’ ) { $(this).addClass('highlight'); } elseif ( e.type == ‘mouseout’ ) { $(this).removeClass('highlight'); } }); $(‘div’).unbind(‘mouseover mouseout’); $(‘div’).unbind(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  153. 153. OSCON jQuery Training Binding Multiple Events $('a.tab').hover( function(e){ $(this).addClass('highlight'); }, function(e){ $(this).removeClass('highlight'); } ); // Unbind the hover event $(‘a.tab’).unbind('mouseenter mouseleave') Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  154. 154. OSCON jQuery Training Binding Multiple Events // Arbitrary number of functions to execute cyclically on click $('a.tab').toggle( function(){ $(this).css('color','red'); }, function(){ $(this).css('color','yellow'); }, function(){ $(this).css('color','green'); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  155. 155. OSCON jQuery Training The Event Object Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  156. 156. OSCON jQuery Training The Event Object ‣ Event Object Properties type pageX timeStamp pageY target data relatedTarget result currentTarget which Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  157. 157. OSCON jQuery Training The Event Object ‣ event.type The name of the event (all lowercase) ‣ event.target The element that the event originated at ‣ event.pageX, event.pageY Coordinates in pixels of mouse position on page (not populated for key events) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  158. 158. OSCON jQuery Training Event Namespacing Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  159. 159. OSCON jQuery Training Event Namespacing ‣ Tagging for event handlers ‣ Added in jQuery 1.2 namespace post - http://bit.ly/aCaFXS ‣ Simplifies unbinding of events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  160. 160. OSCON jQuery Training Binding Namespaced Events $(‘div’) .bind(‘click’, fn) .bind(‘click.foo’, fn) .bind(‘mouseover.foo’, fn); // Unbind click.foo event $(‘div’).unbind(‘click.foo’); // Unbind all .foo namespaced events // click.foo, mouseover.foo $(‘div’).unbind(‘.foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  161. 161. OSCON jQuery Training Event Propagation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  162. 162. OSCON jQuery Training Event Propagation - Anchor Tag <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  163. 163. OSCON jQuery Training Event Propagation - Paragraph Tag <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  164. 164. OSCON jQuery Training Event Propagation - Paragraph Tag <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function(evt) { // evt.target == a alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  165. 165. OSCON jQuery Training Event Propagation - Div Tag <div id=”navigation”><p> <a href=”#”>Link</a> </p></div> $(‘#navigation’).click(function(evt) { // evt.target == anchor tag alert(‘clicked div!’); // this = Reference to div DOM element $(this).addClass(‘active’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  166. 166. OSCON jQuery Training Event Propagation - Stopping Prop. <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); return false; }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  167. 167. OSCON jQuery Training Event Propagation - Stopping Prop. <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function(evt) { alert(‘clicked!’); evt.stopPropagation(); evt.preventDefault(); return false; // Same as two lines above }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  168. 168. OSCON jQuery Training Event Propagation - Returning False Stop events from bubbling Prevent the default event action from occurring Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  169. 169. OSCON jQuery Training Live Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  170. 170. OSCON jQuery Training Live Events - Binding // Before <p>One</p> // Code $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); $(‘<p />’).text(‘Two’).appendTo(‘body’); // After <p>One</p> <p>Two</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  171. 171. OSCON jQuery Training Live Events - Unbinding // Remove with .die() $(‘p’).die(); // .die() also accepts an event type $(‘p’).die(‘click’); // Namespace Example $(‘p’).die(‘click.one’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  172. 172. OSCON jQuery Training Live Events - Namespacing // .live() performs just like .bind() $(‘p’).live(‘click dblclick’, function(e){ if(e.type == ‘click’) { ... } }); // .live() can take namespaced events $(‘p’).live(‘click.one’,function(e) { alert(‘Click.one’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  173. 173. OSCON jQuery Training Live and delegate //1.4+ - live events can be given a context $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); }); //delegate is short hand method for this best //practice pattern $("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  174. 174. OSCON jQuery Training Triggering Events // HTML <p>One</p> // Assign the event $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); // Trigger the event manually $(‘p’).trigger(‘click’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  175. 175. OSCON jQuery Training Triggering Events // HTML <p>One</p> // Assign the event $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); // Some Event types have shortcuts $(‘p’).click(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  176. 176. OSCON jQuery Training Event Parameters Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  177. 177. OSCON jQuery Training Event Data - Event Object // HTML <p>One</p> // Define the custom event var foo = ‘bar’; $(‘p’).bind(‘click’, {msg: foo}, function(evt){ alert(‘Parameter: ’+ evt.data.msg) } ); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  178. 178. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  179. 179. OSCON jQuery Training jQuery and Ajax Lesson 7 Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  180. 180. OSCON jQuery Training jQuery and Ajax ‣ Request Types ‣ Data Formats ‣ Request Callbacks ‣ Making a Request Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  181. 181. OSCON jQuery Training Request Types Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  182. 182. OSCON jQuery Training Request Types Core Method Shortcuts ‣ $.ajax(); ‣ $.get(); ‣ $.post(); ‣ $.getJSON(); ‣ $.getScript(); ‣ $( ... ).load(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  183. 183. OSCON jQuery Training Data Formats Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  184. 184. OSCON jQuery Training Data Formats ‣ xml Returned as DOM ‣ html Returned as String ‣ json Returned as Object ‣ jsonp Returned as Object ‣ text Returned as String ‣ script Evaluated & Returned as String Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  185. 185. OSCON jQuery Training Request Callbacks Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  186. 186. OSCON jQuery Training Request Callbacks ‣ success: function(data, status, XMLHttpRequest) { ... } ‣ error: function(XMLHttpRequest, textStatus, error) { ... } ‣ complete: function(XMLHttpRequest, status) { ... } Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  187. 187. OSCON jQuery Training Making a Request Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  188. 188. OSCON jQuery Training Making a Request $.get(‘page.php’, function(data) { $(data).appendTo(‘body’); }, ‘html’); var data = { fname: ‘Andrew’, lname: ‘Wirick’ }; $.post(‘page.php’, data, function(data) { $(data).appendTo(‘body’); }, ‘html’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  189. 189. OSCON jQuery Training Making a Request JSON // Response {“names”: [“Jonathan”, “Mike”, “Andrew”], “states”: {“NE” : “Nebraska”}, “year” : “2010” } $.getJSON(‘page.php’, function(json) { $(‘body’).append( json.names[0] ); $(‘body’).append( json.states.NE ); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  190. 190. OSCON jQuery Training Making a Request JSON // Response { “names”: [“Jonathan”, “Mike”, “Andrew”] } $.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); }); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  191. 191. OSCON jQuery Training Making a Request XML // Response <movies><movie id=”123”><title>Back to the future</ title></movie></movies> $.get(‘movies.php’, function(xml) { var title = $(xml) .find(‘movie[id=123] > title’) .text(); $(‘body’).append( title ); }, ‘xml’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  192. 192. OSCON jQuery Training Making a Request XML // Response <document><![CDATA[ <h1>Some data</h1> ]]></document> $.get(‘movies.php’, function(root) { var title = $(root) .find(‘document’) .text(); $(‘body’).append( title ); }, ‘xml’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  193. 193. OSCON jQuery Training Cross Domain Requests var url = ‘http://flickr.com...’; $.getJSON(url, function(json) { // Iterate the items and generate HTML }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  194. 194. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  195. 195. OSCON jQuery Training Thank you for coming! http://appendTo.com @appendTo Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  1. A particular slide catching your eye?

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

×