Post on 01-Sep-2014
description
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
h[p://trends.builtwith.com/javascript/JQuery
reddit.com espn.com ibm.com
stackoverflow.com kickball.com boxee.tv bit.ly
twitpic.com
whitehouse.gov wikipedia.org microso_.com amazon.com netflix.com bing.com
monster.com tv.com
overstock.com )me.com
capitalone.com usatoday.com ning.com
wordpress.com dell.com
twi[er.com
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
reddit.com espn.com ibm.com
stackoverflow.com kickball.com boxee.tv bit.ly
twitpic.com
whitehouse.gov wikipedia.org microso_.com amazon.com netflix.com bing.com
monster.com tv.com
overstock.com )me.com
capitalone.com usatoday.com ning.com
wordpress.com dell.com
twi[er.com
What exactly is jQuery (if you don’t already know)
• jQuery is a JavaScript Library (19kb Minified 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 func)on
jQuery Selector (CSS expression)
Using jQuery we can do this
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQuery func)on
jQuery Selector (CSS expression)
jQuery Wrapper Set
Using jQuery we can do this
jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
jQuery func)on
jQuery Selector (CSS expression)
jQuery Method jQuery Wrapper Set
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 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 • Effects • Ajax • U)li)es
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
jQuery()
each() size() length selector context eq() get() index()
data() removeData() queue() dequeue()
jQuery.fn.extend() jQuery.extend()
jQuery.noConflict()
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
jQuery()
each() size() length selector context eq() get() index()
data() removeData() queue() dequeue()
jQuery.fn.extend() jQuery.extend()
jQuery.noConflict()
Overview of jQuery API
• 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(jQuery(‘p’).get(0).nodeType); </script>
</body> </html>
h[p://jsbin.com/aneki/edit#html
Overview of jQuery API
• 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(jQuery(‘p’).get(0).nodeType); alert(jQuery(‘p’)[0].nodeType);
</script>
</body> </html>
Overview of jQuery API
jQuery(‘:visible’) • Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
jQuery(‘:visible’)
jQuery(‘:radio:enabled:checked’)
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
jQuery(‘:visible’)
jQuery(‘:radio:enabled:checked’)
jQuery(‘a[title]’)
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
jQuery(‘:visible’)
jQuery(‘:radio:enabled:checked’)
jQuery(‘a[title]’)
jQuery(‘a[title][href*=‘foo’]’)
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
jQuery(‘:visible’)
jQuery(‘:radio:enabled:checked’)
jQuery(‘a[title]’)
jQuery(‘a[title][href*=‘foo’]’)
jQuery(‘a:first[href*=‘foo’]’)
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
jQuery(‘:visible’)
jQuery(‘:radio:enabled:checked’)
jQuery(‘a[title]’)
jQuery(‘a[title][href*=‘foo’]’)
jQuery(‘a:first[href*=‘foo’]’)
jQuery(‘#header,#footer’)
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
jQuery(‘:visible’)
jQuery(‘:radio:enabled:checked’)
jQuery(‘a[title]’)
jQuery(‘a[title][href*=‘foo’]’)
jQuery(‘a:first[href*=‘foo’]’)
jQuery(‘#header,#footer’)
jQuery(‘#mainContent,#sidebar’,’#content’)
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
jQuery(‘:visible’)
jQuery(‘:radio:enabled:checked’)
jQuery(‘a[title]’)
jQuery(‘a[title][href*=‘foo’]’)
jQuery(‘a:first[href*=‘foo’]’)
jQuery(‘#header,#footer’)
jQuery(‘#mainContent,#sidebar’,’#content’)
h[p://codylindley.com/jqueryselectors/
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
attr() removeAttr()
addClass() hasClass() toggleClass()removeClass()
val()
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
attr() removeAttr()
addClass() hasClass() toggleClass()removeClass()
val()
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
Overview of jQuery API
<!DOCTYPE html><html><body>
<input type="text" value="search" />
<script src="jquery.js"></script> <script>
jQuery('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
Overview of jQuery API
• 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()
Overview of jQuery API
• 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()
Overview of jQuery API
• 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>
jQuery(‘p’) .contents() .wrap(‘<strong></strong>’);
</script> </body> </html>
h[p://jsbin.com/ituza/edit#html
Overview of jQuery API
• 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()
Overview of jQuery API
• 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()
Overview of jQuery API
• 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>
//alerts “jQuery” alert(jQuery(‘p’).text());
</script> </body> </html>
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
css()
offset() offsetParent() postion() scrollTop() scrollLeft()
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
css()
offset() offsetParent() postion() scrollTop() scrollLeft()
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
Overview of jQuery API
• 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>
jQuery('div') .height(jQuery(document).height());
</script> </body> </html>
Overview of jQuery API
• 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()
Overview of jQuery API
• 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()
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
<!DOCTYPE html> <html> <body>
<button>click me</button>
<script src="jquery.js"></script> <script>
jQuery(‘button’).bind("click", function(){
$(this).after(‘<button>click me</button>’); });
</script> </body> </html>
h[p://jsbin.com/ogeni/edit#html
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
<!DOCTYPE html> <html> <body>
<button>click me</button>
<script src="jquery.js"></script> <script>
jQuery(‘button’).live("click", function(){
$(this).after(‘<button>click me</button>’); });
</script> </body> </html>
h[p://jsbin.com/ogeni/edit#html
Overview of jQuery API
• 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()
Overview of jQuery API
• 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()
Overview of jQuery API
• 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>jQuery animate() method</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script>
jQuery(”div").animate({ width: ‘70%’, opacity: 0.4, marginLeft: ‘0.6in’, fontSize: ‘3em’, borderWidth: ‘10px’
}, 1500);
</script></body></html> h[p://jsbin.com/umacu/edit#html
Overview of jQuery API
• 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()
Overview of jQuery API
• 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()
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
<!DOCTYPE html> <html> <body> <script src="h[p://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script> jQuery.getJSON(‘://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?’, func)on(data){ jQuery.each(data.items, func)on(i,item){ jQuery("<img/>")
.a[r("src", item.media.m).appendTo("body"); if ( i == 30 ) return false; }); }); </script> </body> </html> h[p://jsbin.com/erase/edit#html
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
jQuery.support jQuery.boxModel
jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()
jQuery.isArray(), jQuery,isFunc)on()
jQuery.trim()
jQuery.param()
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
jQuery.support jQuery.boxModel
jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()
jQuery.isArray(), jQuery,isFunc)on()
jQuery.trim()
jQuery.param()
Overview of jQuery API
• Core • Selectors • A[ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
jQuery.each(data.items, function(i,item){
jQuery("<img/>") .attr("src”,item.media.m).appendTo("body");
if ( i == 30 ) return false;
});
$ alias
<!DOCTYPE html> <html> <head>
<script src=“jquery.js”></script> <script>
jQuery(‘body’).append(‘foo’);
</script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head>
<script src=“jquery.js”></script> <script>
(function($){ $(‘body’).append(‘foo’);
})(jQuery);
</script>
<head> <body> </body> </html>
jQuery(document).ready() event
<!DOCTYPE html> <html> <body>
<script src=“jquery.js”></script> <script>
jQuery(‘body’).append(‘foo’);
</script> </body> </html>
<!DOCTYPE html> <html> <head>
<script src=“jquery.js”></script> <script>
jQuery(document).ready(function(){ $(‘body’).append(‘foo’);
});
</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 “find 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 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 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 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!
?