Stackoverflow DevDays: jQuery Introduction for Developers

Who Me?Jörn Zaefferer from CologneConsultant for maxence integration technologiesjQueryteam memberjQuery UI lead developerCo-Author jQuery Cookbook, due this month

Who uses jQuery35% of all sites that use JavaScript, use jQuery1 out 5 sites, of all sites, use jQueryhttp://trends.builtwith.com/javascript/JQuery

What exactly is jQueryjQuery is a JavaScript Library!Dealing with the DOMJavaScript EventsAnimationsAjax interactions

It means no more of thisvar 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 thisjQuery("tabletr:nth-child(odd)").addClass("odd");

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

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

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

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

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

Why use jQueryHelps us to simplify and speed up web developmentAllows us to avoid common headaches associated with browser developmentProvides a large pool of pluginsLarge and active communityTested on 50 browsers, 11 platformsIts for both coders and designers

Why use jQuery over other solutionsHelps us to simplify and speed up web developmentAllows us to avoid common headaches associated with browser developmentProvides a large pool of pluginsLarge and active communityTested on 50 browsers, 11 platformsIts 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 typesCSS 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(){})

ReviewFind something, do somethingCreate something, do somethingChainingjQuery parameter types

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery()each() map()size()lengthselectorcontextindex()get()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery()each()map() size()lengthselectorcontext index()get()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")jQuery(":radio:enabled:checked")

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")jQuery(":radio:enabled:checked")jQuery("a[title]")

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")jQuery(":radio:enabled:checked")jQuery("a[title]")jQuery("a[title][href='foo']")

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesattr()removeAttr()addClass()hasClass()toggleClass()removeClass()val()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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#htmlhttp://jsbin.com/ihale/edit#html

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesadd()children()closest()find()next()nextAll()prev() prevAll() siblings()parent() parents() andSelf()end()eq()filter()is()not()slice()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitieshtml()text()append()appendTo()prepend()prependTo()after()insertAfter()before()insertBefore()wrap()wrapAll()wrapInner()replaceWith()replaceAll()empty()remove()clone()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiescss()offset()offsetParent()postion()scrollTop()scrollLeft()height()width()innerHeight()innerWidth()outerHeight()outerWidth()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesblur()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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesshow()hide()toggle()slideDown()slideUp()slideToggle()fadeIn()fadeOut()fadeTo()animate()stop()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesvar 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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.ajaxSetup() serialize()serializeArray()jQuery.ajax()jQuery.get()jQuery.getJSON() jQuery,getScript() jQuery.post()load()ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.ajaxSetup() serialize()serializeArray()jQuery.ajax()jQuery.get()jQuery.getJSON()jQuery,getScript() jQuery.post()load()ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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#htmlhttp://jsbin.com/erase/edit#html

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.supportjQuery.boxModeljQuery.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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.supportjQuery.boxModeljQuery.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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities// returns "hello"jQuery.trim(" hello ");

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities// 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});orjQuery(function($) {// ready code});

A jQueryplugin in 6 stepshttp://jsbin.com/asice/edit

A jQueryplugin in 6 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 stepsStep 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 NewsMoving towards a Conservancy (Software Freedom Law Center) owning the codeTax-deductible donationsFour conferences next year (Boston, San Francisco, London, and online)jQuery.org project siteT-shirtsjQueryForum moving away from Google GroupsRevamp of the plugin site

Stackoverflow DevDays: jQuery Introduction for Developers

More Related Content

Viewers also liked (20)

Stackoverflow DevDays: jQuery Introduction for Developers

Editor's Notes