stack overflow austin - jquery for developers
Post on 01-Sep-2014
7.290 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
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...
Poetry
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQueryfunc)on
UsingjQuerywecandothis
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQueryfunc)on
jQuerySelector(CSSExpression)
UsingjQuerywecandothis
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQueryfunc)on
jQuerySelector(CSSExpression)
jQueryCollec)on
UsingjQuerywecandothis
UsingjQuerywecandothis
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQueryfunc)on
jQuerySelector(CSSExpression)
jQueryMethodjQueryCollec)on
UsingjQuerywecandothis
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
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>
Concept1.Findsomething,dosomething
<!DOCTYPE html><html><body>
<ul> <li><a>home</a></li> <li><a>about</a></li></ul>
<script src=‘jquery.js’></script><script> $(‘ul’);</script></body></html>
Concept1.Findsomething,dosomething
<!DOCTYPE html><html><body>
<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>
Concept1.Findsomething,dosomething
<!DOCTYPE html><html><body>
<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>
Concept1.Findsomething,dosomething
<!DOCTYPE html><html><body>
<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>
Concept1.Findsomething,dosomething
<!DOCTYPE html><html><body>
<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>
Concept1.Findsomething,dosomething
<!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> $(‘#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>
Concept2.Createsomething,dosomething
<!DOCTYPE html><html><body><ul id=‘nav’></ul><script src=‘jquery.js’></script><script> $(‘<li>home</li>’);</script></body></html>
Concept2.Createsomething,dosomething
<!DOCTYPE html><html><body><ul id=‘nav’></ul><script src=‘jquery.js’></script><script> $(‘<li>home</li>’).wrapInner(‘a’);</script></body></html>
Concept2.Createsomething,dosomething
<!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
<!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> $(‘ul’).attr(‘id’,’nav’); $(‘#nav li’).addClass(‘navLiItem’); $(‘#nav a’).each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); });</script></body></html>
Concept3.Chaining&OperaNng
<!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> $(‘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
<!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> $(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); });</script></body></html>
Concept4.UnderstandingImplicititeraNon
<!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> $(‘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
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
$()
each() size()length()selector()context()eq() get()index()
data()removeData()queue()dequeue()
jQuery.fn.extend() jQuery.extend()
jQuery.noConflict()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
$()
each() size()length()selector()context()eq() get()index()
data()removeData()queue()dequeue()
jQuery.fn.extend() jQuery.extend()
jQuery.noConflict()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!DOCTYPE html><html><body>
<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
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!DOCTYPE html><html><body>
<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
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][href*=‘foo’]’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][href*=‘foo’]’)
$(‘a:first[href*=‘foo’]’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][href*=‘foo’]’)
$(‘a:first[href*=‘foo’]’)
$(‘#header,#footer’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][href*=‘foo’]’)
$(‘a:first[href*=‘foo’]’)
$(‘#header,#footer’)
$(‘#mainContent,#sidebar’,’#content’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][href*=‘foo’]’)
$(‘a:first[href*=‘foo’]’)
$(‘#header,#footer’)
$(‘#mainContent,#sidebar’,’#content’)
h]p://codylindley.com/jqueryselectors/
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
attr()removeAttr()
addClass()hasClass()toggleClass()removeClass()
val()
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
attr()removeAttr()
addClass()hasClass()toggleClass()removeClass()
val()
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
OverviewofjQueryAPI
<!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.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
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
add()children()closest()contents()find()next()nextAll()offsetParent()parent() parents() prev() prevAll() siblings()
andSelf()end()
eq()filter()is()map()not()slice()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
add()children()closest()contents()find()next()nextAll()offsetParent()parent() parents() prev() prevAll() siblings()
andSelf()end()
eq()filter()is()map()not()slice()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!DOCTYPE html><html><body>
<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>’);
</script></body></html>
h]p://jsbin.com/ituza/edit#html
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
html()text()
append()appendTo()prepend()prependTo()
after()before()insert()insertAfter()insertBefore
warp()wrapAll()wrapInner()
replaceWith()replaceAll()
empty()remove()
clone()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
html()text()
append()appendTo()prepend()prependTo()
after()before()insert()insertAfter()insertBefore
warp()wrapAll()wrapInner()
replaceWith()replaceAll()
empty()remove()
clone()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!DOCTYPE html><html><body>
<p>jQuery</p>
<script src="jquery.js"></script><script>
alert($(‘p’).text());
</script></body></html>
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
css()
offset()offsetParent()position()scrollTop()scrollLeft()
height()width()innerHeight()innerWidth()outerHeight()outerWidth()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
css()
offset()offsetParent()position()scrollTop()scrollLeft()
height()width()innerHeight()innerWidth()outerHeight()outerWidth()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!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());
</script></body></html>
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
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
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
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
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!DOCTYPE html><html><body>
<p>click me</p><p>click me</p>
<script src="jquery.js"></script><script>
$("p").bind("click", function(){ $(this).after("<p>click me</p>"); });
</script></body></html>
h]p://jsbin.com/ehuki/edit#html
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!DOCTYPE html><html><body>
<p>click me</p><p>click me</p>
<script src="jquery.js"></script><script>
$("p").live("click", function(){ $(this).after("<p>click me</p>"); });
</script></body></html>
h]p://jsbin.com/epeha/edit#html
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
show()hide()toggle()
slideDown()slideUp()slideToggle()
fadeIn()fadeOut()fadeTo()
animate()stop()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
show()hide()toggle()
slideDown()slideUp()slideToggle()
fadeIn()fadeOut()fadeTo()
animate()stop()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!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
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
jQuery.ajax()jQuery.get()jQuery.getJSON()jQuery.getScript()jQuery.post()
load()
ajaxCompete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()
jQuery.ajaxSetup()serialize()serializeArray()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
jQuery.ajax()jQuery.get()jQuery.getJSON()jQuery,getScript()jQuery.post()
load()
ajaxCompete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()
jQuery.ajaxSetup()serialize()serializeArray()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
<!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
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
$.support$.boxModel
$.each(),$.extend(),$.grep(),$.makeArray(),$.map(),$.inArray(),$.merge(),$.unique()
$.isArray(),$,isFunc)on()
$.trim()
$.param()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
$.support$.boxModel
$.each(),$.extend(),$.grep(),$.makeArray(),$.map(),$.inArray(),$.merge(),$.unique()
$.isArray(),$,isFunc)on()
$.trim()
$.param()
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
$.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>
Whathappentothe$aliasandthe$(document).ready()event
<!DOCTYPE html> <html><head><script src=“jquery.js”></script> <script> $(document).ready(function{ alert($(document).jquery); }) </script> </head> <body> </script> </body> </html>
Whathappentothe$aliasandthe$(document).ready()event
<!DOCTYPE html> <html><head><script src=“jquery.js”></script> <script> $(document).ready(function{ alert($(document).jquery); }) </script> </head> <body> </script> </body> </html>
Whathappentothe$aliasandthe$(document).ready()event
<!DOCTYPE html> <html> <body> <script src=“jquery.js”></script> <script>alert($(document).jquery); </script> </body> </html>
Whathappentothe$aliasandthe$(document).ready()event
<!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
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(){
$(this).text($(this).text().replace(/hate/g,'love')); });
}; })(jQuery);$('p').loveNotHate();</script></body></html>
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(){
$(this).text($(this).text().replace(/hate/g,'love')); });
}; })(jQuery);$('p').loveNotHate();</script></body></html>
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(){
$(this).text($(this).text().replace(/hate/g,'love')); });
}; })(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($){
$.fn.loveNotHate = function(){ return this.each(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($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);$('p').loveNotHate({text:'love-love-love'});</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($){
$.fn.loveNotHate = function(customOptions){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);$('p').loveNotHate({text:'love-love-love'});</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($){
$.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(function(){
$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);$('p').loveNotHate({text:'love-love-love'});</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($){
$.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(function(){
$(this).text($(this).text().replace(/hate/g,options.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);$('p').loveNotHate({text:'love-love-love'});</script></body></html>
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)
?
JonathanSharp(@jdsharp)
SpecialthankstoCodyLindley
top related