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 reddit.com whitehouse.gov overstock.com espn.com wikipedia.org )me.com ibm.com microso_.com capitalone.com stackoverﬂow.com amazon.com usatoday.com kickball.com netﬂix.com ning.com boxee.tv bing.com wordpress.com bit.ly monster.com dell.com twitpic.com tv.com twi[er.com h[p://trends.builtwith.com/javascript/JQuery

What exactly is jQuery (if you don’t already know) •  jQuery is a JavaScript Library (19kb Miniﬁed 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’);

Using jQuery we can do this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery func)on

Using jQuery we can do this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery Selector (CSS expression) jQuery func)on

Using jQuery we can do this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery Selector (CSS expression) jQuery func)on jQuery Wrapper Set

Using jQuery we can do this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery Selector (CSS expression) jQuery func)on jQuery Wrapper Set jQuery Method

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>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’); </script> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’).attr(‘id’,‘nav’); </script> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘#nav li’); </script> </body> </html>

Concept 1. Find something, do something <!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> jQuery(‘#nav li’).addClass(‘navLiItem’); </script> </body> </html>

Concept 1. Find something, do something <!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> jQuery(‘#nav a’); </script> </body> </html>

Concept 1. Find something, do something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘#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>

Concept 2. Create something, do something <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘<li>home</li>’); jQuery(‘<li>contact</li>’); </script> </body> </html>

Concept 2. Create something, do something <!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’); </script> </body> </html>

Concept 2. Create something, do something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘<li>home</li>’).wrapInner(‘a’).appendTo(‘#nav’); jQuery(‘<li>about</li>’).wrapInner(‘a’).appendTo(‘#nav’); </script> </body> </html>

Concept 3. Chaining <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’).attr(‘id’,’nav’); jQuery(‘#nav li’).addClass(‘navLiItem’); jQuery(‘#nav a’).each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }); </script> </body> </html>

Concept 3. Chaining <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }); </script> </body> </html>

Concept 3. Chaining <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }).end(); </script> </body> </html>

Concept 3. Chaining <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }).end().end(); </script> </body> </html>

Concept 4. Implicit iteraKon <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }); </script> </body> </html>

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 •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery() •  Selectors each() size() •  A[ributes length selector •  Traversing context eq() •  Manipula)on get() index() •  CSS data() •  Events removeData() queue() •  Eﬀects dequeue() Ajax jQuery.fn.extend() •  jQuery.extend() •  U)li)es jQuery.noConflict()

Overview of jQuery API •  Core <!DOCTYPE html> Selectors <html> •  <body> •  A[ributes <p>Element Node</p> •  Traversing <script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.2/jquery.min.js" ></script> Manipula)on <script> •  alert(jQuery(‘p’).get(0).nodeType); </script> •  CSS </body> •  Events </html> •  Eﬀects •  Ajax •  U)li)es h[p://jsbin.com/aneki/edit#html

Overview of jQuery API •  Core <!DOCTYPE html> Selectors <html> •  <body> •  A[ributes <p>Element Node</p> •  Traversing <script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.2/jquery.min.js" ></script> Manipula)on <script> •  alert(jQuery(‘p’).get(0).nodeType); alert(jQuery(‘p’)[0].nodeType); •  CSS </script> •  Events </body> </html> •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery(‘:visible’) •  Selectors •  A[ributes •  Traversing •  Manipula)on •  CSS •  Events •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery(‘:visible’) •  Selectors jQuery(‘:radio:enabled:checked’) •  A[ributes •  Traversing •  Manipula)on •  CSS •  Events •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery(‘:visible’) •  Selectors jQuery(‘:radio:enabled:checked’) •  A[ributes jQuery(‘a[title]’) •  Traversing •  Manipula)on •  CSS •  Events •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery(‘:visible’) •  Selectors jQuery(‘:radio:enabled:checked’) •  A[ributes jQuery(‘a[title]’) •  Traversing jQuery(‘a[title][href*=‘foo’]’) •  Manipula)on •  CSS •  Events •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery(‘:visible’) •  Selectors jQuery(‘:radio:enabled:checked’) •  A[ributes jQuery(‘a[title]’) •  Traversing jQuery(‘a[title][href*=‘foo’]’) •  Manipula)on jQuery(‘a:first[href*=‘foo’]’) •  CSS •  Events •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery(‘:visible’) •  Selectors jQuery(‘:radio:enabled:checked’) •  A[ributes jQuery(‘a[title]’) •  Traversing jQuery(‘a[title][href*=‘foo’]’) •  Manipula)on jQuery(‘a:first[href*=‘foo’]’) •  CSS jQuery(‘#header,#footer’) •  Events •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery(‘:visible’) •  Selectors jQuery(‘:radio:enabled:checked’) •  A[ributes jQuery(‘a[title]’) •  Traversing jQuery(‘a[title][href*=‘foo’]’) •  Manipula)on jQuery(‘a:first[href*=‘foo’]’) •  CSS jQuery(‘#header,#footer’) •  Events jQuery(‘#mainContent,#sidebar’,’#content’) •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core jQuery(‘:visible’) •  Selectors jQuery(‘:radio:enabled:checked’) •  A[ributes jQuery(‘a[title]’) •  Traversing jQuery(‘a[title][href*=‘foo’]’) •  Manipula)on jQuery(‘a:first[href*=‘foo’]’) •  CSS jQuery(‘#header,#footer’) •  Events jQuery(‘#mainContent,#sidebar’,’#content’) •  Eﬀects h[p://codylindley.com/jqueryselectors/ •  Ajax •  U)li)es

Overview of jQuery API •  Core attr() •  Selectors removeAttr() •  A[ributes addClass() hasClass() •  Traversing toggleClass()  removeClass() •  Manipula)on val() •  CSS •  Events •  Eﬀects •  Ajax •  U)li)es

