Overview
• Who, what and why of jQuery • 5 core jQuery concepts • Overview of jQuery API • Building a plugin in 6 steps • jQuery News

Who's using jQuery

Who's using jQuery .

com boxee.com twitter.com tv.com stackoverflow.com overstock.com capitalone.com ibm.ly twitpic.gov microsoft.com netflix.com monster.com amazon.com bing.com/javascript/jquery .com dell.tv bit.com time.Who's using jQuery reddit.com wordpress.org http://trends.com whitehouse.com w3.builtwith.com espn.

com capitalone.com time.com monster.Who's using jQuery reddit.com tv.builtwith.tv bit.com amazon.com dell.com overstock.gov microsoft.com twitter.ly twitpic.com ibm.com w3.com wordpress.com espn.com http://trends.com bing.org boxee.com/javascript/jquery .com whitehouse.com netflix.com stackoverflow.

traversing. selecting. • JavaScript Events • Animations • Ajax interactions .g. creating. etc) (e.What exactly is jQuery jQuery is a JavaScript library! • Dealing with the DOM changing.

What does that mean? .

getElementsByTagName('tr').length. t++) { ! ! var rows = tables[t].getElementsByTagName('table').length.className += ' odd'. i < rows.className)) { rows[i]. t < tables. for (var i = 1. for (var t = 0. i += 2) { if (!/(^|s)odd(s|$)/. } } } .It means no more of this var tables = document.test(rows[i].

addClass('odd'). .jQuery simpli es jQuery('table tr:nth-child(odd)').

jQuery simpli es jQuery function jQuery('table tr:nth-child(odd)'). .addClass('odd').

jQuery simpli es jQuery function jQuery('table tr:nth-child(odd)').addClass('odd'). CSS expression .

addClass('odd'). CSS expression .jQuery simpli es jQuery function jQuery method jQuery('table tr:nth-child(odd)').

addClass('odd'). .jQuery simpli es jQuery('table tr:nth-child(odd)').

It really is the Write less. do more JavaScript library! .

11 platforms For both coder and designer (we don't discriminate) .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 active community Tested on 50 browsers.

11 platforms For both coder and designer (we don't discriminate) .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 active community Tested on 50 browsers.

Help! .

plugins.jquery.com api.com Twitter @jquery @jquerysites @jqueryui Blogs. development sprints Google Groups jquery-en jquery-dev jquery-ui-en jquery-ui-dev jquery-a11y Help! IRC channel irc.APIs docs.net/#jquery .jquery. screencasts.com visualjquery.freenode. tutorials.

com Twitter @jquery @jquerysites @jqueryui Blogs. development sprints Google Groups jquery-en jquery-dev jquery-ui-en jquery-ui-dev jquery-a11y Help! IRC channel irc.APIs docs.freenode.net/#jquery .jquery.com api.com visualjquery. screencasts. plugins. tutorials.jquery.

Concept 1: knowing the jQuery parameter types .

• CSS selectors & custom CSS expressions • HTML • DOM elements • A function (shortcut for DOM ready) .

jQuery(‘div’) & jQuery(‘:first’) • CSS selectors & custom CSS expressions • HTML • DOM elements • A function (shortcut for DOM ready) .

jQuery(‘<li><a href=”#”>link</a></li>’) & custom CSS expressions • CSS selectors jQuery(‘:first’) jQuery(‘div’) & • HTML • DOM elements • A function (shortcut for DOM ready) .

createElement(‘a’)) & custom CSS expressions • CSS selectors jQuery(‘:first’) jQuery(‘div’) & • HTML jQuery(‘<li><a href=”#”>link</a></li>’) • DOM elements • A function (shortcut for DOM ready) .jQuery(document) or jQuery(document.

jQuery(function(){}) = jQuery(document).createElement(‘a’)) • DOM elements • A function (shortcut for DOM ready) .ready(function(){}) & custom CSS expressions • CSS selectors jQuery(‘:first’) jQuery(‘div’) & • HTML jQuery(‘<li><a href=”#”>link</a></li>’) jQuery(document) or jQuery(document.

& custom CSS expressions • CSS selectors jQuery(‘:first’) jQuery(‘div’) & • HTML jQuery(‘<li><a href=”#”>link</a></li>’) jQuery(document) or jQuery(document.createElement(‘a’)) • DOM elements jQuery(function(){}) = jQuery(document).ready(function(){}) • A function (shortcut for DOM ready) .

do something .Concept 2: nd something.

<!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body> </html> .

js"></script> <script> jQuery('ul'). </script> </body> </html> .<!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.

js"></script> <script> jQuery('ul').<!DOCTYPE html> <html> <body> <ul id="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery. 'nav'). </script> </body> </html> .attr('id'.

js"></script> <script> jQuery('#nav 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.

}).attr(‘href’. ➥ ‘/’ + jQuery(this).js"></script> <script> jQuery('#nav a'). </script> </body> </html> .each(function(){ jQuery(this).<!DOCTYPE html> <html> <body> <ul id="nav"> <li><a href=”/home”>home</a></li> <li><a href=”/about”>about</a></li> </ul> <script src="jquery.text()).

Concept 3: create something. do something .

<!DOCTYPE html> <html> <body> <ul id='nav'> </ul> </body> </html> .

<!DOCTYPE html> <html> <body> <ul id='nav'> </ul> <script src=”jquery. jQuery(‘<li>about</li>’). </script> </body> </html> .js”></script> <script> jQuery(‘<li>home</li>’).

wrapInner(‘<a/>’).wrapInner(‘<a/>’).<!DOCTYPE html> <html> <body> <ul id='nav'> </ul> <script src=”jquery. jQuery(‘<li>about</li>’) ➥.js”></script> <script> jQuery(‘<li>home</li>’) ➥. </script> </body> </html> .

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

Concept 4: chaining & operating .

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

jQuery(‘#nav a’). </script> </body> </html> 1 .1 <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery.js”></script> <script> jQuery(‘ul’). jQuery(‘#nav li’). ‘nav’).text()). ‘/’+jQuery(this).attr(‘id’.attr(‘href’. }).addClass(‘item’).each(function () { jQuery(this).

js”></script> <script> jQuery(‘ul’).each(function () { jQuery(this). jQuery(‘#nav li’).1 <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery.attr(‘href’. ‘/’+jQuery(this).attr(‘id’. jQuery(‘#nav a’). }). ‘nav’).addClass(‘item’). </script> </body> </html> 1 2 2 .text()).

addClass(‘item’).each(function () { jQuery(this).js”></script> <script> jQuery(‘ul’).attr(‘id’.text()). </script> </body> </html> 1 3 2 2 3 . }). jQuery(‘#nav a’).1 <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery. jQuery(‘#nav li’).attr(‘href’. ‘nav’). ‘/’+jQuery(this).

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

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

Concept 5: understanding implicit iteration .

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

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

do something • Chaining & Operating • Understanding Implicit Iteration .Review • Knowing the jQuery parameter types • Find something. do something • Create something.

“What about the bling function?” .

jQuery == $ .

$ == jQuery .

$ is an alias to jQuery .

<!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.addClass(‘item’).js”></script> <script> jQuery(‘li’). </script> </body> </html> .

</script> </body> </html> <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.addClass(‘item’).jQuery(‘li’).js”></script> <script> .

js”></script> <script> </script> </body> </html> $(‘li’).<!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery. .addClass(‘item’).

<!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.addClass(‘item’).js”></script> <script> $(‘li’). </script> </body> </html> .

<!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> $(document).ready(function () { $(‘li’).addClass(‘item’); }); </script> </body> </html>

<!DOCTYPE html> <html> <head> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> $(document).ready(function () { $(‘li’).addClass(‘item’); }); </script> </body> </html>

<!DOCTYPE html> <html> <head> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> $(document).ready(function () { $(‘li’).addClass(‘item’); }); </script> </body> </html>

</script> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> </body> </html> .js”></script> <script> $(document). }).ready(function () { $(‘li’).addClass(‘item’).<!DOCTYPE html> <html> <head> <script src=”jquery.

<!DOCTYPE html> <html> <head> <script src=”jquery. </script> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> </body> </html> .js”></script> <script> $(document).ready(function () { $(‘li’). }).addClass(‘item’).

addClass(‘item’).<!DOCTYPE html> <html> <head> <script src=”jquery. </script> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> </body> </html> . }).js”></script> <script> $(function () { $(‘li’).

addClass(‘item’). }). </script> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> </body> </html> .js”></script> <script> jQuery(function ($) { $(‘li’).<!DOCTYPE html> <html> <head> <script src=”jquery.

jQuery API overview .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities .

fn.noConflict() .• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery() each() size() eq() get() index() length selector context data() removeData() queue() dequeue() jQuery.extend() jQuery.extend() jQuery.

fn.noConflict() .• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery() each() size() eq() get() index() length selector context data() removeData() queue() dequeue() jQuery.extend() jQuery.extend() jQuery.

</script> </body> </html> http://jsbin.get(0).js"> </script> <script> alert($('p').com/ibito/edit .• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>Element Node</p> <script src="jquery.nodeName).

js"> </script> <script> alert($('p').com/idiyi/edit .nodeName). </script> </body> </html> http://jsbin.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>Element Node</p> <script src="jquery.get(0). alert($('p')[0].nodeName).

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities .

contact’) .• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $(‘#nav li.

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $(‘#nav li.contact’) $(‘:visible’) .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $(‘#nav li.contact’) $(‘:visible’) $(‘:radio:enabled:checked’) .

contact’) $(‘:visible’) $(‘:radio:enabled:checked’) $(‘a[title]’) .• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $(‘#nav li.

contact’) $(‘:visible’) $(‘:radio:enabled:checked’) $(‘a[title]’) $(‘a[title][hash*=”foo”]’) .• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $(‘#nav li.

• • • • • • • • • •

Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities

$(‘#nav li.contact’) $(‘:visible’) $(‘:radio:enabled:checked’) $(‘a[title]’) $(‘a[title][hash*=”foo”]’) $(‘a:first[hash*=”foo”]’)

• • • • • • • • • •

Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities

$(‘#nav li.contact’) $(‘:visible’) $(‘:radio:enabled:checked’) $(‘a[title]’) $(‘a[title][hash*=”foo”]’) $(‘a:first[hash*=”foo”]’) $(‘.header, .footer’)

• • • • • • • • • •

Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities

$(‘#nav li.contact’) $(‘:visible’) $(‘:radio:enabled:checked’) $(‘a[title]’) $(‘a[title][hash*=”foo”]’) $(‘a:first[hash*=”foo”]’) $(‘.header, .footer’) $(‘.header, .footer’, ‘#main’)

‘#main’) http://codylindley.contact’) $(‘:visible’) $(‘:radio:enabled:checked’) $(‘a[title]’) $(‘a[title][hash*=”foo”]’) $(‘a:first[hash*=”foo”]’) $(‘.footer’) $(‘.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $(‘#nav li. .header. .header.com/jqueryselectors .footer’.

$(‘a[title][hash*=”foo”]’) ilen ail s f CSS oes! $(‘a:first[hash*=”foo”]’) SS d ike C Events just l Effects Ajax Utilities $(‘.header.com/jqueryselectors . ‘#main’) http://codylindley.header. .contact’) $(‘:visible’) $(‘:radio:enabled:checked’) tors Traversing elec $(‘a[title]’) ry s Que j Manipulation tly. .• • • • • • • • • • Core Selectors Attributes $(‘#nav li.footer’) $(‘.footer’.

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities attr() removeAttr() addClass() hasClass() toggleClass() removeClass() val() .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities attr() removeAttr() addClass() hasClass() toggleClass() removeClass() val() .

</script></body></html> http://jsbin.defaultValue ).js"></script> <script> $('input').val().val().val( $.focus(function(){ var v = $(this).com/akeqo3/edit . $(this).defaultValue ? '' : v ).• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html><html><body> <input type="text" value="search"> <script src="jquery.val( v === this. }).trim(v) ? v : this. $(this). }).blur(function(){ var v = $(this).

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities add() children() closest() contents() find() next() nextAll() offsetParent() parent() parents() prev() prevAll() siblings() andSelf() end() eq() filter() is() map() not() slice() .

• Core • Selectors Attributes • Searches down • Traversing • Manipulation • CSS • Events • Effects • Ajax • Utilities add() children() closest() contents() find() next() nextAll() offsetParent() parent() parents() prev() prevAll() siblings() andSelf() end() eq() filter() is() map() not() slice() .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities add() children() Filters across closest() contents() find() next() nextAll() offsetParent() parent() parents() prev() prevAll() siblings() andSelf() end() eq() filter() is() map() not() slice() .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities add() children() closest() contents() find() next() nextAll() offsetParent() parent() parents() prev() prevAll() siblings() andSelf() end() eq() filter() is() map() not() slice() .

</script> </body> </html> http://jsbin.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>Make me bold!</p> <script src="jquery.contents() .com/owesu/edit .js"> </script> <script> $('p') .wrap('<strong />').

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities html() text() append() appendTo() prepend() prependTo() after() before() insert() insertAfter() insertBefore wrap() wrapAll() wrapInner() replaceWith() replaceAll() empty() remove() clone() .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities html() text() append() appendTo() prepend() prependTo() after() before() insert() insertAfter() insertBefore wrap() wrapAll() wrapInner() replaceWith() replaceAll() empty() remove() clone() .

com/inulu/edit .text()).js"> </script> <script> alert($(‘p’).• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>jQuery’s <em>easy!</em></p> <script src="jquery. </script> </body> </html> http://jsbin.

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities css() offset() offsetParent() position() scrollTop() scrollLeft() height() width() innerHeight() innerWidth() outerHeight() outerWidth() .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities css() offset() offsetParent() position() scrollTop() scrollLeft() height() width() innerHeight() innerWidth() outerHeight() outerWidth() .

height()).com/erire3/edit .height($(document). margin: 0 20px. } </style> </head> <body> <div></div> <div></div> <div></div> <script src=“jquery. </script> </body> </html> http://jsbin.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <head> <style> div { background: #ccc.js"> </script> <script> $('div'). float: left. width: 100px.

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities ready() blur() change() bind() click() one() dbclick() trigger() focus() triggerHandler() keydown() unbind() keypress() keyup() live() mousedown() die() mousenter() mouseleave() hover() mouseout() toggle() mouseup() resize() load() scroll() unload() select() error() submit() .

and doesn’t chain! • Traversing • Manipulation • CSS • Events • Effects • Ajax • Utilities ready() blur() change() bind() click() one() dbclick() trigger() focus() triggerHandler() keydown() unbind() keypress() keyup() live() mousedown() die() mousenter() mouseleave() hover() mouseout() toggle() mouseup() resize() load() scroll() unload() select() error() submit() .• Core • Selectors Attributes • Acts on first.

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities ready() blur() change() IE fires on blur bind() click() one() dbclick() trigger() focus() triggerHandler() keydown() unbind() keypress() keyup() live() mousedown() die() mousenter() mouseleave() hover() mouseout() toggle() mouseup() resize() load() scroll() unload() select() error() submit() .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities ready() blur() change() bind() click() one() dbclick() trigger() focus() triggerHandler() keydown() unbind() keypress() keyup() live() mousedown() die() mousenter() mouseleave() hover() mouseout() toggle() mouseup() resize() load() scroll() unload() select() error() submit() .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>1. function(){ $(this). click</p> <script src="jquery. }).bind(‘click’.after(‘<p>clicked</p>’).com/ogahu/edit .js"></script> <script> $(‘p’). </script> </body> </html> http://jsbin. click</p> <p>2.

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html> <html> <body> <p>1.text()+‘ clicked</p>’).js"></script> <script> $(‘p’).live(‘click’.com/ihalu/edit . click</p> <p>2. }).after(‘<p>’ + ➥ $(this). </script> </body> </html> http://jsbin. function(){ $(this). click</p> <script src="jquery.

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities show() hide() toggle() slideDown() slideUp() slideToggle() fadeIn() fadeOut() fadeTo() animate() stop() .

• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities show() hide() toggle() slideDown() slideUp() slideToggle() fadeIn() fadeOut() fadeTo() animate() stop() .

} </style> </head> <body> <div id="block">Hello!</div> <script src="jquery.js"></script> <script> $(‘#block’). width:100px. ! opacity: 0. ! fontSize: ‘3em’.animate({ ! width: ‘70%’. ! borderWidth: ‘10px’ }. ! marginLeft: ‘0.6in’.com/oroto/edit </script></body></html> . border:1px solid green. 1500).4.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html><html><head> <style> div {background:#bca. http://jsbin.

get() $.getScript() $.ajaxSetup() load() ajaxCompete() ajaxError() ajaxSend() ajaxStart() ajaxStop() ajaxSuccess() serialize() serializeArray() .getJSON() $.post() $.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $.ajax() $.

post() $.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $.ajax() $.get() $.ajaxSetup() load() ajaxCompete() ajaxError() ajaxSend() ajaxStart() ajaxStop() ajaxSuccess() serialize() serializeArray() .getJSON() $.getScript() $.

if ( i == 30 ) return false. </script></body></html> http://jsbin.text).function(i.com/acisi/edit .getJSON("http://twitter.com/ statuses/user_timeline.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities <!DOCTYPE html><html><body> <script src="jquery.tweet){ $('<p/>'). }).json? screen_name=rem&callback=?".each(data. function(data){ $.html (tweet. }).js"> </script> <script> $.appendTo('body').

browser $.merge() $.isArray() $.param() .trim() $.grep() $.extend() $.each() $.support $.makeArray() $.isFunction() $.map() $.boxModel $.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $.unique() $.inArray() $.

each() $.extend() $.inArray() $.unique() $.isFunction() $.• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $.boxModel $.makeArray() $.isArray() $.map() $.support $.merge() $.param() .trim() $.browser $.grep() $.

appendTo('body').com/acisi/edit .• • • • • • • • • • Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities $. if ( i == 30 ) { return false.text) . } }). function(i.html(tweet. tweet){ $('<p />') . http://jsbin.each(data.

Plugins .

What’s a plugin? A plugin is nothing more than a custom jQuery method created to extend the functionality of the jQuery object $(‘ul’).myPlugin() .

Why create a plugin? The “do something” isn’t available in jQuery .

Why create a plugin? Roll your own “do something” with a plugin! .

A plugin in 6 steps .

Step 1: create a private scope for $ alias .

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

Step 2: attach plugin to fn alias (aka prototype) .

text().<!DOCTYPE html><html><body> <script src=”jquery. </script></body></html> .text( $(this).js”></script> <script> (function ($) { $.replace(/hate/g.notHate = function () { $(this). // end of plugin })(jQuery). }. ‘love’) ).fn.

notHate = function () { $(this).text( $(this).notHate().fn. </script></body></html> . $(‘p’).<!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $. ‘love’) ).text().replace(/hate/g. }. // end of plugin })(jQuery).

Step 3: add implicit iteration .

notHate().js”></script> <script> (function ($) { $. </script></body></html> . }. $(‘p’).text( $(this).notHate = function () { this.each(function () { $(this). // end of plugin })(jQuery).replace(/hate/g.<!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery. ‘love’) ).text(). }).fn.

Step 4: enable chaining

<!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); }); }; // end of plugin })(jQuery); $(‘p’).notHate().hide(); </script></body></html>

Step 5: add default options

}).each(function () { $(this).replace(/hate/g.defaults.js”></script> <script> (function ($) { $. </script></body></html> .defaults = {text:‘love’}.fn. }.text().<!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.text( $(this).notHate.notHate = function () { return this.text) ). ➥ $.notHate().fn.fn. // end of plugin $. })(jQuery).notHate. $(‘p’).

Step 6: add custom options .

<!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.replace(/hate/g. }).fn.defaults. // end of plugin $.notHate. $(‘p’).notHate.text().fn.text( $(this). }.js”></script> <script> (function ($) { $. </script></body></html> .defaults = {text:‘love’}.text) ). })(jQuery). ➥ $.fn.notHate({text: ‘love-love-love’}).each(function () { $(this).notHate = function () { return this.

}).defaults = {text:‘love’}.notHate = function (options) { return this.text) ).notHate.text().each(function () { $(this).js”></script> <script> (function ($) { $.notHate.notHate({text: ‘love-love-love’}).fn.fn.<!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.replace(/hate/g.text( $(this).defaults. })(jQuery). // end of plugin $.fn. ➥ $. </script></body></html> . $(‘p’). }.

each(function () { $(this). })(jQuery).defaults = {text:‘love’}. return this.<!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.text) ).notHate = function (options) { var settings = $. ➥ $. }).notHate.replace(/hate/g.fn. </script></body></html> .fn. options).defaults.text( $(this).fn. // end of plugin $.extend({}.defaults. $(‘p’).notHate. }.notHate.notHate({text: ‘love-love-love’}). ➥ $.fn.js”></script> <script> (function ($) { $.text().

fn.http://jsbin. ➥ settings. }. options).defaults = {text:‘love’}.notHate.defaults.notHate.text().fn.notHate({text: ‘love-love-love’}). ➥ $.extend({}. $(‘p’). return this. })(jQuery). }).text) ).replace(/hate/g.fn. // end of plugin $.com/ifuga/edit <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.text( $(this).js”></script> <script> (function ($) { $.notHate = function (options) { var settings = $.each(function () { $(this). </script></body></html> .

.

. just follow those steps.Plugins are simple.

Boston.News • • • • • Four conferences next year: London. San Francisco and online New plugin site jQuery Forum (moving from Google Groups) jQuery.org & Foundation (Software Freedom Law Centre) Infrastructure upgrade .

Remy Sharp @rem jQuery team member Co-author of O'Reilly jQuery Cookbook (due November 20th) jqueryfordesigners.com remysharp.com Special thanks to Cody Lindley .

com remysharp.com Questions Special thanks to Cody Lindley ? .Remy Sharp @rem jQuery team member Co-author of O'Reilly jQuery Cookbook (due November 20th) jqueryfordesigners.

Sign up to vote on this title
UsefulNot useful