Stack Overflow Austin - jQuery for Developers

Introduc)onforDevelopers

WhoamI?

• JonathanSharp,Omaha,Nebraska

• FreelanceDeveloper(OutWestMedia.com)

• jQueryTeammember,(web&infrastructureteam)

• Co‐authored“jQueryCookbook”(O’Reilly)Q42009• @jdsharp

WhoamI?

• Ownahorse

Overview

•Who,what,andwhyofjQuery

• 5corejQueryconcepts• OverviewofjQueryAPI• Buildapluginin6steps• jQueryIni)a)ves• Ques)ons

WhousesjQuery

• 35%ofallsitesthatuseJavaScript,usejQuery• 1out5,ofallsites,usejQuery

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

http://trends.builtwith.com/javascript/JQuery




WhousesjQuery

• 35%ofallsitesthatuseJavaScript,usejQuery• 1out5,ofallsites,usejQuery

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

reddit.comespn.comibm.com

stackoverflow.comkickball.comboxee.tvbit.ly

twitpic.com

whitehouse.govwikipedia.orgmicrosob.comamazon.comnetflix.combing.com

monster.comtv.com

overstock.com)me.com

capitalone.comusatoday.comning.com

wordpress.comdell.com

twi]er.com

WhatexactlyisjQuery

jQueryisaJavaScriptLibrary!

• Interac)onwiththeDOM(e.g.selec)ng,crea)ng,traversing,changingetc…)

• JavaScriptEvents• Anima)ons

• Ajaxinterac)ons

Whatdoesthatmean?

Addclass‘odd’toatablerow...

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

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

h]p://jsbin.com/esewu/edit

...becomes...

http://jsbin.com/esewu/edit%2523html




Poetry

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


jQueryfunc)on

UsingjQuerywecandothis


jQueryfunc)on

jQuerySelector(CSSExpression)



jQueryfunc)on


jQueryCollec)on




jQueryfunc)on


jQueryMethodjQueryCollec)on

FurtherReduced

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

FurtherReduced

var jQuery = function(...) { ... };

// $ is a valid variable character in JavaScriptvar $ = jQuery;

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

Itreallyisthe

“writeless,domore”

JavaScriptLibrary!

WhyusejQuery

• Simplicity,Speedsupwebdevelopment• Avoidscommonheadachesw/browsers• Extensivelistofplugins• Large&ac)vecommunity• Extensivetestcoverage(50browsers,11plahorms)• APIforbothcodersanddesigners

WhyusejQueryoverothersoluNons

• Simplicity,Speedsupwebdevelopment• Avoidscommonheadachesw/browsers• Extensivelistofplugins• Large&ac)vecommunity• Extensivetestcoverage(50browsers,11plahorms)• APIforbothcodersanddesigners

Ok,letsgettoit!

Concept1.Findsomething,dosomething

<!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> $(‘ul’);</script></body></html>



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

<script src=‘jquery.js’></script><script> $(‘ul’).attr(‘id’,‘nav’);</script></body></html>



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