Overview of jQuery API •  Core <!DOCTYPE html><html><body> •  Selectors <input type="text" value="search" /> •  A[ributes <script src="jquery.js"></script> <script> •  Traversing jQuery('input').focus(function(){ •  Manipula)on var v = $(this).val(); $(this).val( v === this.defaultValue ? '' : v); •  CSS }).blur(function(){ •  Events var v = $(this).val(); •  Eﬀects $(this).val( v.match(/^s+$|^$/) ? this.defaultValue : v); •  Ajax }); •  U)li)es </script></body></html> h[p://jsbin.com/irico/edit#html

Overview of jQuery API •  Core add() eq() •  Selectors children() closest() filter() is() •  A[ributes contents() find() map() not() •  Traversing next() nextAll() slice() •  Manipula)on offsetParent() parent() •  CSS parents() prev() •  Events prevAll() siblings() •  Eﬀects •  Ajax andSelf() end() •  U)li)es

Overview of jQuery API •  Core <!DOCTYPE html> Selectors <html> •  <body> •  A[ributes <p>Make me bold!</p> •  Traversing <script src="http://ajax.googleapis.com/ ajax/libs/jquery/1.3.2/jquery.min.js" ></ •  Manipula)on script> <script> •  CSS jQuery(‘p’) •  Events .contents() .wrap(‘<strong></strong>’); •  Eﬀects </script> Ajax </body> •  </html> •  U)li)es h[p://jsbin.com/ituza/edit#html

Overview of jQuery API •  Core html() replaceWith() •  Selectors text() replaceAll() •  A[ributes append() appendTo() empty() remove() •  Traversing prepend() prependTo() clone() •  Manipula)on after() •  CSS before() insert() •  Events insertAfter() insertBefore •  Eﬀects •  Ajax warp() wrapAll() •  U)li)es wrapInner()

Overview of jQuery API •  Core <!DOCTYPE html> •  Selectors <html> <body> •  A[ributes <p>jQuery</p> •  Traversing <script src="jquery.js"></script> •  Manipula)on <script> •  CSS //alerts “jQuery” alert(jQuery(‘p’).text()); •  Events </script> •  Eﬀects </body> •  Ajax </html> •  U)li)es

Overview of jQuery API •  Core css() •  Selectors offset() •  A[ributes offsetParent() postion() •  Traversing scrollTop() scrollLeft() •  Manipula)on height() •  CSS width() innerHeight() •  Events innerWidth() outerHeight() •  Eﬀects outerWidth() •  Ajax •  U)li)es

Overview of jQuery API •  Core <!DOCTYPE html> Selectors <html> •  <head> <style>div{background-color:#ccc; width:100px; •  A[ributes margin:0 20px; float:left;}</style> </head> •  Traversing <body> Manipula)on <div></div> •  <div></div> <div></div> •  CSS <script src=“jquery.js" ></script> •  Events <script> •  Eﬀects jQuery('div') .height(jQuery(document).height()); •  Ajax </script> </body> •  U)li)es </html>

Overview of jQuery API •  Core ready() blur() Selectors change() •  bind() click() one() dbclick() •  A[ributes trigger() triggerHandler() error() focus() •  Traversing unbind() keydown() keypress() •  Manipula)on live() die() keyup() mousedown() •  CSS hover() mousenter() mouseleave() •  Events toggle() mouseout() mouseup() •  Eﬀects resize() scroll() Ajax select() •  submit() unload() •  U)li)es

