Cooking with jQuery

  • 5,608 views
Uploaded on

Slides from the Cooking with jQuery Tutorial Session at OSCON 2010

Slides from the Cooking with jQuery Tutorial Session at OSCON 2010

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • very nicely arranged and presented thanks
    Are you sure you want to
    Your message goes here
  • Great Overview of all essential parts of jQuery
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,608
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
324
Comments
2
Likes
14

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. THE jOUERY COMPANY http://appendto.com Copyright © 2010 appendTo, LLC.
  • 2. OSCON jQuery Training Introduction to jQuery Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training The jQuery Project Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. OSCON jQuery Training Including jQuery Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training Source Minified Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training Introduction to JavaScript Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. OSCON jQuery Training Lifecycle of a Page Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 30. OSCON jQuery Training jQuery and Selectors Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. OSCON jQuery Training Compound Selectors ‣ As of 1.4+ elements are always returned in document order Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 37. OSCON jQuery Training Select By Relationship Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 51. OSCON jQuery Training jQuery and Methods Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 52. OSCON jQuery Training jQuery and Methods ‣ Do Something ‣ Showing and Hiding ‣ Iteration ‣ Styling ‣ Behavior Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. OSCON jQuery Training Showing and Hiding Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. OSCON jQuery Training Iteration Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. OSCON jQuery Training Iteration ‣ The anonymous function Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 65. OSCON jQuery Training The Anonymous Function function foo() { ... } Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. OSCON jQuery Training Styling Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. OSCON jQuery Training Behavior Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 82. OSCON jQuery Training Chaining and Sentences Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 83. OSCON jQuery Training Chaining and Sentences ‣ Method Chaining ‣ The Stack Architecture ‣ Finding vs. Filtering Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 84. OSCON jQuery Training Method Chaining Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 85. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 86. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 87. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 88. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. 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. OSCON jQuery Training The Stack Architecture Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training Method Chaining $(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 99. OSCON jQuery Training Finding vs. Filtering Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 104. OSCON jQuery Training jQuery and DOM Manipulation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training Creating Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. OSCON jQuery Training Inserting Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. OSCON jQuery Training Removing Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. OSCON jQuery Training Cloning Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. OSCON jQuery Training Modifying Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. OSCON jQuery Training Attributes Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. 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. OSCON jQuery Training Data Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 140. OSCON jQuery Training jQuery and Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training Binding Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. 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. 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. OSCON jQuery Training Binding Multiple Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. OSCON jQuery Training The Event Object Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. OSCON jQuery Training Event Namespacing Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. OSCON jQuery Training Event Propagation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. 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. OSCON jQuery Training Live Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. OSCON jQuery Training Event Parameters Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 179. OSCON jQuery Training jQuery and Ajax Lesson 7 Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 180. OSCON jQuery Training jQuery and Ajax ‣ Request Types ‣ Data Formats ‣ Request Callbacks ‣ Making a Request Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 181. OSCON jQuery Training Request Types Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 182. OSCON jQuery Training Request Types Core Method Shortcuts ‣ $.ajax(); ‣ $.get(); ‣ $.post(); ‣ $.getJSON(); ‣ $.getScript(); ‣ $( ... ).load(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 183. OSCON jQuery Training Data Formats Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training Request Callbacks Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. OSCON jQuery Training Making a Request Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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. 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. 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. 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. 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. 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. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 195. OSCON jQuery Training Thank you for coming! http://appendTo.com @appendTo Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY