The jQuery Essentials

jQuery is rapidly becoming the most widely used JavaScript library for DOM manipulation, Ajax, events and effects in the world. For developers who work on the front-end but could use better JavaScript skills, it's an essential piece of your toolkit that will almost certainly make your job more easy.

In this talk, I'll guide you through the essentials of jQuery, showing you some best practices and performance tips and tricks along the way. If you're looking for a crash course in the library, this talk might just do the trick.

Transcript

2. 2 $(‘knowledge’).appendTo(‘you’);
3. 3 What is jQuery? Why should I use it? Teach me how to use the API.
4. Introduction What is jQuery?
5. 5 It’s basically JavaScript made more accessible.
6. Well.. With JavaScript, cross-browser Ajax looks like: 6 function  sendRequest(url,callback,postData)  {        var  req  =  createXMLHTTPObject();        if  (!req)  return;        var  method  =  (postData)  ?  "POST"  :  "GET";        req.open(method,url,true);        req.setRequestHeader('User-­‐Agent','XMLHTTP/1.0');        if  (postData)                req.setRequestHeader('Content-­‐type','application/x-­‐www-­‐form-­‐urlencoded');        req.onreadystatechange  =  function  ()  {                if  (req.readyState  !=  4)  return;                if  (req.status  !=  200  &&  req.status  !=  304)  {                        return;                }                callback(req);        }        if  (req.readyState  ==  4)  return;        req.send(postData); } var  XMLHttpFactories  =  [        function  ()  {return  new  XMLHttpRequest()},        function  ()  {return  new  ActiveXObject("Msxml2.XMLHTTP")},        function  ()  {return  new  ActiveXObject("Msxml3.XMLHTTP")},        function  ()  {return  new  ActiveXObject("Microsoft.XMLHTTP")} ]; function  createXMLHTTPObject()  {        var  xmlhttp  =  false;        for  (var  i=0;i<XMLHttpFactories.length;i++)  {                try  {                        xmlhttp  =  XMLHttpFactories[i]();                }                catch  (e)  {                        continue;                }                break;        }        return  xmlhttp; }
7. Well.. With JavaScript, cross-browser Ajax looks like: 7 function  sendRequest(url,callback,postData)  {        var  req  =  createXMLHTTPObject();        if  (!req)  return;        var  method  =  (postData)  ?  "POST"  :  "GET";        req.open(method,url,true);        req.setRequestHeader('User-­‐Agent','XMLHTTP/1.0');        if  (postData)                req.setRequestHeader('Content-­‐type','application/x-­‐www-­‐form-­‐urlencoded');        req.onreadystatechange  =  function  ()  {                if  (req.readyState  !=  4)  return;                if  (req.status  !=  200  &&  req.status  !=  304)  {                        return;                }                callback(req);        }        if  (req.readyState  ==  4)  return;        req.send(postData); } var  XMLHttpFactories  =  [        function  ()  {return  new  XMLHttpRequest()},        function  ()  {return  new  ActiveXObject("Msxml2.XMLHTTP")},        function  ()  {return  new  ActiveXObject("Msxml3.XMLHTTP")},        function  ()  {return  new  ActiveXObject("Microsoft.XMLHTTP")} ]; function  createXMLHTTPObject()  {        var  xmlhttp  =  false;        for  (var  i=0;i<XMLHttpFactories.length;i++)  {                try  {                        xmlhttp  =  XMLHttpFactories[i]();                }                catch  (e)  {                        continue;                }                break;        }        return  xmlhttp; } Whoa!
8. Well.. But with jQuery, it’s as simple as this: 8 // Get the latest attendees $.get("/attendees.jsp", data: { range: 'latest'}, function( html) { $("#results").append( html ); } });
9. Well.. With JavaScript, you would style elements like this.. 9 var elems = document.getElementsByClassName('attendee'), len = elems.length, i=0; for(; i<len; i++) { elems[i].style.backgroundColor = 'orange'; } before a2er
10. Well.. With JavaScript, you would style elements like this.. 10 var elems = document.getElementsByClassName('attendee'), len = elems.length, i=0; for(; i<len; i++) { elems[i].style.backgroundColor = 'orange'; } before a2er Hold  on!
11. Well.. With jQuery, it’s just a simple one-liner: 11 $('.attendee').css('backgroundColor','orange'); before a2er
12. 12 It’s lightweight (31kb)
13. 13 Extensively tested *QUnit  unit  tests  exist  for  the  enAre  API
14. 14 Let’s you write less and do more
15. 15 “What does that mean?”
16. 16 jQuery allows you to easily select elements on a page and manipulate or add some new behaviour to them.
17. jQuery.. –Simplifies traversing the DOM –Powerful selection engine –Eases element styling through JavaScript –Powerful methods for element animation –Cross-browser Ajax interactions –DOM data-storage –and more! 17
18. jQuery.. Normalises many cross-browser quirks so don’t have to worry about them 18
19. Helps minimize issues with this bastard: 19 Hi! I’m IE6
20. jQuery.. –It’s open-source –Great for beginners wishing to ‘break’ into front-end web development –Developers from any other language background can start using it easily 20
21. 21 “Why should I use it?”
22. Reasons like this.. 22
23. and maybe this.. 23
24. But mostly.. –jQuery is extensively documented –Large online community here to help • Forums • Blogs • Tutorials • Twitter • IRC (#jquery on freenode) • Conferences • Books 24
25. Who uses jQuery? 25
26. Usage: Top 10K Sites 26 Over 50% Using jQuery
27. Usage: Top 1 Million Sites 27 Over 60% Using jQuery
28. Where Are We Now? Project status
29. Some history –jQuery was first released in January, 2006. –Initially developed by John Resig 29
30. Some history –We’ve gone through several versions since then • 1.2.* • 1.3.* • 1.4.* • 1.5.* • 1.6.* –Project now supported by: • 30+ Open-source contributors • Multiple sub-teams 30
31. Status • We’ve just released jQuery 1.7.1 31
32. Status • Lots of new changes: –$.Callbacks –Better Events API • .on() • .off() –Performance optimisations • A little of the API has been deprecated • Looking to clean-up ‘cruft’ by 1.8 32
33. Status • This is one of the first presentations to incorporate these changes • Useful to keep in mind if reading jQuery books as some of these are already out of date • You’ll get an up-to-date run-through today! 33
34. Getting setup Let’s get jQuery on your page
35. 35 ‘How do I start using this thing?’
36. Setup • Head over to jQuery.com: 36 Click  download
37. Setup • Create a new HTML file • Include jQuery using a <script> tag 37 <!DOCTYPE html> <html> <head> <script src="jquery-1.7.min.js"></script> <title>jQuery test</title> </head> <body> </body> </html>
38. Alternatively • Load it from the Google CDN • This can be faster than self-hosting 38 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/ jquery-1.7.min.js"></script> <title>jQuery test</title> </head> <body> </body> </html>
39. Using jQuery • In most cases, your code should run when the document has finished loading 39 <script type="text/javascript"> $(document).ready(function(){ // your code should go here }); // alternatively $(function(){ // your code should go here }); </script>
40. What is $? • $ is an alias to jQuery • Code can either use $ or just jQuery 40 $(document).ready(function(){ //your code should go here }); // same as.. jQuery(document).ready(function(){ //your code should go here });
41. jQuery Structure • Core • CSS • Selectors • Ajax • Attributes • Effects • Properties 41 • Deferred Object • Dimensions • Events • Manipulation • Plugins • Utilities • Data
42. 42 ‘I want to select an element on a page...then do something with it’
43. Basic Selectors Simple selectors for querying elements from the DOM
44. Code 44 //Basic selectors // ID $('#conference') // class $('.attendee') // element $('div') //wildcard $('*') //attribute $('input[name="attendeeName"]') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
45. Code 45 //Basic selectors // ID $('#conference') // class $('.attendee') // element $('div') //wildcard $('*') //attribute $('input[name="attendeeName"]') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
46. Code 46 //Basic selectors // ID $('#conference') // class $('.attendee') // element $('div') //wildcard $('*') //attribute $('input[name="attendeeName"]') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
47. Code 47 //Basic selectors // ID $('#conference') // class $('.attendee') // element $('div') //wildcard $('*') //attribute $('input[name="attendeeName"]') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
48. Code 48 //Basic selectors // ID $('#conference') // class $('.attendee') // element $('div') //wildcard $('*') //attribute $('input[name="attendeeName"]') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
49. Code 49 //Basic selectors // ID $('#conference') // class $('.attendee') // element $('div') //wildcard $('*') //attribute $('input[name="attendeeName"]') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
50. 50 ‘What if I want to select an element that’s a child of another element?...’
51. Filter Selectors Selectors for filtering down jQuery collections further
52. Code 52 // Filter selectors //first element in a result set $('ul li:first') //first child of the parent $('ul li:first-child') //last element in a result set $('ul li:last') //last child of the parent $('ul li:last-child') //all odd elements in a result set $('ul li:odd') //all even elements in a result set $('ul li:even') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
53. Code 53 // Filter selectors //first element in a result set $('ul li:first') //first child of the parent $('ul li:first-child') //last element in a result set $('ul li:last') //last child of the parent $('ul li:last-child') //all odd elements in a result set $('ul li:odd') //all even elements in a result set $('ul li:even') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
54. Code 54 // Filter selectors //first element in a result set $('ul li:first') //first child of the parent $('ul li:first-child') //last element in a result set $('ul li:last') //last child of the parent $('ul li:last-child') //all odd elements in a result set $('ul li:odd') //all even elements in a result set $('ul li:even') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
55. Code 55 // Filter selectors //first element in a result set $('ul li:first') //first child of the parent $('ul li:first-child') //last element in a result set $('ul li:last') //last child of the parent $('ul li:last-child') //all odd elements in a result set $('ul li:odd') //all even elements in a result set $('ul li:even') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
56. Code 56 // Filter selectors //first element in a result set $('ul li:first') //first child of the parent $('ul li:first-child') //last element in a result set $('ul li:last') //last child of the parent $('ul li:last-child') //all odd elements in a result set $('ul li:odd') //all even elements in a result set $('ul li:even') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
57. Code 57 // Filter selectors //first element in a result set $('ul li:first') //first child of the parent $('ul li:first-child') //last element in a result set $('ul li:last') //last child of the parent $('ul li:last-child') //all odd elements in a result set $('ul li:odd') //all even elements in a result set $('ul li:even') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
58. Code 58 // Filter selectors //first element in a result set $('ul li:first') //first child of the parent $('ul li:first-child') //last element in a result set $('ul li:last') //last child of the parent $('ul li:last-child') //all odd elements in a result set $('ul li:odd') //all even elements in a result set $('ul li:even') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
59. Hierarchal Selectors Parent/child selectors
60. Code 60 // Parent/child selectors // a b, returns children of the // parent a $('ul li') // a > b returns elements that are a // child element of a $('body > ul') // returns the elements that are // adjacent to the selector $('label + input') // a ~ b, returns b elements that // are a sibling of a $('p ~ ul') <p> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p> <label>Conference newsletter:</label> <input name="newsletter" />
61. Code 61 // Parent/child selectors // a b, returns children of the // parent a $('ul li') // a > b returns elements that are a // child element of a $('body > ul') // returns the elements that are // adjacent to the selector $('label + input') // a ~ b, returns b elements that // are a sibling of a $('p ~ ul') <p> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p> <label>Conference newsletter:</label> <input name="newsletter" />
62. Code 62 // Parent/child selectors // a b, returns children of the // parent a $('ul li') // a > b returns elements that are a // child element of a $('body > ul') // returns the elements that are // adjacent to the selector $('label + input') // a ~ b, returns b elements that // are a sibling of a $('p ~ ul') <p> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p> <label>Conference newsletter:</label> <input name="newsletter" />
63. Code 63 // Parent/child selectors // a b, returns children of the // parent a $('ul li') // a > b returns elements that are a // child element of a $('body > ul') // returns the elements that are // adjacent to the selector $('label + input') // a ~ b, returns b elements that // are a sibling of a $('p ~ ul') <p> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p> <label>Conference newsletter:</label> <input name="newsletter" />
64. Code 64 // Parent/child selectors // a b, returns children of the // parent a $('ul li') // a > b returns elements that are a // child element of a $('body > ul') // returns the elements that are // adjacent to the selector $('label + input') // a ~ b, returns b elements that // are a sibling of a $('p ~ ul') <p> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p> <label>Conference newsletter:</label> <input name="newsletter" />
65. 65 ‘I work with forms. Anything that can help selections there?’
66. Form Filters Selectors for handling form elements (e.g. inputs, password fields, checkbox etc.)
67. Code 67 //form filters //returns elements that are enabled $('input:enabled') //returns elements that are enabled $('input:disabled') //returns checked items $(':checked') //returns selected items $('select option:selected') <div class="welcome"></div> <input type="text" name="attendeeName" value="John"/> <input disabled=”disabled” type="text" name="attendeeAge" value="28"/> <input type="checkbox" checked="checked" value="enterContest" /> <select name="prizes"> <option>Apple iPad</option> <option selected="selected"> Google Chromebook </option> </select>
68. Code 68 //form filters //returns elements that are enabled $('input:enabled') //returns elements that are enabled $('input:disabled') //returns checked items $(':checked') //returns selected items $('select option:selected') <div class="welcome"></div> <input type="text" name="attendeeName" value="John"/> <input disabled=”disabled” type="text" name="attendeeAge" value="28"/> <input type="checkbox" checked="checked" value="enterContest" /> <select name="prizes"> <option>Apple iPad</option> <option selected="selected"> Google Chromebook </option> </select>
69. Code 69 //form filters //returns elements that are enabled $('input:enabled') //returns elements that are enabled $('input:disabled') //returns checked items $(':checked') //returns selected items $('select option:selected') <div class="welcome"></div> <input type="text" name="attendeeName" value="John"/> <input disabled=”disabled” type="text" name="attendeeAge" value="28"/> <input type="checkbox" checked="checked" value="enterContest" /> <select name="prizes"> <option>Apple iPad</option> <option selected="selected"> Google Chromebook </option> </select>
70. Code 70 //form filters //returns elements that are enabled $('input:enabled') //returns elements that are enabled $('input:disabled') //returns checked items $(':checked') //returns selected items $('select option:selected') <div class="welcome"></div> <input type="text" name="attendeeName" value="John"/> <input disabled=”disabled” type="text" name="attendeeAge" value="28"/> <input type="checkbox" checked="checked" value="enterContest" /> <select name="prizes"> <option>Apple iPad</option> <option selected="selected"> Google Chromebook </option> </select>
71. Code 71 //form filters //returns elements that are enabled $('input:enabled') //returns elements that are enabled $('input:disabled') //returns checked items $(':checked') //returns selected items $('select option:selected') <div class="welcome"></div> <input type="text" name="attendeeName" value="John"/> <input disabled=”disabled” type="text" name="attendeeAge" value="28"/> <input type="checkbox" checked="checked" value="enterContest" /> <select name="prizes"> <option>Apple iPad</option> <option selected="selected"> Google Chromebook </option> </select>
72. 72 “I’d like to select elements using indices or equations. Can you help?”
73. nth-child Filters Filtering using the CSS nth-child selector
74. Code 74 //nth-child filters //nth child in a result set $('ul li:nth-child(2)') //all odd numbered results $('ul li:nth-child(odd)') //all even numbered results $('ul li:nth-child(even)') //all elements based on a formula. here it’s every 2nd child $('ul li:nth-child(2n)') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
75. Code 75 //nth-child filters //nth child in a result set $('ul li:nth-child(2)') //all odd numbered results $('ul li:nth-child(odd)') //all even numbered results $('ul li:nth-child(even)') //all elements based on a formula. here it’s every 2nd child $('ul li:nth-child(2n)') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
76. Code 76 //nth-child filters //nth child in a result set $('ul li:nth-child(2)') //all odd numbered results $('ul li:nth-child(odd)') //all even numbered results $('ul li:nth-child(even)') //all elements based on a formula. here it’s every 2nd child $('ul li:nth-child(2n)') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
77. Code 77 //nth-child filters //nth child in a result set $('ul li:nth-child(2)') //all odd numbered results $('ul li:nth-child(odd)') //all even numbered results $('ul li:nth-child(even)') //all elements based on a formula. here it’s every 2nd child $('ul li:nth-child(2n)') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
78. Code 78 //nth-child filters //nth child in a result set $('ul li:nth-child(2)') //all odd numbered results $('ul li:nth-child(odd)') //all even numbered results $('ul li:nth-child(even)') //all elements based on a formula. here it’s every 2nd child $('ul li:nth-child(2n)') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
79. More Pseudo Selectors Selectors for handling whether selectors are visible or hidden and more
80. Code 80 //more pseudo selectors // returns elements that are hidden $('li:hidden') // returns elements that are visible $('li:visible') // returns elements that don't match // the condition supplied $('input:not(:checked)') // returns elements that are equal to // the index supplied $('ul li:eq(1)') // returns elements that are greather // than the index supplied $('ul li:gt(2)') // returns elements in a set less than // the index supplied $('ul li:lt(2)') <style type="text/css"> .hidden{ display:none} </style> <ul id="conference"> <li class="hidden attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="checkbox"/>
81. Code 81 //more pseudo selectors // returns elements that are hidden $('li:hidden') // returns elements that are visible $('li:visible') // returns elements that don't match // the condition supplied $('input:not(:checked)') // returns elements that are equal to // the index supplied $('ul li:eq(1)') // returns elements that are greather // than the index supplied $('ul li:gt(2)') // returns elements in a set less than // the index supplied $('ul li:lt(2)') <style type="text/css"> .hidden{ display:none} </style> <ul id="conference"> <li class="hidden attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="checkbox"/>
82. Code 82 //more pseudo selectors // returns elements that are hidden $('li:hidden') // returns elements that are visible $('li:visible') // returns elements that don't match // the condition supplied $('input:not(:checked)') // returns elements that are equal to // the index supplied $('ul li:eq(1)') // returns elements that are greather // than the index supplied $('ul li:gt(2)') // returns elements in a set less than // the index supplied $('ul li:lt(2)') <style type="text/css"> .hidden{ display:none} </style> <ul id="conference"> <li class="hidden attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="checkbox"/>
83. Code 83 //more pseudo selectors // returns elements that are hidden $('li:hidden') // returns elements that are visible $('li:visible') // returns elements that don't match // the condition supplied $('input:not(:checked)') // returns elements that are equal to // the index supplied $('ul li:eq(1)') // returns elements that are greather // than the index supplied $('ul li:gt(2)') // returns elements in a set less than // the index supplied $('ul li:lt(2)') <style type="text/css"> .hidden{ display:none} </style> <ul id="conference"> <li class="hidden attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="checkbox"/>
84. Code 84 //more pseudo selectors // returns elements that are hidden $('li:hidden') // returns elements that are visible $('li:visible') // returns elements that don't match // the condition supplied $('input:not(:checked)') // returns elements that are equal to // the index supplied $('ul li:eq(1)') // returns elements that are greather // than the index supplied $('ul li:gt(2)') // returns elements in a set less than // the index supplied $('ul li:lt(2)') <style type="text/css"> .hidden{ display:none} </style> <ul id="conference"> <li class="hidden attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="checkbox"/>
85. Code 85 //more pseudo selectors // returns elements that are hidden $('li:hidden') // returns elements that are visible $('li:visible') // returns elements that don't match // the condition supplied $('input:not(:checked)') // returns elements that are equal to // the index supplied $('ul li:eq(1)') // returns elements that are greather // than the index supplied $('ul li:gt(2)') // returns elements in a set less than // the index supplied $('ul li:lt(2)') <style type="text/css"> .hidden{ display:none} </style> <ul id="conference"> <li class="hidden attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="checkbox"/>
86. Code 86 //more pseudo selectors // returns elements that are hidden $('li:hidden') // returns elements that are visible $('li:visible') // returns elements that don't match // the condition supplied $('input:not(:checked)') // returns elements that are equal to // the index supplied $('ul li:eq(1)') // returns elements that are greather // than the index supplied $('ul li:gt(2)') // returns elements in a set less than // the index supplied $('ul li:lt(2)') <style type="text/css"> .hidden{ display:none} </style> <ul id="conference"> <li class="hidden attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="checkbox"/>
87. 87 ‘What about elements containing some specific text or elements?’
88. Content Filters Filters for narrowing down elements with specific content
89. Code 89 //content filters // :has(a) all elements with a descendant that matches a $('div:has(p)') //:contains(a) the element contains a $('li:contains("Dan")') //returns elements that are empty $(':empty') //returns the parent of li $('li:parent') <div class="welcome"> <p>attendee</p> </div> <p> <ul id="conference"> <li class="attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee"></li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p>
90. Code 90 //content filters // :has(a) all elements with a descendant that matches a $('div:has(p)') //:contains(a) the element contains a $('li:contains("Dan")') //returns elements that are empty $(':empty') //returns the parent of li $('li:parent') <div class="welcome"> <p>attendee</p> </div> <p> <ul id="conference"> <li class="attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee"></li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p>
91. Code 91 //content filters // :has(a) all elements with a descendant that matches a $('div:has(p)') //:contains(a) the element contains a $('li:contains("Dan")') //returns elements that are empty $(':empty') //returns the parent of li $('li:parent') <div class="welcome"> <p>attendee</p> </div> <p> <ul id="conference"> <li class="attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee"></li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p>
92. Code 92 //content filters // :has(a) all elements with a descendant that matches a $('div:has(p)') //:contains(a) the element contains a $('li:contains("Dan")') //returns elements that are empty $(':empty') //returns the parent of li $('li:parent') <div class="welcome"> <p>attendee</p> </div> <p> <ul id="conference"> <li class="attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee"></li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p>
93. Code 93 //content filters // :has(a) all elements with a descendant that matches a $('div:has(p)') //:contains(a) the element contains a $('li:contains("Dan")') //returns elements that are empty $(':empty') //returns the parent of li $('li:parent') <div class="welcome"> <p>attendee</p> </div> <p> <ul id="conference"> <li class="attendee">Addy</li> <li class="attendee">Dan Heberden</li> <li class="attendee"></li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> </p>
94. jQuery Collections Understanding what $() returns
95. Code 95 // Collections // this returns a jQuery collection // your selection wrapped inside a // jQuery object that can be further // manipulated $('ul li') // we can treat it a little like an array $('ul li').length //5 // we can iterate over it.. $('ul li').each(function(i, x){ console.log($(this)); }); // and we can also call methods on it $('ul li').hide(); //hides these elements <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
96. 96 “I’ve heard you can chain methods with jQuery...how does that work? Why would I use it?”
97. Method Chaining Chaining method calls to write shorter, less repetitive code
98. Code 98 // Chaining // When you call a method on // a jQuery object another // jQuery object is usually returned // Because of this, we're able to // easily 'chain' together methods $('ul') .find('.attendee') .addClass('arrived') .removeClass('pending'); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
99. Code 99 // Accessing the original selection // We sometimes want to access the // original selection again and we // can use .end() to achieve this.. $('ul') .find('.attendee') .addClass('arrived') .removeClass('pending') .end() .addClass('seated'); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
100. 100 ‘Do I re-query the DOM every time I want to do something with an element?’
101. Caching How to avoid re-querying the DOM unless absolutely necessary
102. jQuery • jQuery makes selecting elements simple • However, behind the scenes a lot of work can be involved in querying the DOM • By caching selections, we avoid having to re- query the DOM unless necessary 102
103. Code 103 // uncached selections $('.attendee').fadeIn(); $('.attendee').css('color','green'); $('.attendee').on('click',function(){ console.log('hello world'); }) <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
104. Code 104 // uncached selections $('.attendee').fadeIn(); $('.attendee').css('color','green'); $('.attendee').on('click',function(){ console.log('hello world'); }) <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
105. Code 105 // cache the selection var attendees = $('.attendee'); // use as needed attendees.fadeIn(); attendees.css('color','green'); attendees.on('click', function(){ console.log('hello world'); }); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
106. Code 106 //but this also supports chaining! var attendees = $('.attendee'); attendees .fadeIn() .css('color','green') .on('click', function(){ console.log('hello world'); }); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
107. 107 ‘How do I modify the style of elements using jQuery?’
108. CSS Methods for getting and setting CSS-related properties of elements
109. As we saw earlier.. –With JavaScript, you would style elements like this.. 109 var elems = document.getElementsByClassName('attendee'), len = elems.length, i=0; for(; i<len; i++) { elems[i].style.backgroundColor = 'orange'; } before a2er
110. But.. –With jQuery, it’s just a simple one-liner: 110 $('.attendee').css('backgroundColor','orange'); before a2er
111. The .css() method • Supports a few different signatures: –$(elem).css(name) - gets a CSS property –$(elem).css(name, value) - sets a property –$(elem).css({multiple properties}) - set multiple properties and values 111
112. CSS • We also support some other utility methods: –$(elem).addClass(‘className’); –$(elem).removeClass(‘className’); –$(elem).toggleClass(‘className’); –and more!. 112
113. Code 113 $(‘.attendee’) .removeClass(‘arrived’) .addClass(‘attending’) .css({ ‘font-size’:‘20px’, ‘color’:‘orange’, ‘border’:‘1px solid black’, }) .toggleClass(‘seated’); AFendee AFendee AFendee AFendee AFendee AFendee
114. Code 114 $(‘.attendee’) .removeClass(‘arrived’) .addClass(‘attending’) .css({ ‘font-size’:‘20px’, ‘color’:‘orange’, ‘border’:‘1px solid black’, }) .toggleClass(‘seated’); AFendee AFendee AFendee AFendee AFendee AFendee
115. Code 115 $(‘.attendee’) .removeClass(‘arrived’) .addClass(‘attending’) .css({ ‘font-size’:‘20px’, ‘color’:‘orange’, ‘border’:‘1px solid black’, }) .toggleClass(‘seated’); AFendee AFendee AFendee AFendee AFendee AFendee
116. Code 116 $(‘.attendee’) .removeClass(‘arrived’) .addClass(‘attending’) .css({ ‘font-size’:‘20px’, ‘color’:‘orange’, ‘border’:‘1px solid black’, }) .toggleClass(‘seated’); AFendee AFendee AFendee AFendee AFendee AFendee
117. Code 117 $(‘.attendee’) .removeClass(‘arrived’) .addClass(‘attending’) .css({ ‘font-size’:‘20px’, ‘color’:‘orange’, ‘border’:‘1px solid black’, }) .toggleClass(‘seated’); AFendee AFendee AFendee AFendee AFendee AFendee
118. Code 118 var attendees = $('.attendee'), // Returns 'orange' currentTextColor = attendees.css('color'), // Returns '1px solid black' currentBorder = attendees.css('border'), // Returns '20px' currentFontSize = attendees.css('font-size'); AFendee AFendee AFendee AFendee AFendee AFendee
119. Code 119 // Single property changes $('#container').css('backgroundColor','orange'); // Multiple property changes $('.attendee').css({ 'width':'200', 'height':'100', 'color':'red', 'backgroundColor':'blue' }); // Working with cached elements var myDiv = $('div'); myDiv.css('color','green');
120. 120 ‘I want things to swoosh from one side to another or just fade in. How can I animate?’
121. Effects Short-hand and long-hand approaches for animating elements
122. Animation • There are both short-hand and long-hand methods of doing animation: • $(elem).show() • $(elem).hide() • $(elem).fadeIn() • $(elem).fadeOut() • $(elem).animate() 122
123. Short-hand: Hide and Show 123 // cache the selection var attendees = $('.attendee'); // Hide all attendees attendees.hide(); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
124. Short-hand: Hide and Show 124 // cache the selection var attendees = $('.attendee'); // Show all attendees attendees.show(); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
125. Short-hand: Fade-in/Fade-out 125 // cache the selection var attendees = $('.attendee'); // Fade-out all attendees attendees.fadeOut(); // Fade-in all attendees attendees.fadeIn(); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
126. Short-hand: A little better 126 // cache the selection var attendees = $('.attendee'); // Show all attendees over time attendees.show(500, function(){ alert(‘there you are!’); }); // Fade-out all attendees over time attendees.fadeOut(500, function(){ alert(‘you disappeared!’); }); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
127. Long-hand: animate() 127 attendees.animate({ 'width': '200', 'height': '300', 'opacity': '0.5', 'marginLeft': '20' }, 200, function(){ //animation complete });
128. Long-hand: animate() 128 attendees.animate({ 'width': '200', 'height': '300', 'opacity': '0.5', 'marginLeft': '20' }, 200, function(){ //animation complete }); What  would  you  like  to  animate?
129. Long-hand: animate() 129 attendees.animate({ 'width': '200', 'height': '300', 'opacity': '0.5', 'marginLeft': '20' }, 200, function(){ //animation complete }); DuraAon  for  the  animaAon  (ms)
130. Long-hand: animate() 130 attendees.animate({ 'width': '200', 'height': '300', 'opacity': '0.5', 'marginLeft': '20' }, 200, function(){ //animation complete }); Callback  funcAon  for  when  the animaAon  completes.
131. Step-functions: 131 attendees.animate({ opacity: '0.5', height: '50%' },{ // step: a callback function fired at // each step of an animation step: function(now, fx) { var data = fx.elem.id + ' ' + fx.prop + ': ' + now; $('body').append('<div>' + data + '</div>'); } });
132. Easing functions: 132 $('#container').animate({ width: ['toggle', 'swing'], height: ['toggle', 'swing'], opacity: 'toggle' }, 500, 'linear', function() { $(this).after('<div>Animation complete.</div>'); });
133. Easing functions: 133 $('#container').animate({ width: ['toggle', 'swing'], height: ['toggle', 'swing'], opacity: 'toggle' }, 500, // an easing function that sets the speed at which the // animation progresses at different points in the // animation. Think of 'linear' as smooth. 'linear', function() { $(this).after('<div>Animation complete.</div>'); });
134. 134 “I want to get or post content using Ajax, so I don’t have to reload the page. Is that hard to do?”
135. Ajax Performing asynchronous HTTP requests
136. Ajax • jQuery supports both short and long-hand methods for making Ajax requests • $.get() • $.post() • $.getJSON() • $.ajax() • and others • Cross-browser XHR without the headaches! 136
137. Short-hand: Get and Post 137 // Get data $.get('attendees.html', function( data ) { $('.result').html(data); }); // Post data $.post('attendees.php', { name: ‘John’ }, function( data ){ $('.result').html(data); });
138. Short-hand: Get and Post 138 // Get data $.get('attendees.html', function( data ) { $('.result').html( data ); }); // Post data $.post('attendees.php', { name: ‘John’ }, function( data ){ $('.result').html( data ); });
139. Short-hand: Get JSON 139 $.getJSON('attendees.json', function( data ) { var attendees = []; $.each( data, function( key, val ) { attendees.push('<li id="' + key + '">' + val +'</li>'); }); $('<ul/>', { 'class': 'attendees', html: attendees.join('') }).appendTo('body'); });
140. Getting JSON 140 $.getJSON('attendees.json', function( data ) { var attendees = []; $.each( data, function( key, val ) { attendees.push('<li id="' + key + '">' + val +'</li>'); }); $('<ul/>', { 'class': 'attendees', html: attendees.join('') }).appendTo('body'); }); IteraAng  over  our  data and  pushing  into  an  array
141. Getting JSON 141 $.getJSON('attendees.json', function( data ) { var attendees = []; $.each( data, function( key, val ) { attendees.push('<li id="' + key + '">' + val +'</li>'); }); $('<ul/>', { 'class': 'attendees', html: attendees.join('') }).appendTo('body'); }); Dynamically  generate  a  list containing  our  items  and   append  to  the  document   body
142. Ajax: Retrieving content 142 // Retrieve the latest version of a web page $.ajax({ url: "attendees.html", cache: false, // What to do if this is successful: success: function(html){ $("#results").append(html); }, // What to do if this fails: error: function(){ //something went wrong } });
143. Ajax: Retrieving content 143 // Retrieve the latest version of a web page $.ajax({ url: "attendees.html", cache: false, // What to do if this is successful: success: function(html){ $("#results").append(html); }, // What to do if this fails: error: function(){ //something went wrong } });
144. Ajax: Retrieving content 144 // Retrieve the latest version of a web page $.ajax({ url: "attendees.html", cache: false, // What to do if this is successful: success: function(html){ $("#results").append(html); }, // What to do if this fails: error: function(){ //something went wrong } });
145. Ajax: Retrieving content 145 // More future-proof version: var jqxhr = $.ajax({ url: "attendees.html", cache: false }) .done(function(){ // success! }) .fail"(function(){ // error! }); // Better as .success() and .error() are going.
146. Ajax: We also support.. 146 var request = $.ajax({ url: 'attendees.html', type: 'POST', data: {id : attendeeID}, dataType: 'html', cache: 'false' }); request.done(function(data){ console.log('Received:' + data); }); request.fail(function(data, status){ console.log('failed because:' + status); });
147. Advanced Ajax: Deferreds 147 // Let’s make a request for a file function getFile(){ return $.get('attendees.html'); } // All $.ajax/short-hand ajax methods support returning // a promise for something to be completed. This allows us // to make non-blocking calls to servers. $.when( getFile() ) .then(function(){ console.log( 'I fire when getFile() has completed!' ); }) .fail(function(){ console.log( 'I fire if requests fail!' ); }); // Read the above as ‘when’ getFile() is resolved, then do something. If this fails do something else.
148. 148 “How do I attach events to elements? I’d like to have something happen when I click or hover over them”
149. Events Registering behaviours which are applied when a user interacts with the browser
150. jQuery • Before jQuery 1.7: –Many ways to attach event handlers to elements • .bind() - basic attachment of a handler to an element • .delegate() - supports attaching handlers to elements that have been added dynamically after page-load. • .live() - similar to delegate, but not as great with larger groups of elements. –and the following for ‘unbinding’ handlers: • .unbind() • .undelegate() 150
151. 151 ‘Whoa. Wait...three methods? But how do I know which to use? Couldn’t this be made simpler?’
152. jQuery • As of jQuery 1.7: –We now have: • .on() –and unbind.. • .off() –for all possible cases –Much simpler to understand. 152
153. Code 153 // Binding a click event to elements // with the class 'attendee' $('.attendee').on('click', function(){ $(this).css('color','red'); }); // Remove just the click event handler $('.attendee').off('click','**'); // Remove all event handlers from // attendees e.g. if others had been // set $('.attendee').off();
154. Binding: Same syntax 154 // Old way of doing things $('a').bind('click', myHandler); $('form') .bind('submit', { val: 42 }, fn); $('.comment') .delegate('a.add', 'click', addNew); $('.dialog') .undelegate('a', 'click.myDlg'); $('a').live('click', fn); $('a').die('click'); // The new, simpler, hotness $('a').on('click', myHandler); $('form') .on('submit', { val: 42 }, fn); $('.comment') .on('click', 'a.add', addNew); $('.dialog') .off('click.myDlg', 'a'); $(document).on('click', 'a', fn); $(document).off('click', 'a');
155. Delegation: Order changes 155 // Old way of doing things $('a').bind('click', myHandler); $('form') .bind('submit', { val: 42 }, fn); $('.comment') .delegate('a.add', 'click', addNew); $('.dialog') .undelegate('a', 'click.myDlg'); $('a').live('click', fn); $('a').die('click'); // The new, simpler, hotness $('a').on('click', myHandler); $('form') .on('submit', { val: 42 }, fn); $('.comment') .on('click', 'a.add', addNew); $('.dialog') .off('click.myDlg', 'a'); $(document).on('click', 'a', fn); $(document).off('click', 'a');
156. Live: More minor changes 156 // Old way of doing things $('a').bind('click', myHandler); $('form') .bind('submit', { val: 42 }, fn); $('.comment') .delegate('a.add', 'click', addNew); $('.dialog') .undelegate('a', 'click.myDlg'); $('a').live('click', fn); $('a').die('click'); // The new, simpler, hotness $('a').on('click', myHandler); $('form') .on('submit', { val: 42 }, fn); $('.comment') .on('click', 'a.add', addNew); $('.dialog') .off('click.myDlg', 'a'); $(document).on('click', 'a', fn); $(document).off('click', 'a');
157. Code: Prevent defaults 157 // .preventDefault() allows us to cancel // only the *default* action $("form").on("submit", function(event) { event.preventDefault(); }); // .stopPropagation() allows us to stop // events from bubbling without preventing // the standard form submit $("form").on("submit", function(event) { event.stopPropagation(); }); <form action="attend.php" method="POST"> <input type="checkbox" name="attending" checked/> </form>
158. Code: Prevent defaults 158 // .preventDefault() allows us to cancel // only the *default* action $("form").on("submit", function(event) { event.preventDefault(); }); // .stopPropagation() allows us to stop // events from bubbling without preventing // the standard form submit $("form").on("submit", function(event) { event.stopPropagation(); }); <form action="attend.php" method="POST"> <input type="checkbox" name="attending" checked/> </form>
159. 159 “I usually just store information in variables, but I’d like to associate data with elements. Can jQuery help?”
160. Data Storing and retrieving arbitrary data using specific DOM elements
161. jQuery • jQuery has an internal data cache: –Can be used to store data in key/value pairs –Data is stored against any DOM elements –Data can be stored and retrieved, a little like a database (store) 161
162. Code 162 var last = $('.attendee:last'); // Set some data with $.fn.data() last.data('firstName', 'John'); last.data('lastName', 'Resig'); // You can then access this data // as follows: console.log( last.data('firstName') ); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
163. Code 163 // utility methods // May be deprecated in the future // or moved to plugins // does the DOM node or object // have data attached? $.hasData(lastAttendee); //true // Removes data stored under // a specific key $.removeData(lastAttendee, 'firstName'); //removes all data $.removeData(lastAttendee); // Lower level data method for // handling data associated with // an element $.data('.attendee:first', 'foo', 'bar'); //same as elem.data('foo','bar') <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
164. 164 “I want to iterate through the elements returned by a selector. How can I do that?”
165. Utilities Iterating over collections and traversing the DOM for other subsets of collections
166. Code 166 //Iterators // .each() $(‘li’).each(function(index)){ alert(index + ': ' + $(this).text ()); }); // but if we want to pass each // element through a function.. // .map() $(".welcome") .append( $(“li").map(function(){ return $(this).val(); }) .get() .join(", ") ); // appends comma-separated list of li values <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
167. Code 167 //Iterators // .each() $(‘li’).each(function(index)){ alert(index + ': ' + $(this).text ()); }); // but if we want to pass each // element through a function.. // .map() $(".welcome") .append( $(“li").map(function(){ return $(this).val(); }) .get() .join(", ") ); // appends comma-separated list of li values <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendeeName" value="John"/>
168. 168 “I want to be able to check if something has been ‘checked’ or modify attributes like ‘href’. Can I?”
169. Attributes Getting and settings DOM attributes of elements
170. jQuery • jQuery supports getting and setting DOM attributes and properties of elements –attributes are generally strings –can be modified via .attr() –properties can be modified via .prop() 170
171. Code 171 // .attr() gets the attribute value // for the first element in a set only // gets the value of an attribute $('a').attr('href'); // sets the value of an attribute $('a').attr('href','http://google.com'); // we can also set multiple // attributes at the same time $('a').attr({ title: 'Google!', alt: 'Googling', href: 'http://google.com' }); <div class="welcome"></div> <ul id="conference"> <li class="attendee"> <a title="addy osmani" href="http://addyosmani.com">Addy</a> </li> <li class="attendee">Dan Heberden</li> <li class="attendee">Adam Sontag</li> <li class="attendee">Mathias Bynens</li> <li class="attendee">Douglas</li> </ul> <input type="text" name="attendee_name" value="John"/>
172. jQuery • Only thing that can’t be altered like this is type • Some browsers throw errors when this is attempted to be changed • (Mostly IE) 172
173. jQuery • Similar to attributes, jQuery also allows us to get and set properties –Difference is important –‘checked’ is a property –‘title’ is an attribute –Before 1.6, attr() sometimes took properties into account causing inconsistencies –This is now fixed 173
174. Code 174 // Prop examples var elem = $('input'); var node = elem[0]; //true alert( node.checked ); //true elem.prop('checked'); //true elem.is(':checked'); // change prop elem.prop('checked',''); //or elem.removeProp('checked'); <div class="welcome"></div> <input type='checkbox' checked/> <a href="http://google.com" title="hello world">test</a>
175. Summary What did we learn today?
176. 176 jQuery can be a powerful addition to your front-end utility belt
177. We covered: • Core concepts –Setup –Selection –Chaining –Caching 177
178. We looked through: • API –Selectors –Events –Animation –Traversing –Attributes –Ajax –and more. 178
179. 179 You can start using it right away
180. 180 Go try it out at jQuery.com!
181. 181 For questions or more from me: @addyosmani or addyosmani.com
182. 182 For a free jQuery book check out: jqfundamentals.com