Overview of jQuery API •  Core <!DOCTYPE html> •  Selectors <html> <body> •  A[ributes <button>click me</button> •  Traversing <script src="jquery.js"></script> •  Manipula)on <script> •  CSS jQuery(‘button’).bind("click", function(){ •  Events $(this).after(‘<button>click me</ button>’); •  Eﬀects }); •  Ajax </script> </body> •  U)li)es </html> h[p://jsbin.com/ogeni/edit#html

Overview of jQuery API •  Core <!DOCTYPE html> •  Selectors <html> <body> •  A[ributes <button>click me</button> •  Traversing <script src="jquery.js"></script> •  Manipula)on <script> •  CSS jQuery(‘button’).live("click", function(){ •  Events $(this).after(‘<button>click me</ button>’); •  Eﬀects }); •  Ajax </script> </body> •  U)li)es </html> h[p://jsbin.com/ogeni/edit#html

Overview of jQuery API •  Core show() •  Selectors hide() toggle() •  A[ributes slideDown() •  Traversing slideUp() slideToggle() •  Manipula)on fadeIn() •  CSS fadeOut() fadeTo() •  Events animate() •  Eﬀects stop() •  Ajax •  U)li)es

Overview of jQuery API •  Core <!DOCTYPE html><html><head> Selectors <style> •  div{background-color:#bca;width:100px;border: 1px solid green;} •  A[ributes </style> </head> •  Traversing <body> <div>jQuery animate() method</div> Manipula)on <script src="http://ajax.googleapis.com/ajax/ •  libs/jquery/1.3.2/jquery.min.js" ></script> <script> •  CSS jQuery(”div").animate({ •  Events width: ‘70%’, opacity: 0.4, •  Eﬀects marginLeft: ‘0.6in’, fontSize: ‘3em’, borderWidth: ‘10px’ •  Ajax }, 1500); •  U)li)es </script></body></html> h[p://jsbin.com/umacu/edit#html

Overview of jQuery API •  Core jQuery.ajax() jQuery.ajaxSetup() •  Selectors jQuery.get() jQuery.getJSON() serialize() serializeArray() •  A[ributes jQuery,getScript() jQuery.post() •  Traversing •  Manipula)on load() •  CSS ajaxCompete() ajaxError() •  Events ajaxSend() •  Eﬀects ajaxStart() ajaxStop() •  Ajax ajaxSuccess() •  U)li)es

Overview of jQuery API •  Core <!DOCTYPE html> <html> •  Selectors <body> <script src="h[p://ajax.googleapis.com/ajax/libs/jquery/ •  A[ributes 1.3.2/jquery.min.js" ></script> <script> •  Traversing jQuery.getJSON(‘://api.ﬂickr.com/services/feeds/ photos_public.gne? •  Manipula)on tags=jquery&tagmode=all&format=json&jsoncallback=?’, func)on(data){ •  CSS jQuery.each(data.items, func)on(i,item){ jQuery("<img/>") •  Events .a[r("src", item.media.m).appendTo("body"); if ( i == 30 ) return false; •  Eﬀects }); }); •  Ajax </script> </body> •  U)li)es </html> h[p://jsbin.com/erase/edit#html

Overview of jQuery API •  Core jQuery.support jQuery.trim() •  Selectors jQuery.boxModel jQuery.param() •  A[ributes jQuery.each(), jQuery.extend(), •  Traversing jQuery.grep(), •  Manipula)on jQuery.makeArray(), jQuery.map(), •  CSS jQuery.inArray(), jQuery.merge(), •  Events jQuery.unique() •  Eﬀects jQuery.isArray(), •  Ajax jQuery,isFunc)on() •  U)li)es

Overview of jQuery API •  Core jQuery.each(data.items, function(i,item){ •  Selectors jQuery("<img/>") .attr("src”,item.media.m).appendTo("body"); •  A[ributes if ( i == 30 ) return false; •  Traversing }); •  Manipula)on •  CSS •  Events •  Eﬀects •  Ajax •  U)li)es

$ alias <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <head> <script src=“jquery.js”></script> <script src=“jquery.js”></script> <script> <script> jQuery(‘body’).append(‘foo’); (function($){ $(‘body’).append(‘foo’); </script> })(jQuery); </head> <body> </script> </body> </html> <head> <body> </body> </html>

jQuery(document).ready() event <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <head> <script src=“jquery.js”></script> <script src=“jquery.js”></script> <script> <script> jQuery(‘body’).append(‘foo’); jQuery(document).ready(function(){ $(‘body’).append(‘foo’); </script> }); </body> </html> </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 “ﬁnd 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($){ $.fn.loveNotHate = function(){ return this.each(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($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); jQuery('p').loveNotHate({text:'love-love-love'}); </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($){ $.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); jQuery('p').loveNotHate({text:'love-love-love'}); </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($){ $.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); jQuery('p').loveNotHate({text:'love-love-love'}); </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($){ $.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); jQuery('p').loveNotHate({text:'love-love-love'}); </script></body></html>

Plugins are simple. Just follow the steps!

?

Devdays Seattle jQuery Intro for Developers

0 comments

Notes on slide 1

3 Favorites