<script src=‘jquery.js’></script><script> $(‘#nav li’);</script></body></html>



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

<script src=‘jquery.js’></script><script> $(‘#nav li’).addClass(‘navLiItem’);</script></body></html>



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

<script src=‘jquery.js’></script><script> $(‘#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></ul>

<script src=‘jquery.js’></script><script> $(‘#nav a’).each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); });</script></body></html>

Concept2.Createsomething,dosomething

<!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> $(‘<li>home</li>’);</script></body></html>


<!DOCTYPE html><html><body><ul id=‘nav’></ul><script src=‘jquery.js’></script><script> $(‘<li>home</li>’).wrapInner(‘a’);</script></body></html>


<!DOCTYPE html><html><body><ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li></ul><script src=‘jquery.js’></script><script> $(‘<li>home</li>’).wrapInner(‘a’).appendTo(‘#nav’); $(‘<li>about</li>’).wrapInner(‘a’).appendTo(‘#nav’);</script></body></html>

Concept3.Chaining&OperaNng



<script src=‘jquery.js’></script><script> $(‘ul’).attr(‘id’,’nav’); $(‘#nav li’).addClass(‘navLiItem’); $(‘#nav a’).each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); });</script></body></html>

Concept3.Chaining&OperaNng



<script src=‘jquery.js’></script><script> $(‘ul’) .attr(‘id’,’nav’) .find(‘li’) // Push stack

.addClass(‘navLiItem’) .find(‘a’) // Push stack

.each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); });

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

Concept4.UnderstandingImplicititeraNon



<script src=‘jquery.js’></script><script> $(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); });</script></body></html>

Concept5.KnowingthejQueryparametertypes

• CSSSelectors&customCSSexpressionse.g. $(‘#nav’) and $(‘:first’)

• HTMLe.g. $(‘<li><a href=“#”>link</a></li>’)

• DOMElementse.g. $(document) or $(document.createElement('a'))

• Afunc)on(shortcutforjQueryDOMreadyevent)e.g. $(function(){}) = $(document).ready(function(){})

Review

• Findsomething,dosomething

• Createsomething,dosomething

• Chaining&Opera)ng• UnderstandingImplicitItera)on

• KnowingthejQueryparametertypes

jQueryAPIoverview

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

OverviewofjQueryAPI


$()

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

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

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

jQuery.noConflict()

OverviewofjQueryAPI



<p>Element Node</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script> alert($(‘p’).get(0).nodeType);</script>

</body></html>

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

http://jsbin.com/aneki/edit%2523html




OverviewofjQueryAPI



<p>Element Node</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script> alert($(‘p’).get(0).nodeType); alert($(‘p’)[0].nodeType);</script>

</body></html>

OverviewofjQueryAPI


OverviewofjQueryAPI

$(‘#nav li.contact’)• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es

OverviewofjQueryAPI

$(‘#nav li.contact’)

$(‘:visible’)


OverviewofjQueryAPI


$(‘:visible’)

$(‘:radio:enabled:checked’)


OverviewofjQueryAPI


$(‘:visible’)


$(‘a[title]’)


OverviewofjQueryAPI


$(‘:visible’)


$(‘a[title]’)

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


OverviewofjQueryAPI


$(‘:visible’)


$(‘a[title]’)


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


OverviewofjQueryAPI


$(‘:visible’)


$(‘a[title]’)



$(‘#header,#footer’)


OverviewofjQueryAPI


$(‘:visible’)


$(‘a[title]’)




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


OverviewofjQueryAPI


$(‘:visible’)


$(‘a[title]’)




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

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


http://codylindley.com/jqueryselectors/






OverviewofjQueryAPI

attr()removeAttr()

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

val()


OverviewofjQueryAPI


<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.match(/^\s+$|^$/) ?

this.defaultValue : v);});


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

http://jsbin.com/irico/edit%2523html




OverviewofjQueryAPI


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

andSelf()end()

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

OverviewofjQueryAPI



<p>Make me bold!</p>

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

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


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

http://jsbin.com/ituza/edit%2523html




OverviewofjQueryAPI


html()text()

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

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

warp()wrapAll()wrapInner()

replaceWith()replaceAll()

empty()remove()

clone()

OverviewofjQueryAPI



<p>jQuery</p>

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

alert($(‘p’).text());


OverviewofjQueryAPI


css()

offset()offsetParent()position()scrollTop()scrollLeft()

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

OverviewofjQueryAPI


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

$('div') .height($(document).height());


OverviewofjQueryAPI


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

OverviewofjQueryAPI



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


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


h]p://jsbin.com/ehuki/edit#html

http://jsbin.com/ehuki/edit%2523html




OverviewofjQueryAPI



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


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


h]p://jsbin.com/epeha/edit#html

http://jsbin.com/epeha/edit%2523html




OverviewofjQueryAPI


show()hide()toggle()

slideDown()slideUp()slideToggle()

fadeIn()fadeOut()fadeTo()

animate()stop()

OverviewofjQueryAPI


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

