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

Devdays Seattle jQuery Intro for Developers

on

  • 5,025 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,025
Views on SlideShare
4,909
Embed Views
116

Actions

Likes
7
Downloads
210
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 Devdays Seattle jQuery Intro for Developers Presentation Transcript

  • Introduc)on for Developers 
  • A bit about me  •  Cody Lindley  •  I work for Ning (www.ning.com)  •  jQuery team member, on the evangelism team  •  Many years ago I authored, Thickbox  •  Co‐authored O’Reilly “jQuery Cookbook” due out  end of the year  •  Recently authored a PDF book called “jQuery  Enlightenment” (www.jqueryenlightenment.com) 
  • Today  •  Who, what, where, and why of jQuery  •  5 core jQuery concepts  •  Overview of jQuery API  •  How to build a plugin in 6 steps  •  Ques)ons  View slide
  • 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  View slide
  • 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 
  • 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 
  • What exactly is jQuery   (if you don’t already know)   •  jQuery is a JavaScript Library   (19kb Minified and Gzipped, 120kb Uncompressed)  •  Dealing with the DOM  (e.g. selec)ng, crea)ng, traversing, changing etc…)  •  JavaScript Events  •  DOM Anima)ons  •  Ajax interac)ons 
  • What does that mean? 
  • It means no more of this  var tables = document.getElementsByTagName(‘table’); for (var t = 0; t < tables.length; t++) { var rows = tables[t].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += ‘odd’; } } }; h[p://jsbin.com/ebiye/edit#html 
  • Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
  • Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery func)on 
  • Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery Selector (CSS expression)  jQuery func)on 
  • Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery Selector (CSS expression)  jQuery func)on  jQuery Wrapper Set 
  • 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 
  • It really is the   “write less, do more”   JavaScript Library! 
  • Why use jQuery  •  Helps us to simplify and speed up web  development  •  Allows us to avoid common headaches associated  with browser development  •  Provides a large pool of plugins  •  Large and ac)ve community  •  Tested on 50 browsers, 11 plaiorms  •  It’s for both coders and designers (we don’t  discriminate) 
  • Why use jQuery over other soluKons  •  Helps us to simplify and speed up web  development  •  Allows us to avoid common headaches associated  with browser development  •  Provides a large pool of plugins  •  Large and ac)ve community  •  Tested on 50 browsers, 11 plaiorms  •  It’s for both coders and designers (we don’t  discriminate) 
  • Where to get jQuery  •  Download the source from Google code  (moving to github soon)  h[p://code.google.com/p/jqueryjs/  •  Or, use a CDN  h[p://code.google.com/apis/ajaxlibs/documenta)on/#jquery  h[p://ajax.microso_.com/ajax/jquery/jquery‐1.3.2.min.js 
  • Ok, lets get to it! 
  • Concept 1. Find something, do something  <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body> </html>
  • Concept 1. Find something, do something  <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’); </script> </body> </html>
  • Concept 1. Find something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’).attr(‘id’,‘nav’); </script> </body> </html>
  • Concept 1. Find something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘#nav li’); </script> </body> </html>
  • Concept 1. Find something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a>home</a></li> <li class=‘navLiItem’><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘#nav li’).addClass(‘navLiItem’); </script> </body> </html>
  • Concept 1. Find something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a>home</a></li> <li class=‘navLiItem’><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘#nav a’); </script> </body> </html>
  • Concept 1. Find something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘#nav a’).each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }); </script> </body> </html>
  • Concept 2. Create something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> </script> </body> </html>
  • Concept 2. Create something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘<li>home</li>’); jQuery(‘<li>contact</li>’); </script> </body> </html>
  • Concept 2. Create something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘<li>home</li>’).wrapInner(‘a’); jQuery(‘<li>about</li>’).wrapInner(‘a’); </script> </body> </html>
  • Concept 2. Create something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘<li>home</li>’).wrapInner(‘a’).appendTo(‘#nav’); jQuery(‘<li>about</li>’).wrapInner(‘a’).appendTo(‘#nav’); </script> </body> </html>
  • Concept 3. Chaining  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’).attr(‘id’,’nav’); jQuery(‘#nav li’).addClass(‘navLiItem’); jQuery(‘#nav a’).each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }); </script> </body> </html>
  • Concept 3. Chaining  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }); </script> </body> </html>
  • Concept 3. Chaining  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }).end(); </script> </body> </html>
  • Concept 3. Chaining  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }).end().end(); </script> </body> </html>
  • Concept 4. Implicit iteraKon  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }); </script> </body> </html>
  • Concept 4. Implicit iteraKon  <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> jQuery(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ jQuery(this).attr(‘href’,’/’+jQuery(this).text()); }); </script> </body> </html>
  • Concept 5. jQuery() parameters  •  First Parameter  CSS selectors ‐ e.g. jQuery(‘li’)  HTML ‐ e.g. jQuery(‘<li><a href=“#”>link</a></li>’)  DOM elements ‐ e.g. jQuery(document)  A func)on (shortcut for ready()) ‐ e.g. jQuery(func)on(){})  •  Second Parameter  CSS selectors ‐ e.g. jQuery(‘li’,’#nav’)  DOM elements ‐ e.g. jQuery(‘input’,’document.forms[0]’) 
  • Review  •  Find something, do something  •  Create something, do something  •  Chaining  •  Implicit Itera)on  •  jQuery() parameters 
  • Overview of jQuery API  •  Core  •  Selectors  •  A[ributes  •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • Overview of jQuery API  •  Core  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()
  • 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()
  • 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 
  • 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 
  • Overview of jQuery API  •  Core  jQuery(‘:visible’) •  Selectors  •  A[ributes  •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • Overview of jQuery API  •  Core  jQuery(‘:visible’) •  Selectors  jQuery(‘:radio:enabled:checked’) •  A[ributes  •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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()
  • 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()
  • 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 
  • 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 
  • 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 
  • 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>
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • 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 
  • $ 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>
  • 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>
  • Plugins! 
  • So, what is a plugin?  A plugin is nothing more than a custom jQuery  method created to extend the func)onality of  the jQuery object  jQuery().myPlugin() 
  • Why Create a plugin?  You want to “find something”, and “do  something” but the “do something” is not  available in jQuery.   Roll your own “do something” with a plugin! 
  • A jQuery plugin in 6 steps  h[p://jsbin.com/eheku/edit#html 
  • A jQuery plugin in 6 steps  Step 1. create a private scope for $ alias  <!DOCTYPE html><html><body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ })(jQuery); </script></body></html>
  • A jQuery plugin in 6 steps  Step 2. a[ach plugin to fn alias (aka prototype)  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ $(this).text($(this).text().replace(/hate/g,'love')); }; })(jQuery); jQuery('p').loveNotHate(); </script></body></html>
  • A jQuery plugin in 6 steps  Step 2. a[ach plugin to fn alias (aka prototype)  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ $(this).text($(this).text().replace(/hate/g,'love')); }; })(jQuery); jQuery('p').loveNotHate(); </script></body></html>
  • A jQuery plugin in 6 steps  Step 3. add implicit itera)on  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ this.each(function(){ $(this).text($(this).text().replace(/hate/g,'love')); }); }; })(jQuery); jQuery('p').loveNotHate(); </script></body></html>
  • A jQuery plugin in 6 steps  Step 3. add implicit itera)on  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ this.each(function(){ $(this).text($(this).text().replace(/hate/g,'love')); }); }; })(jQuery); jQuery('p').loveNotHate(); </script></body></html>
  • A jQuery plugin in 6 steps  Step 4. enable chaining  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,'love')); }); }; })(jQuery); jQuery('p').loveNotHate().hide(); </script></body></html>
  • A jQuery plugin in 6 steps  Step 4. enable chaining  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,'love')); }); }; })(jQuery); jQuery('p').loveNotHate().hide(); </script></body></html>
  • A jQuery plugin in 6 steps  Step 5. add default op)ons  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); jQuery('p').loveNotHate(); </script></body></html>
  • A jQuery plugin in 6 steps  Step 6. add custom op)ons  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); jQuery('p').loveNotHate({text:'love-love-love'}); </script></body></html>
  • A jQuery plugin in 6 steps  Step 6. add custom op)ons  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(customOptions){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); jQuery('p').loveNotHate({text:'love-love-love'}); </script></body></html>
  • A jQuery plugin in 6 steps  Step 6. add custom op)ons  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); jQuery('p').loveNotHate({text:'love-love-love'}); </script></body></html>
  • A jQuery plugin in 6 steps  Step 6. add custom op)ons  <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(function(){ $(this).text($(this).text().replace(/hate/ g,options.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); jQuery('p').loveNotHate({text:'love-love-love'}); </script></body></html>
  • Plugins are simple.    Just follow the steps! 
  • ?