JZ
Uploaded byJörn Zaefferer
PPTX, PDF5,156 views

Stackoverflow DevDays: jQuery Introduction for Developers

Slides from my jQuery Introduction session at DevDays Amsterdam, including jsbin.com links for all code example (added a few missing ones).

Embed presentation

Downloaded 284 times
Introduction for Developers
Survey
Who Me?Jörn Zaefferer from CologneConsultant for maxence integration technologiesjQueryteam memberjQuery UI lead developerCo-Author jQuery Cookbook, due this month
Why bother?
Who uses jQuery35% of all sites that use JavaScript, use jQuery1 out 5 sites, of all sites, use jQueryhttp://trends.builtwith.com/javascript/JQuery
Who uses jQuery35% of all sites that use JavaScript, use jQuery1 out 5 sites, of all sites, use jQueryhttp://trends.builtwith.com/javascript/JQuery
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
What does that mean?
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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities
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 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 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 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 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 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 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 APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesshow()hide()toggle()slideDown()slideUp()slideToggle()fadeIn()fadeOut()fadeTo()animate()stop()
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 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 "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});
jQuery.noConflict()
Plugins
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
?
Thank you!

More Related Content

PDF
Actualiteiten ICT Contracten en Partnerships (2012)
byAdvocatenkantoor LEGALZ
 
PDF
Modulo7gestion
byPahola Perez
 
DOC
De impact van adhd
byGezondheid Acties
 
DOCX
Onderzoek digitalisering lesmateriaal HBO
byPiet van den Boer
 
PDF
Veel gestelde internet marketing vragen
byGezondheid Acties
 
PDF
Relatietips
byGezondheid Acties
 
PDF
De Reis van de Heldin Nederland Februari 2015
byPeter de Kuster
 
PDF
De Reis van de Heldin december 2015
byPeter de Kuster
 
Actualiteiten ICT Contracten en Partnerships (2012)
byAdvocatenkantoor LEGALZ
 
Modulo7gestion
byPahola Perez
 
De impact van adhd
byGezondheid Acties
 
Onderzoek digitalisering lesmateriaal HBO
byPiet van den Boer
 
Veel gestelde internet marketing vragen
byGezondheid Acties
 
Relatietips
byGezondheid Acties
 
De Reis van de Heldin Nederland Februari 2015
byPeter de Kuster
 
De Reis van de Heldin december 2015
byPeter de Kuster
 

Viewers also liked

PDF
Onderzoeksrapport acrs v3.0_definitief
byrloggen
 
PPSX
1ºBACH Economía Tema 5 Oferta y demanda
byGeohistoria23
 
PDF
El emprendedor y el empresario profesional cert
byMaestros Online
 
PDF
Rodriguez alvarez
byRoxana Saldaña
 
PDF
Estrategias competitivas básicas
byLarryJimenez
 
PPTX
Tears In The Rain
byH (`*•.¸(`*•.¸¸.•*´)¸.•*´) (`*•.¸(`*•.¸ ¸.•*´)¸.•*´)
 
DOCX
Como hacer un plan de negocios
byXPINNERPablo
 
DOC
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.
by.. ..
 
DOCX
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.
by.. ..
 
DOC
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...
by.. ..
 
DOC
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.
by.. ..
 
DOC
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.
by.. ..
 
DOC
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.
by.. ..
 
DOCX
Fichero de actividades
byCarolina Mendez
 
PPT
Schrijven voor het web
bySimone Levie
 
PPT
JULIOPARI - Elaborando un Plan de Negocios
byJulio Pari
 
ODP
Error messages
byrtinkelman
 
PDF
Cápsula 1. estudios de mercado
byAudias Torres Coronel
 
DOC
Geheugen verbeteren
byGezondheid Acties
 
PPSX
1ºBACH ECONOMÍA Repaso temas 5 6-7 (gh23)
byGeohistoria23
 
Onderzoeksrapport acrs v3.0_definitief
byrloggen
 
1ºBACH Economía Tema 5 Oferta y demanda
byGeohistoria23
 
El emprendedor y el empresario profesional cert
byMaestros Online
 
Rodriguez alvarez
byRoxana Saldaña
 
Estrategias competitivas básicas
byLarryJimenez
 
Tears In The Rain
byH (`*•.¸(`*•.¸¸.•*´)¸.•*´) (`*•.¸(`*•.¸ ¸.•*´)¸.•*´)
 
Como hacer un plan de negocios
byXPINNERPablo
 
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.
by.. ..
 
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.
by.. ..
 
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...
by.. ..
 
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.
by.. ..
 
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.
by.. ..
 
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.
by.. ..
 
