Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cooking with jQuery

6,829 views

Published on

Slides from the Cooking with jQuery Tutorial Session at OSCON 2010

Published in: Technology

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

×