$("#block").animate({ width: ‘70%’, opacity: 0.4, marginLeft: ‘0.6in’, fontSize: ‘3em’, borderWidth: ‘10px’}, 1500);

</script></body></html>h]p://jsbin.com/evage/edit#html

http://jsbin.com/evage/edit%2523html






OverviewofjQueryAPI


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

load()

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

jQuery.ajaxSetup()serialize()serializeArray()

OverviewofjQueryAPI


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

load()

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

jQuery.ajaxSetup()serialize()serializeArray()

OverviewofjQueryAPI


<!DOCTYPEhtml><html><body><scriptsrc="h]p://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>varurl=‘h]p://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?’;

$.getJSON(url,func)on(data){$.each(data.items,func)on(i,item){$("<img/>") .a]r("src",item.media.m).appendTo("body");if(i==30)returnfalse;});});</script></body></html>

h]p://jsbin.com/erase/edit#html

http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?






http://jsbin.com/erase/edit%2523html






OverviewofjQueryAPI


$.support$.boxModel

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

$.isArray(),$,isFunc)on()

$.trim()

$.param()

OverviewofjQueryAPI


$.each(data.items, function(i,item){ $("<img/>") .attr("src”,item.media.m).appendTo("body");

if ( i == 30 ) return false; });

Whathappentothe$aliasandthe$(document).ready()event

<!DOCTYPE html> <html><head><script src=“jquery.js”></script> <script> $(document).ready(function{ //jQuery code here}) </script> </head> <body> </script> </body> </html>


<!DOCTYPE html> <html><head><script src=“jquery.js”></script> <script> $(document).ready(function{ alert($(document).jquery); }) </script> </head> <body> </script> </body> </html>


<!DOCTYPE html> <html> <body> <script src=“jquery.js”></script> <script>alert($(document).jquery); </script> </body> </html>


<!DOCTYPE html> <html> <body> <script src=“jquery.js”></script> <script>alert($(document).jquery); (function($){ alert($().jquery);})(jQuery);</script> </body> </html>

Plugins!

So,whatisaplugin?

ApluginisnothingmorethanacustomjQuerymethodcreatedtoextendthefunc)onalityofthejQueryobject

$(‘ul’).myPlugin()

WhyCreateaplugin?

Youwantto“findsomething”,and“dosomething”butthe“dosomething”isnotavailableinjQuery.

Rollyourown“dosomething”withaplugin!

AjQuerypluginin6steps

h]p://jsbin.com/eheku/edit

http://jsbin.com/eheku/edit%2523html




AjQuerypluginin6stepsStep1.createaprivatescopefor$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>

AjQuerypluginin6stepsStep2.a]achplugintofnalias(akaprototype)<!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>

AjQuerypluginin6stepsStep2.a]achplugintofnalias(akaprototype)<!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);$('p').loveNotHate();</script></body></html>

AjQuerypluginin6stepsStep3.addimplicititera)on<!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);$('p').loveNotHate();</script></body></html>

AjQuerypluginin6stepsStep3.addimplicititera)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(){



AjQuerypluginin6stepsStep4.enablechaining<!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(){



AjQuerypluginin6stepsStep4.enablechaining<!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);$('p').loveNotHate().hide();</script></body></html>

AjQuerypluginin6stepsStep5.adddefaultop)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);$('p').loveNotHate();</script></body></html>

AjQuerypluginin6stepsStep6.addcustomop)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);$('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));



Pluginsaresimple,justfollowthesteps!

jQueryNews

• jQuery.org&Founda)on(SobwareFreedomLawCenter)• Tax‐deduc)bledona)ons• Fourconferencesnextyear(Boston,SanFrancisco,London,andonline)• InfrastructureUpgrade(MediaTempleSponsorship)• NewPluginsite(h]p://plugins.jquery.com)• jQueryForum(movingawayfromGoogleGroups)

http://plugins.jquery.com

http://plugins.jquery.com

JonathanSharp(@jdsharp)

SpecialthankstoCodyLindley

Stack Overflow Austin - jQuery for Developers

Technology

Transcript of Stack Overflow Austin - jQuery for Developers