jQuery Loves Developers - SWDC2009

2,800 views
2,731 views

Published on

Covering jQuery and the details behind the features. Also covers the new 1.3 features.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,800
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
84
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery Loves Developers - SWDC2009

  1. 1. jQuery <3 Developers
  2. 2. Hi, I'm Remy. Enjoys: JavaScript & dressing (sort of) like Mr T.
  3. 3. Unobtrusive JavaScript
  4. 4. Worst example <a href=quot;javascript:window.open( 'help.html')quot;>Help</a>
  5. 5. Just as bad <a href=quot;#quot; onclick=quot;window.open( 'help.html')quot;>Help</a>
  6. 6. quot;Why? Doesn't everyone have JavaScript turned on?quot;
  7. 7. No!
  8. 8. Corporate policies NoScript Firefox plugin No! Network script stripping proxies
  9. 9. Corporate policies NoScript Firefox plugin No! Network script stripping proxies
  10. 10. Unobtrusive way <a href=quot;help.htmlquot;>Help</a> DOM scripting way
  11. 11. Graceful Degradation ????? What's the difference ???? Progressive Enhancement
  12. 12. GD vs. PE
  13. 13. GD vs. PE • Old way • Top down • All singing all dancing first • Add fail cases • Run out of time, you're caught out
  14. 14. GD vs. PE • Old way • New way • Top down • Bottom up • All singing all dancing • Layered development first • No environment • Add fail cases assumptions • Run out of time, you're • Works by default caught out
  15. 15. quot;Find something, do something to itquot;
  16. 16. Why jQuery?
  17. 17. Why a DOM Library?
  18. 18. • Cross browser quirks handled for you • DOM scripting made easy
  19. 19. Less donkey work More problem solving
  20. 20. Less donkey work More problem solving
  21. 21. What's so special about jQuery?
  22. 22. It's pretty popular...
  23. 23. Community!
  24. 24. Community
  25. 25. APIs docs.jquery.com api.jquery.com visualjquery.com Community
  26. 26. APIs Blogs, tutorials, screencasts, docs.jquery.com plugins, development sprints api.jquery.com visualjquery.com Community
  27. 27. APIs Blogs, tutorials, screencasts, docs.jquery.com plugins, development sprints api.jquery.com visualjquery.com Google Groups jquery-en jquery-dev Community jquery-ui-en jquery-ui-dev jquery-a11y
  28. 28. APIs Blogs, tutorials, screencasts, docs.jquery.com plugins, development sprints api.jquery.com visualjquery.com Google Groups jquery-en Twitter jquery-dev @jquery Community jquery-ui-en jquery-ui-dev @jquerysites @jqueryui jquery-a11y
  29. 29. APIs Blogs, tutorials, screencasts, docs.jquery.com plugins, development sprints api.jquery.com visualjquery.com Google Groups jquery-en Twitter jquery-dev @jquery Community jquery-ui-en jquery-ui-dev @jquerysites @jqueryui jquery-a11y IRC channel freenode.net/#jquery
  30. 30. What's in the box?
  31. 31. • Selector engine: Sizzle • DOM manipulation • Events • Effects • Ajax • Utilities What's in the box?
  32. 32. ew in N 1.3 Sizzlejs.com
  33. 33. The bling function
  34. 34. $ == jQuery
  35. 35. $('div') == jQuery('div')
  36. 36. $ • Selectors - CSS1, CSS2 and some CSS3
  37. 37. $ • Selectors - CSS1, CSS2 and some CSS3 • DOM elements
  38. 38. $ • Selectors - CSS1, CSS2 and some CSS3 • DOM elements • Raw HTML
  39. 39. $ • Selectors - CSS1, CSS2 and some CSS3 • DOM elements • Raw HTML • quot;Readyquot; functions
  40. 40. $('ul')
  41. 41. $('ul') $(document.createElement('ul'))
  42. 42. $('ul') $(document.createElement('ul')) $('<ul />') or $('<ul></ul>')
  43. 43. jQuery(document).ready(fn) $(document).ready(fn) $(fn) jQuery(function ($) { // private instance of $ })
  44. 44. jQuery(document).ready(fn) $(document).ready(fn) $(fn) jQuery(function ($) { // private instance of $ })
  45. 45. jQuery(document).ready(fn) $(document).ready(fn) $(fn) jQuery(function ($) { // private instance of $ })
  46. 46. jQuery(document).ready(fn) $(document).ready(fn) $(fn) jQuery(function ($) { // private instance of $ })
  47. 47. Custom Selectors • :visible, :hidden • :first, :last • :even, :odd • :animated • :has
  48. 48. $('li a') <ul> <li>1st</li> <li>2nd</li> <li><a href=quot;#thirdquot;>3rd</a></li> <li>4th</li> </ul>
  49. 49. $('li a') <ul> <li>1st</li> <li>2nd</li> <li><a href=quot;#thirdquot;>3rd</a></li> <li>4th</li> </ul>
  50. 50. $('li:has(a)') <ul> <li>1st</li> <li>2nd</li> <li><a href=quot;#thirdquot;>3rd</a></li> <li>4th</li> </ul>
  51. 51. $('li:has(a)') <ul> <li>1st</li> <li>2nd</li> <li><a href=quot;#thirdquot;>3rd</a></li> <li>4th</li> </ul>
  52. 52. ew in N 1.3 Selector Attributes • selector, e.g. $('li').find('a').selector == 'li a' • context
  53. 53. Extending Selectors $.extend($.expr[':'], { visible : function(elem){ return elem.offsetWidth > 0 || elem.offsetHeight > 0; } });
  54. 54. Extending Selectors $.extend($.expr[':'], { visible : function(elem){ return elem.offsetWidth > 0 || elem.offsetHeight > 0; } });
  55. 55. Extending Selectors $.extend($.expr[':'], { visible : function(elem){ return elem.offsetWidth > 0 || elem.offsetHeight > 0; } });
  56. 56. Extending Selectors $.extend($.expr[':'], { visible : function(elem){ return elem.offsetWidth > 0 || elem.offsetHeight > 0; } });
  57. 57. Behind the Scenes • getElementById • getElementsByTagName • querySelectorAll • getElementsByClassName
  58. 58. $ returns a new object
  59. 59. ...that also has array like properties.
  60. 60. >>> $('li') [li, li] >>> $('li')[0] <li> >>> $('li').length 2
  61. 61. Does Selector Exist? if ( $(expr).length ) { // do stuff }
  62. 62. Plugin Architecture $.fn.myPlugin = function () { return this.each(function () { // do stuff }); }
  63. 63. Plugin Architecture $.fn.myPlugin = function () { return this.each(function () { // do stuff }); }
  64. 64. Plugin Architecture $.fn.myPlugin = function () { return this.each(function () { // do stuff }); }
  65. 65. Plugin Architecture $.fn.myPlugin = function () { return this.each(function () { // do stuff }); }
  66. 66. Chaining
  67. 67. Common $('a').addClass('ready').click(fn);
  68. 68. Common $('a').addClass('ready').click(fn);
  69. 69. Common $('a').addClass('ready').click(fn);
  70. 70. Common $('a').addClass('ready').click(fn);
  71. 71. One line! $img = $('<img />') .addClass('loading') .load(function () { $img.removeClass('loading'); }) .error(function () { $img.addClass('error') .attr('src', 'empty.gif'); }) .attr('src', 'somebigimage.jpg') .appendTo('body');
  72. 72. One line! $img = $('<img />') .addClass('loading') .load(function () { $img.removeClass('loading'); }) .error(function () { $img.addClass('error') .attr('src', 'empty.gif'); }) .attr('src', 'somebigimage.jpg') .appendTo('body');
  73. 73. One line! $img = $('<img />') .addClass('loading') .load(function () { $img.removeClass('loading'); }) .error(function () { $img.addClass('error') .attr('src', 'empty.gif'); }) .attr('src', 'somebigimage.jpg') .appendTo('body');
  74. 74. One line! $img = $('<img />') .addClass('loading') .load(function () { $img.removeClass('loading'); }) .error(function () { $img.addClass('error') .attr('src', 'empty.gif'); }) .attr('src', 'somebigimage.jpg') .appendTo('body');
  75. 75. One line! $img = $('<img />') .addClass('loading') .load(function () { $img.removeClass('loading'); }) .error(function () { $img.addClass('error') .attr('src', 'empty.gif'); }) .attr('src', 'somebigimage.jpg') .appendTo('body');
  76. 76. One line! $img = $('<img />') .addClass('loading') .load(function () { $img.removeClass('loading'); }) .error(function () { $img.addClass('error') .attr('src', 'empty.gif'); }) .attr('src', 'somebigimage.jpg') .appendTo('body');
  77. 77. One line! $img = $('<img />') .addClass('loading') .load(function () { $img.removeClass('loading'); }) .error(function () { $img.addClass('error') .attr('src', 'empty.gif'); }) .attr('src', 'somebigimage.jpg') .appendTo('body');
  78. 78. DOM Navigation
  79. 79. Finding
  80. 80. $('li a') $('li').find('a') $('a').next() $('a').parent() $('a').parents('ul')
  81. 81. <ul> $('li a') <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  82. 82. <ul> $('li a') <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  83. 83. <ul> $('li a').next() <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  84. 84. <ul> $('li a').next() <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  85. 85. <ul> $('li a').next().parent() <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  86. 86. <ul> $('li a').next().parent() <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  87. 87. <ul> $('li a').parents('ul') <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  88. 88. <ul> $('li a').parents('ul') <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  89. 89. ew in N 1.3 .closest('expr') <ul> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  90. 90. ew in N 1.3 $('img').closest('ul') <ul> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  91. 91. ew in N 1.3 $('img').closest('ul') <ul> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  92. 92. ew in N 1.3 $('img').closest('ul') <ul> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> </ul>
  93. 93. Filtering
  94. 94. $('li').filter(':first') $('a').not(':has(span)') $('a').slice(1, 1)
  95. 95. <li> $('li') <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> <li> <a href=quot;#thirdquot;>3rd</a> </li>
  96. 96. <li> $('li') <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> <li> <a href=quot;#thirdquot;>3rd</a> </li>
  97. 97. <li> $('li').filter(':has(img)') <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> <li> <a href=quot;#thirdquot;>3rd</a> </li>
  98. 98. <li> $('li').filter(':has(img)') <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> <li> <a href=quot;#thirdquot;>3rd</a> </li>
  99. 99. <li> $('li').not(':first') <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> <li> <a href=quot;#thirdquot;>3rd</a> </li>
  100. 100. <li> $('li').not(':first') <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> <li> <a href=quot;#thirdquot;>3rd</a> </li>
  101. 101. <li> $('li').slice(0, 2) <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> <li> <a href=quot;#thirdquot;>3rd</a> </li>
  102. 102. <li> $('li').slice(0, 2) <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <li> <a href=quot;#secondquot;>2nd</a> <img src=quot;two.gifquot;> </li> <li> <a href=quot;#thirdquot;>3rd</a> </li>
  103. 103. Manipulation
  104. 104. • append, appendTo, prepend, prependTo • after, before, insertAfter, insertBefore • wrap, wrapAll, wrapInner • empty, remove • clone • html, text
  105. 105. $('li').append('<span />') <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li>
  106. 106. $('li').append('<span />') <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> <span></span> </li>
  107. 107. $('li').prepend('<span />') <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li>
  108. 108. $('li').prepend('<span />') <li> <span></span> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li>
  109. 109. $('#foo').prependTo('li') <li> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li> <img id=quot;fooquot; src=quot;foo.gifquot;>
  110. 110. $('#foo').prependTo('li') <li> <img id=quot;fooquot; src=quot;foo.gifquot;> <a href=quot;#firstquot;>1st</a> <img src=quot;one.gifquot;> </li>
  111. 111. $('ul').wrap('<div />') <ul> <li><a href=quot;#firstquot;>1st</a></li> </ul> <ul> <li><a href=quot;#secondquot;>2nd</a></li> </ul>
  112. 112. $('ul').wrap('<div />') <div> <ul> <li><a href=quot;#firstquot;>1st</a></li> </ul> </div> <div> <ul> <li><a href=quot;#secondquot;>2nd</a></li> </ul> </div>
  113. 113. $('ul').wrapAll('<div />') <div> <ul> <li><a href=quot;#firstquot;>1st</a></li> </ul> <ul> <li><a href=quot;#secondquot;>2nd</a></li> </ul> </div>
  114. 114. $('li').wrapInner('<em />') <ul> <li><em><a href=quot;#firstquot;>1st</a></ em></li> </ul> <ul> <li><em><a href=quot;#secondquot;>2nd</ a></em></li> </ul>
  115. 115. Style Manipulation
  116. 116. Key/Value Pair // get $('input').attr('title'); $('a').css('font-weight'); // set $('input').attr('title', 'Name'); $('a').css('font-weight', 'bold');
  117. 117. Changing Multiples $('input').attr({ 'title' : 'Your username', 'value' : 'Enter your username' }); $('a').css({ 'font-weight' : 'bold', 'background-color' : '#c00' });
  118. 118. $('a').attr({ class : 'home', href : '/home' }); <a href=quot;/logoutquot; class=quot;logoutquot;>Go</a>
  119. 119. $('a').attr({ class : 'home', href : '/home' }); <a href=quot;/homequot; class=quot;homequot;>Go</a>
  120. 120. Dimensions & Position
  121. 121. • width, height • innerHeight, innerWidth • outerHeight, outerWidth (pass true to include margins) • scrollLeft, scrollTop • offset, position (includes margin)
  122. 122. Events
  123. 123. bind, trigger & unbind
  124. 124. bind, trigger & unbind ...and .one(fn) (which unbinds on trigger)
  125. 125. $('a').bind('click', function () { alert('you clicked'); return false; }).trigger('click');
  126. 126. $('a').bind('click', function () { alert('you clicked'); return false; }).trigger('click');
  127. 127. $('a').bind('click', function () { alert('you clicked'); return false; }).trigger('click');
  128. 128. $('a').bind('click', function () { alert('you clicked'); return false; }).trigger('click');
  129. 129. $('a').bind('click', function () { alert('you clicked'); return false; }).trigger('click');
  130. 130. $('a').bind('click', function (event, msg) { alert('you clicked: ' + msg); return false; }).trigger('click', ['ok']);
  131. 131. $('a').bind('click', function (event, msg) { alert('you clicked: ' + msg); return false; }).trigger('click', ['ok']);
  132. 132. $('a').bind('click', function (event, msg) { alert('you clicked: ' + msg); return false; }).trigger('click', ['ok']);
  133. 133. $('a').bind('click', function (event, msg) { alert('you clicked: ' + msg); return false; }).trigger('click', ['ok']);
  134. 134. $('a').bind('click', function (event, msg) { alert('you clicked: ' + msg); return false; }).trigger('click', ['ok']);
  135. 135. blur mousemove change * mouseout click mouseover dblclick mouseup error ready focus resize hover scroll keydown select keypress submit keyup toggle load unload mousedown
  136. 136. triggerHandler(event, data)
  137. 137. triggerHandler(event, data) Watch out: doesn't chain!
  138. 138. Event object • preventDefault() • stopPropagation() • return false (preventDefault + stopPropagation) • stopImmediatePropagation() ew in N 1.3
  139. 139. ew in N 1.3 Live Events
  140. 140. $('.remove').live('click',function(){ $(this).closest('tr').remove(); });
  141. 141. http://remysharp.com/demo/live.html
  142. 142. http://remysharp.com/demo/live.html
  143. 143. Live support • Supported: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup • Not supported: blur, focus, mouseenter, mouseleave, change, submit
  144. 144. Effects
  145. 145. Built in Effects • show, hide, toggle • fadeIn, fadeOut, fadeTo • slideUp, slideDown, slideToggle • animate - roll your own!
  146. 146. http://remysharp.com/demo/hide-with-margins.html
  147. 147. http://remysharp.com/demo/hide-with-margins.html
  148. 148. .animate(prop, speed, callback)
  149. 149. $('#block').animate({ 'opacity' : 0.5, 'width' : '-=20px', 'height' : '-=20px', 'top' : (winHeight - 168) + 'px' }, 400, 'easeOutBounce').animate({ 'foo' : 1 // acts as a pause }, 500).animate({ 'left' : '150%' // fly off screen }, 500, function () { $(this).hide(); });
  150. 150. $('#block').animate({ 'opacity' : 0.5, 'width' : '-=20px', 'height' : '-=20px', 'top' : (winHeight - 168) + 'px' }, 400, 'easeOutBounce').animate({ 'foo' : 1 // acts as a pause }, 500).animate({ 'left' : '150%' // fly off screen }, 500, function () { $(this).hide(); });
  151. 151. $('#block').animate({ 'opacity' : 0.5, 'width' : '-=20px', 'height' : '-=20px', 'top' : (winHeight - 168) + 'px' }, 400, 'easeOutBounce').animate({ 'foo' : 1 // acts as a pause }, 500).animate({ 'left' : '150%' // fly off screen }, 500, function () { $(this).hide(); });
  152. 152. $('#block').animate({ 'opacity' : 0.5, 'width' : '-=20px', 'height' : '-=20px', 'top' : (winHeight - 168) + 'px' }, 400, 'easeOutBounce').animate({ 'foo' : 1 // acts as a pause }, 500).animate({ 'left' : '150%' // fly off screen }, 500, function () { $(this).hide(); });
  153. 153. $('#block').animate({ 'opacity' : 0.5, 'width' : '-=20px', 'height' : '-=20px', 'top' : (winHeight - 168) + 'px' }, 400, 'easeOutBounce').animate({ 'foo' : 1 // acts as a pause }, 500).animate({ 'left' : '150%' // fly off screen }, 500, function () { $(this).hide(); });
  154. 154. $('#block').animate({ 'opacity' : 0.5, 'width' : '-=20px', 'height' : '-=20px', 'top' : (winHeight - 168) + 'px' }, 400, 'easeOutBounce').animate({ 'foo' : 1 // acts as a pause }, 500).animate({ 'left' : '150%' // fly off screen }, 500, function () { $(this).hide(); });
  155. 155. $('#block').animate({ 'opacity' : 0.5, 'width' : '-=20px', 'height' : '-=20px', 'top' : (winHeight - 168) + 'px' }, 400, 'easeOutBounce').animate({ 'foo' : 1 // acts as a pause }, 500).animate({ 'left' : '150%' // fly off screen }, 500, function () { $(this).hide(); });
  156. 156. http://remysharp.com/demo/animate.html
  157. 157. http://remysharp.com/demo/animate.html
  158. 158. Bespoke Steps $('div').queue(function () { $(this).removeClass('newcolor'); // pass back to sequence $(this).dequeue(); });
  159. 159. Bespoke Steps $('div').queue(function () { $(this).removeClass('newcolor'); // pass back to sequence $(this).dequeue(); });
  160. 160. Bespoke Steps $('div').queue(function () { $(this).removeClass('newcolor'); // pass back to sequence $(this).dequeue(); });
  161. 161. ew in N 1.3 $.fx.off = true
  162. 162. Enchantment
  163. 163. Enchantment http://jqueryui.com/docs/Effects/Methods
  164. 164. UI Effects Core • addClass, removeClass, toggleClass • show, hide, toggle • animate
  165. 165. http://jqueryui.com/demos/addClass/default.html
  166. 166. http://jqueryui.com/demos/addClass/default.html
  167. 167. Ajax
  168. 168. Über Easy Ajax $(expr).load - squirt into expr $('#info').load('info.html #links li');
  169. 169. Über Easy Ajax $(expr).load - squirt into expr $('#info').load('info.html #links li');
  170. 170. Über Easy Ajax $(expr).load - squirt into expr $('#info').load('info.html #links li');
  171. 171. Über Easy Ajax $(expr).load - squirt into expr $('#info').load('info.html #links li');
  172. 172. Über Easy Ajax $(expr).load - squirt into expr $('#info').load('info.html #links li');
  173. 173. Ajax Shortcuts • $.get • $.post • $.getScript • $.getJSON
  174. 174. $.ajax • Full control • Global setup available • Much easier to debug • http://docs.jquery.com/Ajax/ jQuery.ajax#options
  175. 175. $.ajax({ url: 'http://www.twitter.com/ statuses/user_timeline/rem.json? callback=?', dataType: 'jsonp', cache: false, success: function(data) { // this == XMLHttpRequest object $('#status').html(data[0].text); }, error: function(xhr, status, e) { // debugging enabled console.log(arguments); } });
  176. 176. $.ajax({ url: 'http://www.twitter.com/ statuses/user_timeline/rem.json? callback=?', dataType: 'jsonp', cache: false, success: function(data) { // this == XMLHttpRequest object $('#status').html(data[0].text); }, error: function(xhr, status, e) { // debugging enabled console.log(arguments); } });
  177. 177. $.ajax({ url: 'http://www.twitter.com/ statuses/user_timeline/rem.json? callback=?', dataType: 'jsonp', cache: false, success: function(data) { // this == XMLHttpRequest object $('#status').html(data[0].text); }, error: function(xhr, status, e) { // debugging enabled console.log(arguments); } });
  178. 178. $.ajax({ url: 'http://www.twitter.com/ statuses/user_timeline/rem.json? callback=?', dataType: 'jsonp', cache: false, success: function(data) { // this == XMLHttpRequest object $('#status').html(data[0].text); }, error: function(xhr, status, e) { // debugging enabled console.log(arguments); } });
  179. 179. $.ajax({ url: 'http://www.twitter.com/ statuses/user_timeline/rem.json? callback=?', dataType: 'jsonp', cache: false, success: function(data) { // this == XMLHttpRequest object $('#status').html(data[0].text); }, error: function(xhr, status, e) { // debugging enabled console.log(arguments); } });
  180. 180. Server Side Tip! // sent headers include: X-Requested-With = XMLHttpRequest
  181. 181. Utilities
  182. 182. Tests, Iterators & Operations • $.inArray, $.isFunction, $.isArray, • $.each, $.extend, $.grep, $.map • $.merge, $.unique, $.makeArray
  183. 183. Good Guys Come Last 1. Include other library first (that uses $) 2. Then include jQuery, then: $.noConflict(); // or $j = $.noConflict();
  184. 184. Sniffing
  185. 185. Old Way • $.browser • $.browser.version
  186. 186. ew in N 1.3 $.support
  187. 187. ew in N 1.3 $.support boxModel leadingWhitespace opacity cssFloat noCloneEvent scriptEval hrefNormalized objectAll style htmlSerialize tbody
  188. 188. Remy Sharp @rem remy@leftlogic.com http://remysharp.com http://jqueryfordesigners.com http://full-frontal.org P h o t o s by charliebrewer, manfrys, magw21, abbydonkrafts, nicora, leecullivan, jaako, thetruthabout, artisandhu, sundazed, otterfreak, frf_kmeron, mattlogelin, dandiffendale, mwagner, stanrandom, anniewong, legin, kerotab

×