stackoverflow devdays: jquery introduction for developers

Introduction for Developers

Survey

Who Me?

• Jörn Zaefferer from Cologne• Consultant for maxence integration

technologies• jQuery team member• jQuery UI lead developer• Co-Author jQuery Cookbook, due this month

Why bother?

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



Who uses jQuery

• 35% of all sites that use JavaScript, use jQuery• 1 out 5 sites, of all sites, use jQuery


reddit.comespn.comibm.com

stackoverflow.comkickball.com

boxee.tvbit.ly

twitpic.com

whitehouse.govwikipedia.orgmicrosoft.comamazon.comnetflix.combing.com

monster.comtv.com

overstock.comtime.com

capitalone.comusatoday.com

ning.comwordpress.com

dell.comtwitter.com



What exactly is jQuery

jQuery is a JavaScript Library!

• Dealing with the DOM• JavaScript Events• Animations• Ajax interactions

What does that mean?

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");



jQuery function



jQuery function

jQuery Selector (CSS expression)



jQuery function


jQuery Wrapper Set



jQuery function


jQuery MethodjQuery 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


<!DOCTYPE html><html><body>

<ul><li><a>home</a></li><li><a>about</a></li>

</ul></body></html>



<ul><li><a>home</a></li><li><a>about</a></li>

</ul><script src="jquery.js"></script><script>

jQuery("ul");</script></body></html>



<ul id="nav"><li><a>home</a></li><li><a>about</a></li>


jQuery("ul").attr("id", "nav");</script></body></html>





jQuery("#nav li");</script></body></html>



<ul id="nav"><li class="navLiItem"><a>home</a></li><li class="navLiItem"><a>about</a></li>


jQuery("#nav li").addClass("navLiItem");</script></body></html>





jQuery("#nav a");</script></body></html>



<ul id="nav"><li><a href="/home">home</a></li><li><a href="/about">about</a></li>


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><ul id="nav"></ul></body></html>


<!DOCTYPE html><html><body><ul id="nav"></ul><script src="jquery.js"></script><script>

jQuery("<li>home</li>");jQuery("<li>about</li>");



<!DOCTYPE html><html><body><ul id="nav"></ul><script src="jquery.js"></script><script>

jQuery("<li>home</li>").wrapInner("a");jQuery("<li>about</li>").wrapInner("a");



<!DOCTYPE html><html><body><ul id="nav">

<li><a>home</a></li><li><a>about</a></li>


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>


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



jQuery()

each() map()size()lengthselectorcontextindex()get()



jQuery()

each()map() size()lengthselectorcontext index()get()




<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


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


jQuery("#nav li.contact")

jQuery(":visible")




jQuery(":visible")

jQuery(":radio:enabled:checked")




jQuery(":visible")


jQuery("a[title]")




jQuery(":visible")


jQuery("a[title]")

jQuery("a[title][href='foo']")




jQuery(":visible")


jQuery("a[title]")


jQuery("a:first[href*='foo']")




jQuery(":visible")


jQuery("a[title]")



jQuery("#header, #footer")




jQuery(":visible")


jQuery("a[title]")



jQuery("#header, #footer")

jQuery("#header, #footer").filter(":visible")



attr()removeAttr()

addClass()hasClass()toggleClass()removeClass()

val()




http://jsbin.com/irico/edit#html


<input type="text" value="search" />


$("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);});


http://jsbin.com/ihale/edit#html

http://jsbin.com/irico/edit

http://jsbin.com/irico/edit



add()children()closest()find()next()nextAll()prev() prevAll() siblings()

parent() parents()

andSelf()end()

eq()filter()is()not()slice()




<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



html()text()

append()appendTo()prepend()prependTo()

after()insertAfter()before()insertBefore()

wrap()wrapAll()wrapInner()

replaceWith()replaceAll()

empty()remove()

clone()




<p>Make me bold!</p>


jQuery("p").wrapInner("<b></b>");


http://jsbin.com/esuwu/edit#html



css()

offset()offsetParent()postion()scrollTop()scrollLeft()

height()width()innerHeight()innerWidth()outerHeight()outerWidth()



<!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());


http://jsbin.com/iseti/edit#html



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




<p>click me</p><p>click me</p>


jQuery("p").bind("click", function(){ $(this).after("<p>click me</p>"); });


http://jsbin.com/ehuki/edit#html




<p>click me</p><p>click me</p>


jQuery("p").live("click", function(){ $(this).after("<p>click me</p>"); });


http://jsbin.com/epeha/edit#html



show()hide()toggle()

slideDown()slideUp()slideToggle()

fadeIn()fadeOut()fadeTo()

animate()stop()



show()hide()toggle()

slideDown()slideUp()slideToggle()

fadeIn()fadeOut()fadeTo()

animate()stop()



<!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);


http://jsbin.com/ulexu/edit#html



jQuery.ajax()jQuery.get()jQuery.getJSON() jQuery,getScript() jQuery.post()

load()

ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()

jQuery.ajaxSetup() serialize()serializeArray()



jQuery.ajax()jQuery.get()jQuery.getJSON()jQuery,getScript() jQuery.post()

load()

ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()

jQuery.ajaxSetup() serialize()serializeArray()



http://jsbin.com/erase/edit#html

<!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

http://jsbin.com/erase/edit



jQuery.supportjQuery.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()





jQuery.isArray(), jQuery.isFunction()

jQuery.trim()

jQuery.param()



// returns "hello"jQuery.trim(" hello ");





jQuery.isArray(), jQuery.isFunction()

jQuery.trim()

jQuery.param()



// 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

});

jQuery.noConflict()

Plugins

A jQueryplugin in 6 steps

http://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"));

}); };


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


}); };


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


}); };


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



}); };

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


$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));

}); }; $.fn.loveNotHate.defaults = {text:"love"};


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




})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>


$.fn.loveNotHate = function(options){ return this.each(function(){





$.fn.loveNotHate = function(options){ options = $.extend({},$.fn.loveNotHate.defaults, options);return this.each(function(){





$.fn.loveNotHate = function(options){ options = $.extend({},$.fn.loveNotHate.defaults, options);return this.each(function(){

$(this).text($(this).text().replace(/hate/g,options.text));



Plugins are 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• jQuery Forum moving away from Google Groups• Revamp of the plugin site

Thank you!

stackoverflow devdays: jquery introduction for developers

Technology

javascript library

jrn zaefferer

thisvar tables