Devdays Seattle jQuery Intro for Developers

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    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…

    3 Favorites

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

    + cody lindleycody lindley, 1 month ago

    custom

    346 views, 3 favs, 2 embeds more stats

    jQuery is a library that takes the pain out of DOM more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 346
      • 344 on SlideShare
      • 2 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 21
    Most viewed embeds
    • 1 views on http://www.ryancdavidson.com
    • 1 views on http://ryancdavidson.com

    more

    All embeds
    • 1 views on http://www.ryancdavidson.com
    • 1 views on http://ryancdavidson.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories