Your SlideShare is downloading. ×
  • Like
Devdays Seattle jQuery Intro for Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Devdays Seattle jQuery Intro for Developers

  • 3,701 views
Published

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.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
No Downloads

Views

Total Views
3,701
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
213
Comments
1
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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…

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. ?