+ All Categories
Home > Technology > Devdays Seattle jQuery Intro for Developers

Devdays Seattle jQuery Intro for Developers

Date post: 01-Sep-2014
Category:
Upload: cody-lindley
View: 4,994 times
Download: 0 times
Share this document with a friend
Description:
jQuery is a library that takes the pain out of DOM scripting,JavaScript events, DHTML-like effects, and AJAX. It allows developersto get back to the heart of problem-solving by greatly reducingcross-browser inconsistencies and greatly increasing traditionalJavaScript development efficiency. This presentation will take youthrough the critical concepts and features of using jQuery as adevelopment tool.
96
Introduc)on for Developers
Transcript
Page 1: Devdays Seattle jQuery Intro for Developers

Introduc)on for Developers 

Page 2: Devdays Seattle jQuery Intro 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) 

Page 3: Devdays Seattle jQuery Intro for Developers

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 

Page 4: Devdays Seattle jQuery Intro for Developers

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 

Page 5: Devdays Seattle jQuery Intro for Developers

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 

Page 6: Devdays Seattle jQuery Intro for Developers

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 

Page 7: Devdays Seattle jQuery Intro for Developers

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 

Page 8: Devdays Seattle jQuery Intro for Developers

What does that mean? 

Page 9: Devdays Seattle jQuery Intro for Developers

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 

Page 10: Devdays Seattle jQuery Intro for Developers

Using jQuery we can do this 

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);

Page 11: Devdays Seattle jQuery Intro for Developers

Using jQuery we can do this 

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);

jQuery func)on 

Page 12: Devdays Seattle jQuery Intro for Developers

Using jQuery we can do this 

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);

jQuery func)on 

jQuery Selector (CSS expression) 

Page 13: Devdays Seattle jQuery Intro for Developers

Using jQuery we can do this 

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);

jQuery func)on 

jQuery Selector (CSS expression) 

jQuery Wrapper Set 

Page 14: Devdays Seattle jQuery Intro for Developers

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 

Page 15: Devdays Seattle jQuery Intro for Developers

It really is the  

“write less, do more”  

JavaScript Library! 

Page 16: Devdays Seattle jQuery Intro for Developers

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) 

Page 17: Devdays Seattle jQuery Intro for Developers

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) 

Page 18: Devdays Seattle jQuery Intro for Developers

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 

Page 19: Devdays Seattle jQuery Intro for Developers

Ok, lets get to it! 

Page 20: Devdays Seattle jQuery Intro for Developers

Concept 1. Find something, do something 

<!DOCTYPE html> <html> <body>

<ul> <li><a>home</a></li> <li><a>about</a></li>

</ul> </body> </html>

Page 21: Devdays Seattle jQuery Intro for Developers

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>

Page 22: Devdays Seattle jQuery Intro for Developers

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>

Page 23: Devdays Seattle jQuery Intro for Developers

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>

Page 24: Devdays Seattle jQuery Intro for Developers

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>

Page 25: Devdays Seattle jQuery Intro for Developers

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>

Page 26: Devdays Seattle jQuery Intro for Developers

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>

Page 27: Devdays Seattle jQuery Intro for Developers

Concept 2. Create something, do something 

<!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> </script> </body> </html>

Page 28: Devdays Seattle jQuery Intro for Developers

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>

Page 29: Devdays Seattle jQuery Intro for Developers

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>

Page 30: Devdays Seattle jQuery Intro for Developers

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>

Page 31: Devdays Seattle jQuery Intro for Developers

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>

Page 32: Devdays Seattle jQuery Intro for Developers

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>

Page 33: Devdays Seattle jQuery Intro for Developers

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>

Page 34: Devdays Seattle jQuery Intro for Developers

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>

Page 35: Devdays Seattle jQuery Intro for Developers

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>

Page 36: Devdays Seattle jQuery Intro for Developers

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>

Page 37: Devdays Seattle jQuery Intro for Developers

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]’) 

Page 38: Devdays Seattle jQuery Intro for Developers

Review 

•  Find something, do something •  Create something, do something 

•  Chaining •  Implicit Itera)on 

•  jQuery() parameters 

Page 39: Devdays Seattle jQuery Intro for Developers

Overview of jQuery API 

•  Core •  Selectors •  A[ributes •  Traversing •  Manipula)on •  CSS •  Events •  Effects •  Ajax •  U)li)es 

Page 40: Devdays Seattle jQuery Intro for Developers

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()

Page 41: Devdays Seattle jQuery Intro for Developers

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()