Fichero de actividades
byCarolina Mendez
 
Schrijven voor het web
bySimone Levie
 
JULIOPARI - Elaborando un Plan de Negocios
byJulio Pari
 
Error messages
byrtinkelman
 
Cápsula 1. estudios de mercado
byAudias Torres Coronel
 
Geheugen verbeteren
byGezondheid Acties
 
1ºBACH ECONOMÍA Repaso temas 5 6-7 (gh23)
byGeohistoria23
 

Stackoverflow DevDays: jQuery Introduction for Developers

  • 1.
  • 2.
  • 3.
    Who Me?Jörn Zaeffererfrom CologneConsultant for maxence integration technologiesjQueryteam memberjQuery UI lead developerCo-Author jQuery Cookbook, due this month
  • 4.
  • 5.
    Who uses jQuery35%of all sites that use JavaScript, use jQuery1 out 5 sites, of all sites, use jQueryhttp://trends.builtwith.com/javascript/JQuery
  • 6.
    Who uses jQuery35%of all sites that use JavaScript, use jQuery1 out 5 sites, of all sites, use jQueryhttp://trends.builtwith.com/javascript/JQuery
  • 7.
    Who uses jQuery35%of all sites that use JavaScript, use jQuery1 out 5 sites, of all sites, use jQueryhttp://trends.builtwith.com/javascript/JQuery
  • 8.
    What exactly isjQueryjQuery is a JavaScript Library!Dealing with the DOMJavaScript EventsAnimationsAjax interactions
  • 9.
  • 10.
    It means nomore 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
  • 11.
    Using jQuery wecan do thisjQuery("tabletr:nth-child(odd)").addClass("odd");
  • 12.
    Using jQuery wecan do thisjQuery("tabletr:nth-child(odd)").addClass("odd");jQuery function
  • 13.
    Using jQuery wecan do thisjQuery("tabletr:nth-child(odd)").addClass("odd");jQuery Selector (CSS expression)jQuery function
  • 14.
    Using jQuery wecan do thisjQuery("tabletr:nth-child(odd)").addClass("odd");jQuery Selector (CSS expression)jQuery functionjQuery Wrapper Set
  • 15.
    Using jQuery wecan do thisjQuery("tabletr:nth-child(odd)").addClass("odd");jQuery Selector (CSS expression)jQuery functionjQuery MethodjQuery Wrapper Set
  • 16.
    It really isthe “write less, do more” JavaScript Library!
  • 17.
    Why use jQueryHelpsus 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
  • 18.
    Why use jQueryover 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
  • 19.
    Concept 1. Findsomething, do something
  • 20.
    Concept 1. Findsomething, do something<!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul></body></html>
  • 21.
    Concept 1. Findsomething, 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>
  • 22.
    Concept 1. Findsomething, 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>
  • 23.
    Concept 1. Findsomething, 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>
  • 24.
    Concept 1. Findsomething, 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>
  • 25.
    Concept 1. Findsomething, 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>
  • 26.
    Concept 1. Findsomething, 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>
  • 27.
    Concept 2. Createsomething, do something<!DOCTYPE html><html><body><ulid="nav"></ul></body></html>
  • 28.
    Concept 2. Createsomething, 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>
  • 29.
    Concept 2. Createsomething, 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>
  • 30.
    Concept 2. Createsomething, 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>
  • 31.
    Concept 3. Chaining<!DOCTYPEhtml><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>
  • 32.
    Concept 3. Chaining<!DOCTYPEhtml><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>
  • 33.
    Concept 4. jQueryparameter 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(){})
  • 34.
    ReviewFind something, dosomethingCreate something, do somethingChainingjQuery parameter types
  • 35.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities
  • 36.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery()each() map()size()lengthselectorcontextindex()get()
  • 37.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery()each()map() size()lengthselectorcontext index()get()
  • 38.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 39.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities
  • 40.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")
  • 41.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")
  • 42.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")jQuery(":radio:enabled:checked")
  • 43.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")jQuery(":radio:enabled:checked")jQuery("a[title]")
  • 44.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")jQuery(":radio:enabled:checked")jQuery("a[title]")jQuery("a[title][href='foo']")
  • 45.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#nav li.contact")jQuery(":visible")jQuery(":radio:enabled:checked")jQuery("a[title]")jQuery("a[title][href='foo']")jQuery("a:first[href*='foo']")
  • 46.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#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")
  • 47.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery("#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")
  • 48.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesattr()removeAttr()addClass()hasClass()toggleClass()removeClass()val()
  • 49.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesattr()removeAttr()addClass()hasClass()toggleClass()removeClass()val()
  • 50.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 51.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesadd()children()closest()find()next()nextAll()prev() prevAll() siblings()parent() parents() andSelf()end()eq()filter()is()not()slice()
  • 52.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesadd()children()closest()find()next()nextAll()prev() prevAll() siblings()parent() parents() andSelf()end()eq()filter()is()not()slice()
  • 53.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 54.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitieshtml()text()append()appendTo()prepend()prependTo()after()insertAfter()before()insertBefore()wrap()wrapAll()wrapInner()replaceWith()replaceAll()empty()remove()clone()
  • 55.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitieshtml()text()append()appendTo()prepend()prependTo()after()insertAfter()before()insertBefore()wrap()wrapAll()wrapInner()replaceWith()replaceAll()empty()remove()clone()
  • 56.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 57.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiescss()offset()offsetParent()postion()scrollTop()scrollLeft()height()width()innerHeight()innerWidth()outerHeight()outerWidth()
  • 58.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiescss()offset()offsetParent()postion()scrollTop()scrollLeft()height()width()innerHeight()innerWidth()outerHeight()outerWidth()
  • 59.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 60.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesblur()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()
  • 61.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesblur()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()
  • 62.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 63.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 64.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesshow()hide()toggle()slideDown()slideUp()slideToggle()fadeIn()fadeOut()fadeTo()animate()stop()
  • 65.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesshow()hide()toggle()slideDown()slideUp()slideToggle()fadeIn()fadeOut()fadeTo()animate()stop()
  • 66.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesvar 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
  • 67.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesshow()hide()toggle()slideDown()slideUp()slideToggle()fadeIn()fadeOut()fadeTo()animate()stop()
  • 68.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 69.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.ajaxSetup() serialize()serializeArray()jQuery.ajax()jQuery.get()jQuery.getJSON() jQuery,getScript() jQuery.post()load()ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()
  • 70.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.ajaxSetup() serialize()serializeArray()jQuery.ajax()jQuery.get()jQuery.getJSON()jQuery,getScript() jQuery.post()load()ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()
  • 71.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities<!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
  • 72.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.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()
  • 73.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.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()
  • 74.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities// returns "hello"jQuery.trim(" hello ");
  • 75.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilitiesjQuery.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()
  • 76.
    Overview of jQueryAPICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities// returns "name=John&url=ejohn.org"jQuery.param({ name: "John", url: "ejohn.org" });
  • 77.
    jQuery and $varjQuery = window.jQuery = window.$ = function() {}
  • 78.
    jQuery and $jQuery(document).ready(function($){ // ready code});orjQuery(function($) {// ready code});
  • 79.
  • 80.
  • 81.
    A jQueryplugin in6 stepshttp://jsbin.com/asice/edit
  • 82.
    A jQueryplugin in6 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>
  • 83.
    A jQueryplugin in6 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>
  • 84.
    A jQueryplugin in6 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>
  • 85.
    A jQueryplugin in6 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>
  • 86.
    A jQueryplugin in6 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>
  • 87.
    A jQueryplugin in6 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>
  • 88.
    A jQueryplugin in6 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>
  • 89.
    A jQueryplugin in6 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>
  • 90.
    A jQueryplugin in6 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>
  • 91.
    A jQueryplugin in6 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>
  • 92.
    A jQueryplugin in6 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>
  • 93.
    A jQueryplugin in6 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>
  • 94.
  • 95.
    jQuery NewsMoving towardsa 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
  • 96.
  • 97.

Editor's Notes

  • #3 know jquery?worked with jquery?
  • #4 Quick overview of me
  • #5 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?
  • #6 Very significant when you consider how many javascript solutions there are out there
  • #9 It simplifies…dealing – selecting and manipulating elementsevent handling, eg. do something on a click eventanimating – slides, fadesajax – server stuff in the background
  • #11 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…
  • #12 Exchange 9 lines of code for a single jQuery statementLets examine this in detail
  • #18 (just read)
  • #19 While other solutions certainly provide the first two aspectsThese other four really set jQuery apartGood enough? Lets get down to the details!
  • #20 Call out DTD
  • #21 Call out DTD
  • #22 Call out wrapper set using jQuery function
  • #25 Call out implicit iteration
  • #26 Repetition is the faster way to learn
  • #30 Point out that the html does not have to be in the actual DOM to operate on it
  • #31 Point out that the html does not have to be in the actual DOM to operate on it
  • #34 Make sure we understand all the functionality the jquery function provides us
  • #81 plugins add new methods to the jQuery objectadd a custom do-somethinghow does that work?