3. Who Me? Jörn Zaefferer from Cologne Consultant for maxence integration technologies jQueryteam member jQuery UI lead developer Co-Author jQuery Cookbook, due this month
5. Who uses jQuery 35% of all sites that use JavaScript, use jQuery 1 out 5 sites, of all sites, use jQuery http://trends.builtwith.com/javascript/JQuery
6. Who uses jQuery 35% of all sites that use JavaScript, use jQuery 1 out 5 sites, of all sites, use jQuery http://trends.builtwith.com/javascript/JQuery
7. Who uses jQuery 35% of all sites that use JavaScript, use jQuery 1 out 5 sites, of all sites, use jQuery http://trends.builtwith.com/javascript/JQuery
8. What exactly is jQuery jQuery is a JavaScript Library! Dealing with the DOM JavaScript Events Animations Ajax interactions
10. It means no more of this var tables = document.getElementsByTagName("table"); for (vart = 0; t<tables.length; t++) { var rows = tables[t].getElementsByTagName("tr"); for (vari = 1; i<rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className+= " odd"; } } }; http://jsbin.com/esewu/edit
11. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd");
12. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery function
13. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression) jQuery function
14. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression) jQuery function jQuery Wrapper Set
15. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression) jQuery function jQuery Method jQuery Wrapper Set
16. It really is the “write less, do more” JavaScript Library!
17. Why use jQuery Helps us to simplify and speed up web development Allows us to avoid common headaches associated with browser development Provides a large pool of plugins Large and active community Tested on 50 browsers, 11 platforms Its for both coders and designers
18. Why use jQuery over other solutions Helps us to simplify and speed up web development Allows us to avoid common headaches associated with browser development Provides a large pool of plugins Large and active community Tested on 50 browsers, 11 platforms Its for both coders and designers
33. Concept 4. jQuery parameter types CSS Selectors & custom CSS expressions jQuery("#nav") and jQuery(":first") HTML jQuery("<li><a href=“#”>link</a></li>") DOM ElementsjQuery(document) or jQuery(this) or jQuery(event.target) A function (shortcut for jQuery DOM ready event)jQuery(function(){}) = jQuery(document).ready(function(){})
34. Review Find something, do something Create something, do something Chaining jQuery parameter types
35. Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities
82. A jQueryplugin in 6 steps Step 1. create a private scope for $ alias <!DOCTYPE html><html><body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ })(jQuery); </script></body></html>
83. A jQueryplugin in 6 steps Step 2. attach plugin to fn alias (aka prototype) <!DOCTYPE html><html><body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ $(this).text($(this).text().replace(/hate/g,"love")); }; })(jQuery); </script></body></html>
84. A jQueryplugin in 6 steps Step 2. attach plugin to fn alias (aka prototype) <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ $(this).text($(this).text().replace(/hate/g,"love")); }; })(jQuery); jQuery("p").loveNotHate(); </script></body></html>
85. A jQueryplugin in 6 steps Step 3. add implicit iteration <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ this.each(function(){ $(this).text($(this).text().replace(/hate/g,"love")); }); }; })(jQuery); jQuery("p").loveNotHate(); </script></body></html>
86. A jQueryplugin in 6 steps Step 3. add implicit iteration <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ this.each(function(){ $(this).text($(this).text().replace(/hate/g,"love")); }); }; })(jQuery); jQuery("p").loveNotHate(); </script></body></html>
87. A jQueryplugin in 6 steps Step 4. enable chaining <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,"love")); }); }; })(jQuery); jQuery("p").loveNotHate(); </script></body></html>
88. A jQueryplugin in 6 steps Step 4. enable chaining <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,"love")); }); }; })(jQuery); jQuery("p").loveNotHate().hide(); </script></body></html>
89. A jQueryplugin in 6 steps Step 5. add default options <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text)); }); }; $.fn.loveNotHate.defaults = {text:"love"}; })(jQuery); jQuery("p").loveNotHate(); </script></body></html>
90. A jQueryplugin in 6 steps Step 6. add custom options <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text)); }); }; $.fn.loveNotHate.defaults = {text:"love"}; })(jQuery); jQuery("p").loveNotHate({text:"love-love-love"}); </script></body></html>
91. A jQueryplugin in 6 steps Step 6. add custom options <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate= function(options){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text)); }); }; $.fn.loveNotHate.defaults = {text:"love"}; })(jQuery); jQuery("p").loveNotHate({text:"love-love-love"}); </script></body></html>
92. A jQueryplugin in 6 steps Step 6. add custom options <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate= function(options){ options = $.extend({},$.fn.loveNotHate.defaults, options); return this.each(function(){ $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text)); }); }; $.fn.loveNotHate.defaults = {text:"love"}; })(jQuery); jQuery("p").loveNotHate({text:"love-love-love"}); </script></body></html>
93. A jQueryplugin in 6 steps Step 6. add custom options <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate= function(options){ options = $.extend({},$.fn.loveNotHate.defaults, options); return this.each(function(){ $(this).text($(this).text().replace(/hate/g,options.text)); }); }; $.fn.loveNotHate.defaults = {text:"love"}; })(jQuery); jQuery("p").loveNotHate({text:"love-love-love"}); </script></body></html>
95. jQuery News Moving towards a Conservancy (Software Freedom Law Center) owning the code Tax-deductible donations Four conferences next year (Boston, San Francisco, London, and online) jQuery.org project site T-shirts jQueryForum moving away from Google Groups Revamp of the plugin site
before we start, for those not already using jQuery, lets answer this question: why bother?if you aren"t using it yet, is anyone else?
Very significant when you consider how many javascript solutions there are out there
It simplifies…dealing – selecting and manipulating elementsevent handling, eg. do something on a click eventanimating – slides, fadesajax – server stuff in the background
Will add a class to each odd table row inside of each table in an html pagenot too complex, already nine lines of codelead in: using jQuery…
Exchange 9 lines of code for a single jQuery statementLets examine this in detail
(just read)
While other solutions certainly provide the first two aspectsThese other four really set jQuery apartGood enough? Lets get down to the details!
Call out DTD
Call out DTD
Call out wrapper set using jQuery function
Call out implicit iteration
Repetition is the faster way to learn
Point out that the html does not have to be in the actual DOM to operate on it
Point out that the html does not have to be in the actual DOM to operate on it
Make sure we understand all the functionality the jquery function provides us
plugins add new methods to the jQuery objectadd a custom do-somethinghow does that work?