Devdays Seattle jQuery Intro for Developers
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Devdays Seattle jQuery Intro for Developers

on

  • 5,049 views

jQuery is a library that takes the pain out of DOM scripting,...

jQuery is a library that takes the pain out of DOM scripting,
JavaScript events, DHTML-like effects, and AJAX. It allows developers
to get back to the heart of problem-solving by greatly reducing
cross-browser inconsistencies and greatly increasing traditional
JavaScript development efficiency. This presentation will take you
through the critical concepts and features of using jQuery as a
development tool.

Statistics

Views

Total Views
5,049
Views on SlideShare
4,933
Embed Views
116

Actions

Likes
7
Downloads
211
Comments
1

3 Embeds 116

http://www.ryancdavidson.com 94
http://ryancdavidson.com 12
http://www.slideshare.net 10

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • i do working now about jquery
    first time this work for me.
    jquery is funny...
    jquey has story....just writing story by jquery.
    i can show result of story....
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • How many people here use jQuery? Show of Hands?How many people here have created a plugin?
  • Quick overview of me
  • Very significant when you consider how many javascript solutions there are out thereAccording to, netcraft.com 226 billion
  • There are 10 thousand + questions tag at stackoverflow,jQuery 9th highest used tag. (higher than iphone)
  • It simplifies…
  • Will add a class to each odd table row inside of each table in an html pagelead in: using jQuery…
  • Exchange 9 lines of code for a single jQuery statementLets examine this in detail
  • With a context, (ietr’s) we can invoke a methods against those tr’s
  • It allows you to work faster. It abstracts the headaches common browser development.
  • Any javascript solution worth anything does the top two, these last four really set jQuery apart
  • Any javascript solution worth anything does the top two, these last four really set jQuery apart
  • With the who, what, and why out of the way
  • Call out DTD
  • Call out wrapper set using jQuery function
  • Call out implicit iteration
  • Repetition is the faster way to learn
  • Point out that the html does not have to be in the actual DOM to operate on it
  • Point out that the html does not have to be in the actual DOM to operate on it
  • Made up of parts from the first 4 conceptsMake sure we understand all the functionality the jquery function provides us
  • Destructive method break the chain
  • Discuss the secret sauce here…

