Yearning jQuery
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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,521
On Slideshare
3,495
From Embeds
26
Number of Embeds
1

Actions

Shares
Downloads
68
Comments
0
Likes
6

Embeds 26

http://lanyrd.com 26

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