Devdays Seattle jQuery Intro for Developers

Introduc)on for Developers

A bit about me

•  Cody Lindley •  I work for Ning (www.ning.com)

•  jQuery team member, on the evangelism team

•  Many years ago I authored, Thickbox

•  Co‐authored O’Reilly “jQuery Cookbook” due out end of the year

•  Recently authored a PDF book called “jQuery Enlightenment” (www.jqueryenlightenment.com)

Today

•  Who, what, where, and why of jQuery •  5 core jQuery concepts •  Overview of jQuery API •  How to build a plugin in 6 steps •  Ques)ons

Who uses jQuery

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

h[p://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

h[p://trends.builtwith.com/javascript/JQuery

reddit.com espn.com ibm.com

stackoverflow.com kickball.com boxee.tv bit.ly

twitpic.com

whitehouse.gov wikipedia.org microso_.com amazon.com netflix.com bing.com

monster.com tv.com

overstock.com )me.com

capitalone.com usatoday.com ning.com

wordpress.com dell.com

twi[er.com

What exactly is jQuery (if you don’t already know)

•  jQuery is a JavaScript Library (19kb Minified and Gzipped, 120kb Uncompressed)

•  Dealing with the DOM (e.g. selec)ng, crea)ng, traversing, changing etc…)

•  JavaScript Events •  DOM Anima)ons

•  Ajax interac)ons

What does that mean?

It means no more of this

var tables = document.getElementsByTagName(‘table’);

for (var t = 0; t < tables.length; t++) { var rows = tables[t].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += ‘odd’; } } };

h[p://jsbin.com/ebiye/edit#html

Using jQuery we can do this

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);



jQuery func)on



jQuery func)on

jQuery Selector (CSS expression)



jQuery func)on


jQuery Wrapper Set



jQuery func)on


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 ac)ve community •  Tested on 50 browsers, 11 plaiorms •  It’s for both coders and designers (we don’t discriminate)

Why use jQuery over other soluKons

•  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 ac)ve community •  Tested on 50 browsers, 11 plaiorms •  It’s for both coders and designers (we don’t discriminate)

Where to get jQuery

•  Download the source from Google code (moving to github soon) h[p://code.google.com/p/jqueryjs/

•  Or, use a CDN h[p://code.google.com/apis/ajaxlibs/documenta)on/#jquery h[p://ajax.microso_.com/ajax/jquery/jquery‐1.3.2.min.js

Ok, lets get to it!

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>



<ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li>


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>



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


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



<ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><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> </script> </body> </html>


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

jQuery(‘<li>home</li>’); jQuery(‘<li>contact</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’);


Concept 3. Chaining




jQuery(‘ul’).attr(‘id’,’nav’); jQuery(‘#nav li’).addClass(‘navLiItem’); jQuery(‘#nav a’).each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); });


Concept 3. Chaining




jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); });


Concept 3. Chaining




jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }).end();


Concept 3. Chaining




jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }).end().end();


Concept 4. Implicit iteraKon




jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); });


Concept 5. jQuery() parameters

•  First Parameter CSS selectors ‐ e.g. jQuery(‘li’) HTML ‐ e.g. jQuery(‘<li><a href=“#”>link</a></li>’) DOM elements ‐ e.g. jQuery(document) A func)on (shortcut for ready()) ‐ e.g. jQuery(func)on(){})

•  Second Parameter CSS selectors ‐ e.g. jQuery(‘li’,’#nav’) DOM elements ‐ e.g. jQuery(‘input’,’document.forms[0]’)

Review

•  Find something, do something •  Create something, do something

•  Chaining •  Implicit Itera)on

•  jQuery() parameters

Overview of jQuery API

•  Core •  Selectors •  A[ributes •  Traversing •  Manipula)on •  CSS •  Events •  Effects •  Ajax •  U)li)es



jQuery()

each() size() length selector context eq() get() index()

data() removeData() queue() dequeue()

jQuery.fn.extend() jQuery.extend()

jQuery.noConflict()




<p>Element Node</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script>

alert(jQuery(‘p’).get(0).nodeType); </script>

</body> </html>

h[p://jsbin.com/aneki/edit#html




<p>Element Node</p>


alert(jQuery(‘p’).get(0).nodeType); alert(jQuery(‘p’)[0].nodeType);

</script>

</body> </html>


jQuery(‘:visible’) •  Core •  Selectors •  A[ributes •  Traversing •  Manipula)on •  CSS •  Events •  Effects •  Ajax •  U)li)es


jQuery(‘:visible’)

