Yearning jQuery

  • 3,152 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,152
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
68
Comments
0
Likes
6

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. 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