Stackoverflow DevDays: jQuery Introduction for Developers

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

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

What exactly is jQuery jQuery is a JavaScript Library! Dealing with the DOM JavaScript Events Animations Ajax interactions

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

Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd");

Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery function

Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression) jQuery function

Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression) jQuery function jQuery Wrapper Set

Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression) jQuery function jQuery Method jQuery Wrapper Set

It really is the “write less, do more” JavaScript Library!

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

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

Concept 1. Find something, do something

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("ul"); </script> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ul id="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("ul").attr("id", "nav"); </script> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ulid="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("#nav li"); </script> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ulid="nav"> <li class="navLiItem"><a>home</a></li> <li class="navLiItem"><a>about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("#nav li").addClass("navLiItem"); </script> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ulid="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("#nav a"); </script> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ulid="nav"> <li><a href="/home">home</a></li> <li><a href="/about">about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("#nav a").each(function(){ jQuery(this).attr("href", "/" + jQuery(this).text()); }); </script> </body> </html>

Concept 2. Create something, do something <!DOCTYPE html> <html> <body> <ulid="nav"> </ul> </body> </html>

Concept 2. Create something, do something <!DOCTYPE html> <html> <body> <ulid="nav"> </ul> <script src="jquery.js"></script> <script> jQuery("<li>home</li>"); jQuery("<li>about</li>"); </script> </body> </html>

Concept 2. Create something, do something <!DOCTYPE html> <html> <body> <ulid="nav"> </ul> <script src="jquery.js"></script> <script> jQuery("<li>home</li>").wrapInner("a"); jQuery("<li>about</li>").wrapInner("a"); </script> </body> </html>

Concept 2. Create something, do something <!DOCTYPE html> <html> <body> <ulid="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("<li>home</li>").wrapInner("a").appendTo("#nav"); jQuery("<li>about</li>").wrapInner("a").appendTo("#nav"); </script> </body> </html>

Concept 3. Chaining <!DOCTYPE html> <html> <body> <ul id="nav"> <li class="navLiItem"><a href="/home">home</a></li> <li class="navLiItem"><a href="/about">about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("ul").attr("id","nav"); jQuery("#nav li").addClass("navLiItem"); jQuery("#nav a").each(function(){ jQuery(this).attr("href", "/" + jQuery(this).text()); }); </script> </body> </html>

Concept 3. Chaining <!DOCTYPE html> <html> <body> <ul id="nav"> <li class="navLiItem"><a href="/home">home</a></li> <li class="navLiItem"><a href="/about">about</a></li> </ul> <script src="jquery.js"></script> <script> jQuery("ul").attr("id","nav") .find("li").addClass("navLiItem") .find("a").each(function(){ jQuery(this).attr("href","/" + jQuery(this).text()); }); </script> </body> </html>

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(){})

