Yearning jQuery

7,270 views
5,068 views

Published on

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,270
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
73
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Yearning jQuery

  1. Yearning jQuery
  2. Hi, I’m Remy / @remScreencast @jqueryfordesigners.comQuestions: interrupt me& ask!
  3. 1. Build without jQuery.2. Design the start and end of your effects without jQuery.3. Add jQuery a little at a time.
  4. (a lot of it is...) "all about CSS" Me, to many a colleague
  5. @rem Remy SharpDear designer/dev: if youre usingJavaScript to do a job that CSS could havedone perfectly well, youve lost somepoints in my book. Sorry
  6. @rem Remy SharpThe day someone loses business becausean animated transition wasnt used toreveal a screenshot: Ill sell my left nut oneBay. #cssinstead
  7. What were covering• Getting friendly with the $• DOM navigation & manipulation• Events• Ajax• Tips
  8. APIs Blogs, tutorials, screencasts, docs.jquery.com plugins, development sprints api.jquery.com visualjquery.com Twitter forum.jquery.com @jquery Help!@jquerysites @jqueryui IRC channel irc.freenode.net/#jquery
  9. jsbin.com
  10. Bling Function
  11. It means no more of thisvar tables = document.getElementsByTagName(table);for (var t = 0; t < tables.length; t++) {! var rows = tables[t].getElementsByTagName(tr);! for (var i = 1; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += odd; } }}
  12. jQuery simplifies$(table tr:nth-child(odd)).addClass(odd);
  13. jQuery simplifiesjQuery function$(table tr:nth-child(odd)).addClass(odd);
  14. jQuery simplifiesjQuery function$(table tr:nth-child(odd)).addClass(odd); CSS expression
  15. jQuery simplifiesjQuery function jQuery method$(table tr:nth-child(odd)).addClass(odd); CSS expression
  16. jQuery simplifies$(table tr:nth-child(odd)).addClass(odd);
  17. $(just css)
  18. Tools of the Trade
  19. • Firefox: Firebug (& FireQuery*)• Safari & Chrome: Web Inspector• Opera: DragonFly• IE: Web Developer Toolbar
  20. Tip $.fn.jquery (little q)
  21. Lets play.http://twitter.com
  22. jQuery on every site? No Problem.
  23. http://bit.ly/9JAcCj
  24. Lets play.
  25. Installing jQuery
  26. dev or min?
  27. Hosting options • Host it yourself (good for offline dev) • Hotlink it: • Media Temple • Microsoft • Google (my pick)http://docs.jquery.com/Downloading_jQuery
  28. CDN FTW
  29. Tip: keep a copy on your machine
  30. Where does it all go?
  31. • jQuery first• Then jQuery plugins• Then your code
  32. • Other JavaScript libraries• jQuery last library• Then jQuery plugin scripts• Then your code
  33. <html><head> <styles> <!-- make me beautiful --> </styles></head><body> <content> <!-- make me learned --> </content> <behaviour> <!-- ooo, matron --> </behaviour></body></html>
  34. <html> <head> <styles> Styles first <!-- make me beautiful -->lets the page </styles> </head> render <body> without <content> scripts <!-- make me learned --> </content> blocking <behaviour> <!-- ooo, matron --> </behaviour> </body> </html>
  35. <html> <head> <styles> <!-- make me beautiful --> Then your </styles> content, </head>again so that <body> <content>its delivered <!-- make me learned --> to your </content> visitor as <behaviour> <!-- ooo, matron --> early as </behaviour> possible </body> </html>
  36. <html> <head> <styles> <!-- make me beautiful --> </styles> </head> <body>Finally, add <content> your <!-- make me learned -->behaviour, </content>the jQuery <behaviour> <!-- ooo, matron --> and sexy </behaviour>magic jazz. </body> </html>
  37. $(document).ready(function () { // < YOU >});
  38. $(document).ready(function () { // < YOU >});
  39. $(function () { // < YOU >});
  40. TipjQuery(function ($) { // < YOU >}); Useful when giving code to a client
  41. <!DOCTYPE html><html lang="en"><head><meta charset=utf-8 /><title>My first jQuery page</title></head><body><h1>Remy woz ere</h1><p>Lorem ipsum dolor sit amet.</p><script src="jquery.min.js"></script><script>$(function () { // < YOU >});</script></body></html>
  42. Is it jQuery or $?
  43. Its both.
  44. $(table tr:nth-child(odd))
  45. jQuery(table tr:nth-child(odd))
  46. $(table tr:nth-child(odd))
  47. ∞∞∞ Chaining ∞∞∞
  48. $(div).show().hide().slideUp().slideDown();
  49. $(div).show().hide().slideUp().slideDown(); Get the divs,
  50. $(div).show().hide().slideUp().slideDown(); and show them,
  51. $(div).show().hide().slideUp().slideDown(); now hide them,
  52. $(div).show().hide().slideUp().slideDown(); and then slide them up,
  53. $(div).show().hide().slideUp().slideDown();then finally slide them down.
  54. Cant chain text getters.val() .html() .text() .css(prop) .attr(prop), etc
  55. Gotc ha & Tip if ( $(foo) ) { doAmazing(); }
  56. 1) $(foo)2) $()3) []4) [].join(,) // works
  57. if ( $(foo) ) { doAmazing();}
  58. if ( $(foo).length ) { doAmazing();}
  59. $(el).doStuff vs $.doStuff
  60. $(el).doStuff runs against everything matched.
  61. $.doStuffis a utility.
  62. Deprecated$.browser.version$.browser.msie$.browser.safari$.browser.webkit
  63. Doing stuff
  64. $(a).click(function () { alert(I got clicked); return false;});
  65. $(a).click(function () { alert(I got clicked); return false;}); Find the anchors
  66. $(a).click(function () { alert(I got clicked); return false;}); when theyre clicked
  67. $(a).click(function () { alert(I got clicked); return false;});run this function - dont worry about the crazy syntax.
  68. $(a).click(function () { alert(I got clicked); return false;}); Cancel the browsers default action, which is to redirect.
  69. $(a).click(function(event){ event.preventDefault(); alert(I got clicked); });Same thing as cancelling (almost), this is useful for debugging.
  70. • click, dblclick• mousedown, mouseup, mousemove mouseover, mouseout, mouseenter mouseleave• keydown, keypress, keyup• submit, change, blur, focus, select• scroll, resize, load, error
  71. Tabs freakin everywhere!
  72. You get the idea.
  73. A tabbing system is...• A group of "panels"• Tabs (or links) pointing to a panel• Clicking tab, hides all panels, then shows just one
  74. ...the content can also be be Ajaxy
  75. A few words on this
  76. this is the elementthat the event ishappening to.
  77. $(a).click(function () { console.log(this);});this is the anchor element, not the jQuerywrapped element.
  78. Common mistake$(a).click(function () { setTimeout(function () { $(this).text("Im alive!"); }, 1000);});
  79. Common mistake$(a).click(function () { setTimeout(function () { $(this).text("Im alive!"); }, 1000);});this is the window object, not the link
  80. Common mistake$(a).click(function () { var el = this; setTimeout(function () { $(el).text("Im alive!"); }, 1000);});
  81. Live codin time! tabs.html
  82. Events
  83. $(input).keydown(function (event) { // whats the event arg?});
  84. •.keyup(fn), .click(fn), etc•.bind(type, fn)•.trigger(type), unbind(type)•.one(type, fn)
  85. Tip Clickables
  86. $.event.special.click = { setup: function() { $(this).css(cursor,pointer); return false; }, teardown: function() { $(this).css(cursor,); return false; }}; All credit to David Walsh
  87. Problem
  88. <h1>Super Ted</h1> <img src="superted.jpg"> When the <img src="spotty.jpg"> page has <img src="txspete.jpg"> finished <script src="jquery.js"> <script>loading, the $(img).click(function(){jQuery runs showDetails(this); }); </script>
  89. <h1>Super Ted</h1> Clicking <img src="superted.jpg"> <img src="spotty.jpg">these images <img src="txspete.jpg"> "shows <script src="jquery.js"> details" <script> $(img).click(function(){ showDetails(this); }); </script>
  90. <h1>Super Ted</h1> <img src="superted.jpg"> Now Ajax <img src="spotty.jpg">(or something <img src="txspete.jpg">else) add new <script src="jquery.js"> <script>images to the $(img).click(function(){ page showDetails(this); }); </script>
  91. <h1>Super Ted</h1> <img src="superted.jpg"> Now Ajax <img src="spotty.jpg"> <img src="txspete.jpg">(or something <img src="mothernature.jpg">else) add new <script src="jquery.js">images to the <script> $(img).click(function(){ page showDetails(this); }); </script>
  92. <h1>Super Ted</h1> <img src="superted.jpg"> <img src="spotty.jpg">Clicking this <img src="txspete.jpg">image doesnt <img src="mothernature.jpg">do anything. <script src="jquery.js"> <script> $(img).click(function(){ showDetails(this); }); </script>
  93. Solution: delegation
  94. <h1>Super Ted</h1><img src="superted.jpg"><img src="spotty.jpg"><img src="txspete.jpg"><script src="jquery.js"><script>$(#superTed).delegate(img,click,function(){ showDetails(this);});</script>
  95. These imagesare loaded after the DOM hasloaded via Ajax
  96. Were going to "delegate" thetask of listening for particular events to this <div>
  97. Weve "delegate" clicks,looking for the "img" selector
  98. $(div).delegate(img,click,function(){ /* do funky stuff */});
  99. Now, any new images inserted in this<div> can be clicked and will fire the "funky stuff" function
  100. Ajax Warning: wear your tech-hat
  101. No brainer Ajax
  102. .load
  103. Example
  104. $(#detail).load(page.html);
  105. $(#detail).load(page.html #id);
  106. 1. Ajax load the page2. Search for the selector passed (#dizzy)3. Squirt contents found into original selector
  107. $(#tabs a).click(function (event) { // this.pathname = ajax-load-detail.html $(#detail).load(this.pathname); return false;});
  108. this.hash$(#tabs a).click(function (event) { $(#detail).load(this.pathname + +this.hash); return false;});
  109. JSON
  110. JavaScript Object{ screen_name : "@rem", height : "short", fingers : 5, brit : true}
  111. JSON{ "screen_name": "@rem", "height": "short", "fingers": 5, "brit": true}
  112. JSONP WTF
  113. JSON+...{ "screen_name": "@rem", "height": "short", "fingers": 5, "brit": true}
  114. JSON+Paddingcallback({ "screen_name": "@rem", "height": "short", "fingers": 5, "brit": true});
  115. Getting otherpeoples data
  116. $.getJSON
  117. Remember =?
  118. Twitterajax/twitter.html
  119. $(document).ready(function () { $.getJSON(http://twitter.com/statuses/user_timeline/rem.json?callback=?, function (data) { $(#tweets).empty(); $.each(data, function (i, item) { $(#tweets).append(<li class="tweet"> + item.text + </li>); }); });});
  120. Loading...Giving users feedback
  121. Ajax order1. ajaxStart2. ajaxSuccess (or ajaxError)3. ajaxComplete http://api.jquery.com/?s=ajax
  122. $(#status).ajaxStart(function () { $(this).fadeIn();}).ajaxComplete(function () { $(this).fadeOut();});
  123. Deferreds
  124. $.get(foo.html, function (html) {var jqXHR = $.get(foo.html); $(#latest).append(html);});jqXHR.done(function (html) { $(#latest).append(html);});
  125. $.ajax({ url: foo.json, dataType: json, success: function () { // this === xhr }, error: function () { }});
  126. $.ajax({ url: foo.json, dataType: json, context: document.body, success: function () { // this === body element }, error: function () { }});
  127. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});jqXHR.then(success, fail);
  128. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});jqXHR.then(success, fail);// much later in the codejqXHR.done(success2);
  129. jqXHR is apromise
  130. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});// much later in the codejqXHR.done(success);
  131. .done(ok) // success.fail(fail) // error.always(fn) // complete.then(ok, fail)
  132. Plugins
  133. What’s a plugin?A plugin is nothing more than acustom jQuery method created toextend the functionality of the jQueryobject$(‘ul’).myPlugin()
  134. Plugin design in 6 steps
  135. Step 1:create a privatescope for $ alias
  136. <!DOCTYPE html><html><body><script src=”jquery.js”></script><script>(function ($) {})(jQuery);</script></body></html>
  137. Step 2: attach plugin to fnalias (aka prototype)
  138. <!DOCTYPE html><html><body><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) );}; // end of plugin})(jQuery);</script></body></html>
  139. <!DOCTYPE html><html><body><p>I hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) );}; // end of plugin})(jQuery);$(‘p’).notHate();</script></body></html>
  140. Step 3:add implicit iteration
  141. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); });}; // end of plugin})(jQuery);$(‘p’).notHate();</script></body></html>
  142. Step 4:enable chaining
  143. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); });}; // end of plugin})(jQuery);$(‘p’).notHate().hide();</script></body></html>
  144. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script> this == jQuery(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); });}; // end of plugin})(jQuery);$(‘p’).notHate().hide();</script></body></html>
  145. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script> this == jQuery(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); });}; // end of == DOM element this plugin})(jQuery);$(‘p’).notHate().hide();</script></body></html>
  146. Step 5:add default options
  147. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);$(‘p’).notHate();</script></body></html>
  148. Step 6:add custom options
  149. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
  150. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
  151. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options); return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
  152. <!DOCTYPE html><html><body> http://jsbin.com/ifuga/edit<p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options); return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ settings.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
  153. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options); return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ settings.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
  154. <!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options); return this.text(function (i, text) { return text.replace(/hate/g, ➥ settings.text); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
  155. Poorlydesigned plugins
  156. $.fn.myplugin = function () {  var me = $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });  return me;};
  157. $.fn.myplugin = function () {  var me = $(this).each(fn);  return me;};
  158. $.fn.myplugin = function () {  return $(this).each(fn);};
  159. $.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  160. $.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  161. $.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  162. $.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  163. $.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does something    });  });};
  164. $.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does something    });  });};
  165. $.fn.myplugin = function () { return this.bind(someEvent, function () {  // does something  });};
  166. (function ($) { $.fn.myplugin = function () {   return this.bind(someEvent, function () {    // does something  }); };})(jQuery);
  167. Questions? To contact me after my presentation – text NHT to INTRO (46876) Or -- remy@leftlogic.com @rem

×