jQuery(‘:radio:enabled:checked’)





jQuery(‘a[title]’)






jQuery(‘a[title][href*=‘foo’]’)







jQuery(‘a:first[href*=‘foo’]’)








jQuery(‘#header,#footer’)









jQuery(‘#mainContent,#sidebar’,’#content’)









jQuery(‘#mainContent,#sidebar’,’#content’)

h[p://codylindley.com/jqueryselectors/



attr() removeAttr()

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

val()



<!DOCTYPE html><html><body>

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

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

jQuery('input').focus(function(){

var v = $(this).val();

$(this).val( v === this.defaultValue ? '' : v);

}).blur(function(){

var v = $(this).val();

$(this).val( v.match(/^\s+$|^$/) ? this.defaultValue : v);

});

</script></body></html>

•  Core •  Selectors •  A[ributes •  Traversing •  Manipula)on •  CSS •  Events •  Effects •  Ajax •  U)li)es h[p://jsbin.com/irico/edit#html



add() children() closest() contents() find() next() nextAll() offsetParent() parent() parents() prev() prevAll() siblings()

andSelf() end()

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




<p>Make me bold!</p>


jQuery(‘p’) .contents() .wrap(‘<strong></strong>’);


h[p://jsbin.com/ituza/edit#html



html() text()

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

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

warp() wrapAll() wrapInner()

replaceWith() replaceAll()

empty() remove()

clone()




<p>jQuery</p>


//alerts “jQuery” alert(jQuery(‘p’).text());




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




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




<button>click me</button>


jQuery(‘button’).bind("click", function(){

$(this).after(‘<button>click me</button>’); });


h[p://jsbin.com/ogeni/edit#html




<button>click me</button>


jQuery(‘button’).live("click", function(){

$(this).after(‘<button>click me</button>’); });


h[p://jsbin.com/ogeni/edit#html



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>jQuery animate() method</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script>

jQuery(”div").animate({ width: ‘70%’, opacity: 0.4, marginLeft: ‘0.6in’, fontSize: ‘3em’, borderWidth: ‘10px’

}, 1500);

</script></body></html> h[p://jsbin.com/umacu/edit#html



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

load()

ajaxCompete() ajaxError() ajaxSend() ajaxStart() ajaxStop() ajaxSuccess()

jQuery.ajaxSetup() serialize() serializeArray()



<!DOCTYPE html> <html> <body> <script src="h[p://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script> jQuery.getJSON(‘://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?’, func)on(data){ jQuery.each(data.items, func)on(i,item){ jQuery("<img/>")

.a[r("src", item.media.m).appendTo("body"); if ( i == 30 ) return false; }); }); </script> </body> </html> h[p://jsbin.com/erase/edit#html



jQuery.support jQuery.boxModel

jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()

jQuery.isArray(), jQuery,isFunc)on()

jQuery.trim()

jQuery.param()



jQuery.each(data.items, function(i,item){

jQuery("<img/>") .attr("src”,item.media.m).appendTo("body");

if ( i == 30 ) return false;

});

$ alias

<!DOCTYPE html> <html> <head>

<script src=“jquery.js”></script> <script>

jQuery(‘body’).append(‘foo’);

</script> </head> <body> </body> </html>



(function($){ $(‘body’).append(‘foo’);

})(jQuery);

</script>

<head> <body> </body> </html>

jQuery(document).ready() event



jQuery(‘body’).append(‘foo’);




jQuery(document).ready(function(){ $(‘body’).append(‘foo’);

});

</script> </head> <body> </body> </html>

Plugins!

So, what is a plugin?

A plugin is nothing more than a custom jQuery method created to extend the func)onality of the jQuery object

jQuery().myPlugin()

Why Create a plugin?

You want to “find something”, and “do something” but the “do something” is not available in jQuery.

Roll your own “do something” with a plugin!

A jQuery plugin in 6 steps

h[p://jsbin.com/eheku/edit#html

A jQuery plugin 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 jQuery plugin in 6 steps Step 2. a[ach 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 jQuery plugin in 6 steps Step 3. add implicit itera)on <!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 jQuery plugin 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 jQuery plugin in 6 steps Step 5. add default op)ons <!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.defaultOptions.text));

}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};

})(jQuery); jQuery('p').loveNotHate(); </script></body></html>

A jQuery plugin in 6 steps Step 6. add custom op)ons <!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.defaultOptions.text));


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


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





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





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

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



Plugins are simple. Just follow the steps!

Devdays Seattle jQuery Intro for Developers

Technology

Transcript of Devdays Seattle jQuery Intro for Developers