Page 42: Devdays Seattle jQuery Intro for Developers

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 

Page 43: Devdays Seattle jQuery Intro for Developers

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>

Page 44: Devdays Seattle jQuery Intro for Developers

Overview of jQuery API 

jQuery(‘:visible’) •  Core •  Selectors •  A[ributes •  Traversing •  Manipula)on •  CSS •  Events •  Effects •  Ajax •  U)li)es 

Page 45: Devdays Seattle jQuery Intro for Developers

Overview of jQuery API 

jQuery(‘:visible’)

jQuery(‘:radio:enabled:checked’)

•  Core •  Selectors •  A[ributes •  Traversing •  Manipula)on •  CSS •  Events •  Effects •  Ajax •  U)li)es 

Page 46: Devdays Seattle jQuery Intro for Developers

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 

Page 47: Devdays Seattle jQuery Intro for Developers

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 

Page 48: Devdays Seattle jQuery Intro for Developers

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 

Page 49: Devdays Seattle jQuery Intro for Developers

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 

Page 50: Devdays Seattle jQuery Intro for Developers

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 

Page 51: Devdays Seattle jQuery Intro for Developers

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 

Page 52: Devdays Seattle jQuery Intro for Developers

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 

Page 53: Devdays Seattle jQuery Intro for Developers

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 

Page 54: Devdays Seattle jQuery Intro for Developers

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 

Page 55: Devdays Seattle jQuery Intro for Developers

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()

Page 56: Devdays Seattle jQuery Intro for Developers

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()

Page 57: Devdays Seattle jQuery Intro for Developers

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 

Page 58: Devdays Seattle jQuery Intro for Developers

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()

Page 59: Devdays Seattle jQuery Intro for Developers

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()

Page 60: Devdays Seattle jQuery Intro for Developers

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>

Page 61: Devdays Seattle jQuery Intro for Developers

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()

Page 62: Devdays Seattle jQuery Intro for Developers

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()

Page 63: Devdays Seattle jQuery Intro for Developers

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>

Page 64: Devdays Seattle jQuery Intro for Developers

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()

Page 65: Devdays Seattle jQuery Intro for Developers

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()

Page 66: Devdays Seattle jQuery Intro for Developers

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 

Page 67: Devdays Seattle jQuery Intro for Developers

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 

Page 68: Devdays Seattle jQuery Intro for Developers

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()

Page 69: Devdays Seattle jQuery Intro for Developers

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()

Page 70: Devdays Seattle jQuery Intro for Developers

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 

Page 71: Devdays Seattle jQuery Intro for Developers

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() 

Page 72: Devdays Seattle jQuery Intro for Developers

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() 

Page 73: Devdays Seattle jQuery Intro for Developers

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 

Page 74: Devdays Seattle jQuery Intro for Developers

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() 

Page 75: Devdays Seattle jQuery Intro for Developers

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() 

Page 76: Devdays Seattle jQuery Intro for Developers

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;

});

Page 77: Devdays Seattle jQuery Intro for Developers

$ 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>

Page 78: Devdays Seattle jQuery Intro for Developers

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>

Page 79: Devdays Seattle jQuery Intro for Developers

Plugins! 

Page 80: Devdays Seattle jQuery Intro for Developers

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() 

Page 81: Devdays Seattle jQuery Intro for Developers

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! 

Page 82: Devdays Seattle jQuery Intro for Developers

A jQuery plugin in 6 steps 

h[p://jsbin.com/eheku/edit#html 

Page 83: Devdays Seattle jQuery Intro for Developers

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>

Page 84: Devdays Seattle jQuery Intro for Developers

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>

Page 85: Devdays Seattle jQuery Intro for Developers

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>

Page 86: Devdays Seattle jQuery Intro for Developers

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>

Page 87: Devdays Seattle jQuery Intro for Developers

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>

Page 88: Devdays Seattle jQuery Intro for Developers

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>

Page 89: Devdays Seattle jQuery Intro for Developers

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>

Page 90: Devdays Seattle jQuery Intro for Developers

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>

Page 91: Devdays Seattle jQuery Intro for Developers

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>

Page 92: Devdays Seattle jQuery Intro for Developers

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>

Page 93: Devdays Seattle jQuery Intro for Developers

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>

Page 94: Devdays Seattle jQuery Intro for Developers

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>

Page 95: Devdays Seattle jQuery Intro for Developers

Plugins are simple.   Just follow the steps! 

Page 96: Devdays Seattle jQuery Intro for Developers

?


Recommended