Review Find something, do something Create something, do something Chaining jQuery parameter types

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery() each() map() size() length selector context index() get()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>Gold</p> <p>Silver</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> alert(jQuery("p").map(function() { return $(this).text(); }).get()); </script> </body> </html> http://jsbin.com/orani/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery("#nav li.contact")

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery("#nav li.contact") jQuery(":visible")

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery("#nav li.contact") jQuery(":visible") jQuery(":radio:enabled:checked")

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery("#nav li.contact") jQuery(":visible") jQuery(":radio:enabled:checked") jQuery("a[title]")

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery("#nav li.contact") jQuery(":visible") jQuery(":radio:enabled:checked") jQuery("a[title]") jQuery("a[title][href='foo']")

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery("#nav li.contact") jQuery(":visible") jQuery(":radio:enabled:checked") jQuery("a[title]") jQuery("a[title][href='foo']") jQuery("a:first[href*='foo']")

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery("#nav li.contact") jQuery(":visible") jQuery(":radio:enabled:checked") jQuery("a[title]") jQuery("a[title][href='foo']") jQuery("a:first[href*='foo']") jQuery("#header, #footer")

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery("#nav li.contact") jQuery(":visible") jQuery(":radio:enabled:checked") jQuery("a[title]") jQuery("a[title][href='foo']") jQuery("a:first[href*='foo']") jQuery("#header, #footer") jQuery("#header, #footer").filter(":visible")

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities attr() removeAttr() addClass() hasClass() toggleClass()removeClass() val()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html><html><body> <input type="text" value="search" /> <script src="jquery.js"></script> <script> $("input").focus(function(){ var v = $(this).val(); $(this).val( v == this.defaultValue? "" : v); }).blur(function(){ var v = $(this).val(); $(this).val( !v ? this.defaultValue : v); }); </script></body></html> http://jsbin.com/irico/edit#html http://jsbin.com/ihale/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities add() children() closest() find() next() nextAll() prev() prevAll() siblings() parent() parents() andSelf() end() eq() filter() is() not() slice()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <h3>Quotes</h3> <div> <p>Now or never</p> <p>Because he could</p> </div> <script src="jquery.js"></script> <script> $("h3").click(function() { $(this).next().toggle(); }).next().hide(); </script> </body> </html> http://jsbin.com/uhole/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities html() text() append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() wrap() wrapAll() wrapInner() replaceWith() replaceAll() empty() remove() clone()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>Make me bold!</p> <script src="jquery.js"></script> <script> jQuery("p").wrapInner("<b></b>"); </script> </body> </html> http://jsbin.com/esuwu/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities css() offset() offsetParent() postion() scrollTop() scrollLeft() height() width() innerHeight() innerWidth() outerHeight() outerWidth()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <head> <style>div{background-color:#ccc; width:100px; margin:0 20px; float:left;}</style> </head> <body> <div></div> <div></div> <div></div> <script src=“jquery.js" ></script> <script> jQuery("div").height(jQuery(document).height()); </script> </body> </html> http://jsbin.com/iseti/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities blur() change() click() dbclick() error() focus() keydown() keypress() keyup() mousedown() mousenter() mouseleave() mouseout() mouseup() resize() scroll() select() submit() unload() ready() bind() one() trigger() triggerHandler() unbind() live() die() hover() toggle()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>click me</p> <p>click me</p> <script src="jquery.js"></script> <script> jQuery("p").bind("click", function(){ $(this).after("<p>click me</p>"); }); </script> </body> </html> http://jsbin.com/ehuki/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>click me</p> <p>click me</p> <script src="jquery.js"></script> <script> jQuery("p").live("click", function(){ $(this).after("<p>click me</p>"); }); </script> </body> </html> http://jsbin.com/epeha/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities show() hide() toggle() slideDown() slideUp() slideToggle() fadeIn() fadeOut() fadeTo() animate() stop()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities var tooltip = $("<div/>") .addClass("tooltip") .appendTo("body"); $("input").mouseover(function(event) { tooltip.text(this.title).css({ left: event.pageX, top: event.pageY }).fadeIn(); }).mouseout(function() { tooltip.fadeOut(); }); http://jsbin.com/enoco3/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html><html><head> <style> div{background-color:#bca;width:100px;border:1px solid green;} </style> </head> <body> <div id="block">Hello!</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script> jQuery("#block").animate({ width: "70%", opacity: 0.4, }, 1500); </script></body></html> http://jsbin.com/ulexu/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery.ajaxSetup() serialize() serializeArray() jQuery.ajax() jQuery.get() jQuery.getJSON() jQuery,getScript() jQuery.post() load() ajaxComplete() ajaxError() ajaxSend() ajaxStart() ajaxStop() ajaxSuccess()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html><html><body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script> jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?", function(data){ jQuery.each(data.items, function(i,item){ jQuery("<img/>") .attr("src", item.media.m) .appendTo("body"); if ( i == 30 ) return false; }); }); </script></body></html> http://jsbin.com/ivifa/edit#html http://jsbin.com/erase/edit#html

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery.support jQuery.boxModel jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique() jQuery.isArray(), jQuery,isFunction() jQuery.trim() jQuery.param()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery.support jQuery.boxModel jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique() jQuery.isArray(), jQuery.isFunction() jQuery.trim() jQuery.param()

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities // returns "hello" jQuery.trim(" hello ");

Overview of jQuery API Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities // returns "name=John&url=ejohn.org" jQuery.param({ name: "John", url: "ejohn.org" });

jQuery and $ var jQuery = window.jQuery = window.$ = function() {}

jQuery and $ jQuery(document).ready(function($) { // ready code }); or jQuery(function($) { // ready code });

A jQueryplugin in 6 steps http://jsbin.com/asice/edit

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

Pluginsare simple,just follow the steps!

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

Stackoverflow DevDays: jQuery Introduction for Developers

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Stackoverflow DevDays: jQuery Introduction for Developers

Notas do Editor