Devdays Seattle jQuery Intro for Developers Presentation Transcript

  • 1. Introduc)on for Developers 
  • 2. 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) 
  • 3. 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 
  • 4. 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 
  • 5. 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  stackoverflow.com   amazon.com   usatoday.com  kickball.com   netflix.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 
  • 6. 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  stackoverflow.com   amazon.com   usatoday.com  kickball.com   netflix.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 
  • 7. 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 
  • 8. What does that mean? 
  • 9. 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 
  • 10. Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
  • 11. Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery func)on 
  • 12. Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery Selector (CSS expression)  jQuery func)on 
  • 13. Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery Selector (CSS expression)  jQuery func)on  jQuery Wrapper Set 
  • 14. 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 
  • 15. It really is the   “write less, do more”   JavaScript Library! 
  • 16. 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) 
  • 17. 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) 
  • 18. 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 
  • 19. Ok, lets get to it! 
  • 20. Concept 1. Find something, do something  <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body> </html>
  • 21. 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>
  • 22. 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>
  • 23. 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>
  • 24. 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>
  • 25. 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>
  • 26. 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>
  • 27. Concept 2. Create something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> </script> </body> </html>
  • 28. 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>
  • 29. 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>
  • 30. 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>
  • 31. 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>
  • 32. 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>
  • 33. 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>
  • 34. 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>
  • 35. 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>
  • 36. 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>
  • 37. 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]’) 
  • 38. Review  •  Find something, do something  •  Create something, do something  •  Chaining  •  Implicit Itera)on  •  jQuery() parameters 
  • 39. Overview of jQuery API  •  Core  •  Selectors  •  A[ributes  •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • 40. 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() •  Effects  dequeue() Ajax  jQuery.fn.extend() •  jQuery.extend() •  U)li)es  jQuery.noConflict()
  • 41. 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() •  Effects  dequeue() Ajax  jQuery.fn.extend() •  jQuery.extend() •  U)li)es  jQuery.noConflict()
  • 42. 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> •  Effects  •  Ajax  •  U)li)es  h[p://jsbin.com/aneki/edit#html 
  • 43. 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> •  Effects  •  Ajax  •  U)li)es 
  • 44. Overview of jQuery API  •  Core  jQuery(‘:visible’) •  Selectors  •  A[ributes  •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • 45. Overview of jQuery API  •  Core  jQuery(‘:visible’) •  Selectors  jQuery(‘:radio:enabled:checked’) •  A[ributes  •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • 46. Overview of jQuery API  •  Core  jQuery(‘:visible’) •  Selectors  jQuery(‘:radio:enabled:checked’) •  A[ributes  jQuery(‘a[title]’) •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • 47. 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  •  Effects  •  Ajax  •  U)li)es 
  • 48. 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  •  Effects  •  Ajax  •  U)li)es 
  • 49. 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  •  Effects  •  Ajax  •  U)li)es 
  • 50. 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’) •  Effects  •  Ajax  •  U)li)es 
  • 51. 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’) •  Effects  h[p://codylindley.com/jqueryselectors/  •  Ajax  •  U)li)es 
  • 52. Overview of jQuery API  •  Core  attr() •  Selectors  removeAttr() •  A[ributes  addClass() hasClass() •  Traversing  toggleClass()
 removeClass() •  Manipula)on  val() •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • 53. Overview of jQuery API  •  Core  attr() •  Selectors  removeAttr() •  A[ributes  addClass() hasClass() •  Traversing  toggleClass()
 removeClass() •  Manipula)on  val() •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • 54. 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(); •  Effects  $(this).val( v.match(/^s+$|^$/) ? this.defaultValue : v); •  Ajax  }); •  U)li)es  </script></body></html> h[p://jsbin.com/irico/edit#html 
  • 55. 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() •  Effects  •  Ajax  andSelf() end() •  U)li)es 
  • 56. 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() •  Effects  •  Ajax  andSelf() end() •  U)li)es 
  • 57. 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>’); •  Effects  </script> Ajax  </body> •  </html> •  U)li)es  h[p://jsbin.com/ituza/edit#html 
  • 58. 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 •  Effects  •  Ajax  warp() wrapAll() •  U)li)es  wrapInner()
  • 59. 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 •  Effects  •  Ajax  warp() wrapAll() •  U)li)es  wrapInner()
  • 60. 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> •  Effects  </body> •  Ajax  </html> •  U)li)es 
  • 61. Overview of jQuery API  •  Core  css() •  Selectors  offset() •  A[ributes  offsetParent() postion() •  Traversing  scrollTop() scrollLeft() •  Manipula)on  height() •  CSS  width() innerHeight() •  Events  innerWidth() outerHeight() •  Effects  outerWidth() •  Ajax  •  U)li)es 
  • 62. Overview of jQuery API  •  Core  css() •  Selectors  offset() •  A[ributes  offsetParent() postion() •  Traversing  scrollTop() scrollLeft() •  Manipula)on  height() •  CSS  width() innerHeight() •  Events  innerWidth() outerHeight() •  Effects  outerWidth() •  Ajax  •  U)li)es 
  • 63. 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> •  Effects  jQuery('div') .height(jQuery(document).height()); •  Ajax  </script> </body> •  U)li)es  </html>
  • 64. 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() •  Effects  resize() scroll() Ajax  select() •  submit() unload() •  U)li)es 
  • 65. 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() •  Effects  resize() scroll() Ajax  select() •  submit() unload() •  U)li)es 
  • 66. 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>’); •  Effects  }); •  Ajax  </script> </body> •  U)li)es  </html> h[p://jsbin.com/ogeni/edit#html 
  • 67. 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>’); •  Effects  }); •  Ajax  </script> </body> •  U)li)es  </html> h[p://jsbin.com/ogeni/edit#html 
  • 68. Overview of jQuery API  •  Core  show() •  Selectors  hide() toggle() •  A[ributes  slideDown() •  Traversing  slideUp() slideToggle() •  Manipula)on  fadeIn() •  CSS  fadeOut() fadeTo() •  Events  animate() •  Effects  stop() •  Ajax  •  U)li)es 
  • 69. Overview of jQuery API  •  Core  show() •  Selectors  hide() toggle() •  A[ributes  slideDown() •  Traversing  slideUp() slideToggle() •  Manipula)on  fadeIn() •  CSS  fadeOut() fadeTo() •  Events  animate() •  Effects  stop() •  Ajax  •  U)li)es 
  • 70. 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, •  Effects  marginLeft: ‘0.6in’, fontSize: ‘3em’, borderWidth: ‘10px’ •  Ajax  }, 1500); •  U)li)es  </script></body></html> h[p://jsbin.com/umacu/edit#html 
  • 71. 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()  •  Effects  ajaxStart()  ajaxStop()  •  Ajax  ajaxSuccess()  •  U)li)es 
  • 72. 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()  •  Effects  ajaxStart()  ajaxStop()  •  Ajax  ajaxSuccess()  •  U)li)es 
  • 73. 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.flickr.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;   •  Effects      });   });   •  Ajax  </script>  </body>  •  U)li)es  </html>  h[p://jsbin.com/erase/edit#html 
  • 74. 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()  •  Effects  jQuery.isArray(),   •  Ajax  jQuery,isFunc)on()  •  U)li)es 
  • 75. 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()  •  Effects  jQuery.isArray(),   •  Ajax  jQuery,isFunc)on()  •  U)li)es 
  • 76. 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  •  Effects  •  Ajax  •  U)li)es 
  • 77. $ 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>
  • 78. 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>
  • 79. Plugins! 
  • 80. 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() 
  • 81. 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! 
  • 82. A jQuery plugin in 6 steps  h[p://jsbin.com/eheku/edit#html 
  • 83. 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>
  • 84. 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>
  • 85. 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>
  • 86. 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>
  • 87. 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>
  • 88. 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>
  • 89. 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>
  • 90. 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>
  • 91. 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>
  • 92. 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>
  • 93. 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>
  • 94. 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>
  • 95. Plugins are simple.    Just follow the steps! 
  • 96. ?