stack overflow austin - jquery for developers
DESCRIPTION
TRANSCRIPT
![Page 1: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/1.jpg)
Introduc)onforDevelopers
![Page 2: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/2.jpg)
WhoamI?
• JonathanSharp,Omaha,Nebraska
• FreelanceDeveloper(OutWestMedia.com)
• jQueryTeammember,(web&infrastructureteam)
• Co‐authored“jQueryCookbook”(O’Reilly)Q42009• @jdsharp
![Page 3: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/3.jpg)
WhoamI?
• Ownahorse
![Page 4: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/4.jpg)
Overview
•Who,what,andwhyofjQuery
• 5corejQueryconcepts• OverviewofjQueryAPI• Buildapluginin6steps• jQueryIni)a)ves• Ques)ons
![Page 5: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/5.jpg)
WhousesjQuery
• 35%ofallsitesthatuseJavaScript,usejQuery• 1out5,ofallsites,usejQuery
h]p://trends.builtwith.com/javascript/JQuery
![Page 6: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/6.jpg)
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
![Page 7: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/7.jpg)
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
![Page 8: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/8.jpg)
WhatexactlyisjQuery
jQueryisaJavaScriptLibrary!
• Interac)onwiththeDOM(e.g.selec)ng,crea)ng,traversing,changingetc…)
• JavaScriptEvents• Anima)ons
• Ajaxinterac)ons
![Page 9: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/9.jpg)
Whatdoesthatmean?
![Page 10: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/10.jpg)
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...
![Page 11: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/11.jpg)
Poetry
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
![Page 12: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/12.jpg)
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQueryfunc)on
UsingjQuerywecandothis
![Page 13: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/13.jpg)
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQueryfunc)on
jQuerySelector(CSSExpression)
UsingjQuerywecandothis
![Page 14: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/14.jpg)
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQueryfunc)on
jQuerySelector(CSSExpression)
jQueryCollec)on
UsingjQuerywecandothis
![Page 15: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/15.jpg)
UsingjQuerywecandothis
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQueryfunc)on
jQuerySelector(CSSExpression)
jQueryMethodjQueryCollec)on
![Page 16: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/16.jpg)
UsingjQuerywecandothis
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
![Page 17: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/17.jpg)
FurtherReduced
$(‘table tr:nth-child(odd)’).addClass(‘odd’);
![Page 18: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/18.jpg)
FurtherReduced
var jQuery = function(...) { ... };
// $ is a valid variable character in JavaScriptvar $ = jQuery;
$(‘table tr:nth-child(odd)’).addClass(‘odd’);
![Page 19: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/19.jpg)
Itreallyisthe
“writeless,domore”
JavaScriptLibrary!
![Page 20: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/20.jpg)
WhyusejQuery
• Simplicity,Speedsupwebdevelopment• Avoidscommonheadachesw/browsers• Extensivelistofplugins• Large&ac)vecommunity• Extensivetestcoverage(50browsers,11plahorms)• APIforbothcodersanddesigners
![Page 21: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/21.jpg)
WhyusejQueryoverothersoluNons
• Simplicity,Speedsupwebdevelopment• Avoidscommonheadachesw/browsers• Extensivelistofplugins• Large&ac)vecommunity• Extensivetestcoverage(50browsers,11plahorms)• APIforbothcodersanddesigners
![Page 22: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/22.jpg)
Ok,letsgettoit!
![Page 23: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/23.jpg)
Concept1.Findsomething,dosomething
<!DOCTYPE html><html><body>
<ul> <li><a>home</a></li> <li><a>about</a></li></ul>
</body></html>
![Page 24: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/24.jpg)
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>
![Page 25: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/25.jpg)
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>
![Page 26: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/26.jpg)
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>
![Page 27: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/27.jpg)
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>
![Page 28: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/28.jpg)
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>
![Page 29: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/29.jpg)
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>
![Page 30: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/30.jpg)
Concept2.Createsomething,dosomething
<!DOCTYPE html><html><body><ul id=‘nav’></ul></script></body></html>
![Page 31: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/31.jpg)
Concept2.Createsomething,dosomething
<!DOCTYPE html><html><body><ul id=‘nav’></ul><script src=‘jquery.js’></script><script> $(‘<li>home</li>’);</script></body></html>
![Page 32: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/32.jpg)
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>
![Page 33: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/33.jpg)
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>
![Page 34: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/34.jpg)
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>
![Page 35: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/35.jpg)
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>
![Page 36: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/36.jpg)
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>
![Page 37: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/37.jpg)
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>
![Page 38: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/38.jpg)
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(){})
![Page 39: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/39.jpg)
Review
• Findsomething,dosomething
• Createsomething,dosomething
• Chaining&Opera)ng• UnderstandingImplicitItera)on
• KnowingthejQueryparametertypes
![Page 40: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/40.jpg)
jQueryAPIoverview
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
![Page 41: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/41.jpg)
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()
![Page 42: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/42.jpg)
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()
![Page 43: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/43.jpg)
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
![Page 44: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/44.jpg)
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>
![Page 45: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/45.jpg)
OverviewofjQueryAPI
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
![Page 46: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/46.jpg)
OverviewofjQueryAPI
$(‘#nav li.contact’)• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
![Page 47: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/47.jpg)
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
![Page 48: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/48.jpg)
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
![Page 49: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/49.jpg)
OverviewofjQueryAPI
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
![Page 50: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/50.jpg)
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
![Page 51: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/51.jpg)
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
![Page 52: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/52.jpg)
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
![Page 53: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/53.jpg)
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
![Page 54: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/54.jpg)
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
![Page 55: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/55.jpg)
OverviewofjQueryAPI
attr()removeAttr()
addClass()hasClass()toggleClass()removeClass()
val()
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
![Page 56: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/56.jpg)
OverviewofjQueryAPI
attr()removeAttr()
addClass()hasClass()toggleClass()removeClass()
val()
• Core• Selectors• A]ributes• Traversing• Manipula)on• CSS• Events• Effects• Ajax• U)li)es
![Page 57: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/57.jpg)
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
![Page 58: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/58.jpg)
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()
![Page 59: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/59.jpg)
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()
![Page 60: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/60.jpg)
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
![Page 61: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/61.jpg)
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()
![Page 62: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/62.jpg)
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()
![Page 63: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/63.jpg)
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>
![Page 64: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/64.jpg)
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()
![Page 65: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/65.jpg)
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()
![Page 66: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/66.jpg)
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>
![Page 67: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/67.jpg)
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()
![Page 68: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/68.jpg)
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()
![Page 69: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/69.jpg)
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
![Page 70: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/70.jpg)
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
![Page 71: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/71.jpg)
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()
![Page 72: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/72.jpg)
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()
![Page 73: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/73.jpg)
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
![Page 74: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/74.jpg)
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()
![Page 75: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/75.jpg)
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()
![Page 76: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/76.jpg)
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
![Page 77: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/77.jpg)
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()
![Page 78: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/78.jpg)
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()
![Page 79: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/79.jpg)
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; });
![Page 80: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/80.jpg)
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>
![Page 81: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/81.jpg)
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>
![Page 82: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/82.jpg)
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>
![Page 83: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/83.jpg)
Whathappentothe$aliasandthe$(document).ready()event
<!DOCTYPE html> <html> <body> <script src=“jquery.js”></script> <script>alert($(document).jquery); </script> </body> </html>
![Page 84: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/84.jpg)
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>
![Page 85: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/85.jpg)
Plugins!
![Page 86: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/86.jpg)
So,whatisaplugin?
ApluginisnothingmorethanacustomjQuerymethodcreatedtoextendthefunc)onalityofthejQueryobject
$(‘ul’).myPlugin()
![Page 87: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/87.jpg)
WhyCreateaplugin?
Youwantto“findsomething”,and“dosomething”butthe“dosomething”isnotavailableinjQuery.
Rollyourown“dosomething”withaplugin!
![Page 88: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/88.jpg)
AjQuerypluginin6steps
h]p://jsbin.com/eheku/edit
![Page 89: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/89.jpg)
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>
![Page 90: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/90.jpg)
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>
![Page 91: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/91.jpg)
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>
![Page 92: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/92.jpg)
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>
![Page 93: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/93.jpg)
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>
![Page 94: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/94.jpg)
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>
![Page 95: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/95.jpg)
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>
![Page 96: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/96.jpg)
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>
![Page 97: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/97.jpg)
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>
![Page 98: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/98.jpg)
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>
![Page 99: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/99.jpg)
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>
![Page 100: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/100.jpg)
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>
![Page 101: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/101.jpg)
Pluginsaresimple,justfollowthesteps!
![Page 102: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/102.jpg)
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)
![Page 103: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/103.jpg)
?
![Page 104: Stack Overflow Austin - jQuery for Developers](https://reader031.vdocuments.mx/reader031/viewer/2022020217/54055a568d7f729e768b4c02/html5/thumbnails/104.jpg)
JonathanSharp(@jdsharp)
SpecialthankstoCodyLindley