0
Overview

• Who, what and why of jQuery
• 5 core jQuery concepts
• Overview of jQuery API
• Building a plugin in 6 steps
•...
Who's using jQuery
Who's using jQuery
Who's using jQuery

    reddit.com         whitehouse.gov              overstock.com
     espn.com          microsoft.com ...
Who's using jQuery

reddit.com           whitehouse.gov              overstock.com
 espn.com            microsoft.com     ...
What exactly is jQuery
jQuery is a JavaScript library!


• Dealing with the DOM changing, etc)
  (e.g. selecting, creating...
What does that mean?
It means no more of this
var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++) {
! ...
jQuery simpli es


jQuery('table tr:nth-child(odd)').addClass('odd');
jQuery simpli es

  jQuery function

jQuery('table tr:nth-child(odd)').addClass('odd');
jQuery simpli es

  jQuery function

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


                CSS expression
jQuery simpli es

  jQuery function             jQuery method
jQuery('table tr:nth-child(odd)').addClass('odd');


       ...
jQuery simpli es


jQuery('table tr:nth-child(odd)').addClass('odd');
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
 ...
Why use jQuery
•   Helps us to simplify and speed up web development

•   Allows us to avoid common headaches associated
 ...
Help!
APIs            Blogs, tutorials, screencasts,
 docs.jquery.com        plugins, development sprints
  api.jquery.com
 visu...
APIs         Blogs, tutorials, screencasts,
 docs.jquery.com     plugins, development sprints
  api.jquery.com
 visualjque...
Concept 1:
knowing the jQuery
 parameter types
• CSS selectors & custom CSS expressions
• HTML
• DOM elements
• A function (shortcut for DOM ready)
jQuery(‘div’) & jQuery(‘:first’)


   • CSS selectors & custom CSS expressions
   • HTML
   • DOM elements
   • A function...
jQuery(‘<li><a href=”#”>link</a></li>’)


    • CSS selectors jQuery(‘:first’)
    jQuery(‘div’) &
                    & c...
jQuery(document) or jQuery(document.createElement(‘a’))




      • CSS selectors jQuery(‘:first’)
      jQuery(‘div’) &
 ...
jQuery(function(){}) =
jQuery(document).ready(function(){})

   • CSS selectors jQuery(‘:first’)
   jQuery(‘div’) &
      ...
• CSS selectors jQuery(‘:first’)
jQuery(‘div’) &
                & custom CSS expressions


• HTML
jQuery(‘<li><a href=”#”...
Concept 2:
nd something,
do something
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li><a>home</a></li>
    <li><a>about</a></li>
  </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li><a>home</a></li>
    <li><a>about</a></li>
  </ul>
<script src="jquery.js"></...
<!DOCTYPE html>
<html>
<body>
  <ul id="nav">
    <li><a>home</a></li>
    <li><a>about</a></li>
  </ul>
<script src="jque...
<!DOCTYPE html>
<html>
<body>
  <ul id="nav">
    <li><a>home</a></li>
    <li><a>about</a></li>
  </ul>
<script src="jque...
<!DOCTYPE html>
<html>
<body>
  <ul id="nav">
    <li><a href=”/home”>home</a></li>
    <li><a href=”/about”>about</a></li...
Concept 3:
create something,
  do something
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
  </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
  </ul>
<script src=”jquery.js”></script>
<script>
  jQuery(‘<li>home</li>’)...
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
  </ul>
<script src=”jquery.js”></script>
<script>
  jQuery(‘<li>home</li>’)...
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li><a>home</a></li>
    <li><a>about</a></li>
  </ul>
<script src=”jque...
Concept 4:
chaining & operating
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”><a href=”/home”>home</a></li>
    <li class=”item”><a h...
<!DOCTYPE html>
<html>
    1
<body>
  <ul id='nav'>
    <li class=”item”><a href=”/home”>home</a></li>
    <li class=”item...
<!DOCTYPE html>
<html>
    1
<body>
  <ul id='nav'>
    <li class=”item”><a href=”/home”>home</a></li>
    <li class=”item...
<!DOCTYPE html>
<html>
    1
<body>
  <ul id='nav'>                3
    <li class=”item”><a href=”/home”>home</a></li>
  ...
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”><a href=”/home”>home</a></li>
    <li class=”item”><a h...
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”><a href=”/home”>home</a></li>
    <li class=”item”><a h...
Concept 5:
 understanding
implicit iteration
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”><a href=”/home”>home</a></li>
    <li class=”item”><a h...
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”><a href=”/home”>home</a></li>
    <li class=”item”><a h...
Review

• Knowing the jQuery parameter types
• Find something, do something
• Create something, do something
• Chaining & ...
“What about the
bling function?”
jQuery == $
$ == jQuery
$ is an alias to jQuery
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”>home</li>
    <li class=”item”>about</li>
  </ul>
<scri...
<!DOCTYPE html>
 <html>
 <body>
   <ul id='nav'>
     <li class=”item”>home</li>
     <li class=”item”>about</li>
   </ul>...
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”>home</li>
    <li class=”item”>about</li>
  </ul>
<scri...
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”>home</li>
    <li class=”item”>about</li>
  </ul>
<scri...
<!DOCTYPE html>
<html>
<body>
  <ul id='nav'>
    <li class=”item”>home</li>
    <li class=”item”>about</li>
  </ul>
<scri...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <ul id='nav'>
    <li class=”item”>home</li>
    <li class=”item”>about</li...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <ul id='nav'>
    <li class=”item”>home</li>
    <li class=”item”>about</li...
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(document).ready(function () {
  $(‘li’).addClas...
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(document).ready(function () {
  $(‘li’).addClas...
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(function () {
  $(‘li’).addClass(‘item’);
});
<...
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
jQuery(function ($) {
  $(‘li’).addClass(‘item’);...
jQuery API overview
•   Core

•   Selectors

•   Attributes

•   Traversing

•   Manipulation

•   CSS

•   Events

•   Effects

•   Ajax

•  ...
•   Core           jQuery()

•   Selectors      each()
                   size()
•   Attributes     eq()
                 ...
•   Core           jQuery()

•   Selectors      each()
                   size()
•   Attributes     eq()
                 ...
•   Core           <!DOCTYPE html>

•   Selectors
                   <html>
                   <body>
•   Attributes
     ...
•   Core           <!DOCTYPE html>

•   Selectors
                   <html>
                   <body>
•   Attributes
     ...
•   Core

•   Selectors

•   Attributes

•   Traversing

•   Manipulation

•   CSS

•   Events

•   Effects

•   Ajax

•  ...
•   Core           $(‘#nav li.contact’)

•   Selectors

•   Attributes

•   Traversing

•   Manipulation

•   CSS

•   Eve...
•   Core           $(‘#nav li.contact’)

•   Selectors      $(‘:visible’)

•   Attributes

•   Traversing

•   Manipulatio...
•   Core           $(‘#nav li.contact’)

•   Selectors      $(‘:visible’)

•   Attributes     $(‘:radio:enabled:checked’)
...
•   Core           $(‘#nav li.contact’)

•   Selectors      $(‘:visible’)

•   Attributes     $(‘:radio:enabled:checked’)
...
•   Core           $(‘#nav li.contact’)

•   Selectors      $(‘:visible’)

•   Attributes     $(‘:radio:enabled:checked’)
...
•   Core           $(‘#nav li.contact’)

•   Selectors      $(‘:visible’)

•   Attributes     $(‘:radio:enabled:checked’)
...
•   Core           $(‘#nav li.contact’)

•   Selectors      $(‘:visible’)

•   Attributes     $(‘:radio:enabled:checked’)
...
•   Core           $(‘#nav li.contact’)

•   Selectors      $(‘:visible’)

•   Attributes     $(‘:radio:enabled:checked’)
...
•   Core           $(‘#nav li.contact’)

•   Selectors      $(‘:visible’)

•   Attributes     $(‘:radio:enabled:checked’)
...
•   Core          $(‘#nav li.contact’)

•   Selectors     $(‘:visible’)

•   Attributes    $(‘:radio:enabled:checked’)

• ...
•   Core           attr()

•
                   removeAttr()
    Selectors
•   Attributes
                   addClass()
  ...
•   Core           attr()

•
                   removeAttr()
    Selectors
•   Attributes
                   addClass()
  ...
•   Core           <!DOCTYPE html><html><body>


•   Selectors      <input type="text" value="search">


•   Attributes   ...
•   Core           add()            eq()

•
                   children()       filter()
    Selectors      closest()     ...
• Core            add()            eq()

• Selectors
                  children()       filter()
                  closest...
•   Core           add()
                       Filters across
                                        eq()

•
           ...
•   Core           add()            eq()

•
                   children()       filter()
    Selectors      closest()     ...
•   Core           <!DOCTYPE html>

•
                   <html>
    Selectors      <body>

•   Attributes     <p>Make me b...
•   Core           html()          replaceWith()

•
                   text()          replaceAll()
    Selectors

•   Att...
•   Core           html()          replaceWith()

•
                   text()          replaceAll()
    Selectors

•   Att...
•   Core           <!DOCTYPE html>

•   Selectors
                   <html>
                   <body>
•   Attributes
     ...
•   Core           css()

•   Selectors      offset()

•   Attributes
                   offsetParent()
                  ...
•   Core           css()

•   Selectors      offset()

•   Attributes
                   offsetParent()
                  ...
•   Core           <!DOCTYPE html>
                   <html>

•   Selectors      <head>
                   <style>

•
    ...
•   Core           ready()          blur()

•
                                    change()
    Selectors      bind()      ...
• Core                ready()          blur()

• Selectors
                                       change()
               ...
•   Core           ready()             blur()
                       IE fires on blur
•
                                   ...
•   Core           ready()          blur()

•
                                    change()
    Selectors      bind()      ...
•   Core           <!DOCTYPE html>

•
                   <html>
    Selectors      <body>

•   Attributes     <p>1. click<...
•   Core           <!DOCTYPE html>

•
                   <html>
    Selectors      <body>

•   Attributes     <p>1. click<...
•   Core           show()

•   Selectors
                   hide()
                   toggle()
•   Attributes
            ...
•   Core           show()

•   Selectors
                   hide()
                   toggle()
•   Attributes
            ...
•   Core           <!DOCTYPE html><html><head>
                   <style>
•   Selectors      div {background:#bca; width:1...
•   Core           $.ajax()        ajaxCompete()

•   Selectors
                   $.get()
                   $.post()
   ...
•   Core           $.ajax()        ajaxCompete()

•   Selectors
                   $.get()
                   $.post()
   ...
•   Core           <!DOCTYPE html><html><body>

•
                   <script src="jquery.js">
    Selectors      </script>...
•   Core           $.support       $.isArray()

•   Selectors
                   $.boxModel
                   $.browser
 ...
•   Core           $.support       $.isArray()

•   Selectors
                   $.boxModel
                   $.browser
 ...
•   Core           $.each(data, function(i, tweet){

•
                     $('<p />')
    Selectors          .html(tweet....
Plugins
What’s a plugin?
A plugin is nothing more than a custom
jQuery method created to extend the
functionality of the jQuery ob...
Why create a plugin?


The “do something” isn’t available in jQuery
Why create a plugin?


Roll your own “do something” with a plugin!
A plugin in 6 steps
Step 1:
create a private
scope for $ alias
<!DOCTYPE html><html><body>
<script src=”jquery.js”></script>
<script>
(function ($) {

})(jQuery);
</script></body></html>
Step 2:
 attach plugin to fn
alias (aka prototype)
<!DOCTYPE html><html><body>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
  $(th...
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate ...
Step 3:
add implicit iteration
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<scr...
Step 4:
enable chaining
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<scr...
Step 5:
add default options
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<scr...
Step 6:
add custom options
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<scr...
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<scr...
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<scr...
<!DOCTYPE html><html><body>          http://jsbin.com/ifuga/edit
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<...
Plugins are simple,
just follow those steps.
News
• Four conferences next year:
  London, Boston, San Francisco and online
• New plugin site
• jQuery Forum (moving fro...
Remy Sharp @rem

jQuery team member
Co-author of O'Reilly
jQuery Cookbook
(due November 20th)


jqueryfordesigners.com
rem...
Remy Sharp @rem

jQuery team member
Co-author of O'Reilly
jQuery Cookbook
(due November 20th)


jqueryfordesigners.com
   ...
Write Less Do More
Write Less Do More
Upcoming SlideShare
Loading in...5
×

Write Less Do More

6,779

Published on

London and Cambridge jQuery DevDays talk introducing jQuery concepts, API overview, live examples and plugin design.

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,779
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
298
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "Write Less Do More"

  1. 1. Overview • Who, what and why of jQuery • 5 core jQuery concepts • Overview of jQuery API • Building a plugin in 6 steps • jQuery News
  2. 2. Who's using jQuery
  3. 3. Who's using jQuery
  4. 4. Who's using jQuery reddit.com whitehouse.gov overstock.com espn.com microsoft.com time.com ibm.com amazon.com capitalone.com stackoverflow.com netflix.com wordpress.com boxee.tv bing.com dell.com bit.ly monster.com twitter.com twitpic.com tv.com w3.org http://trends.builtwith.com/javascript/jquery
  5. 5. Who's using jQuery reddit.com whitehouse.gov overstock.com espn.com microsoft.com time.com ibm.com amazon.com capitalone.com stackoverflow.com netflix.com wordpress.com boxee.tv bing.com dell.com bit.ly monster.com twitter.com twitpic.com tv.com w3.org http://trends.builtwith.com/javascript/jquery
  6. 6. What exactly is jQuery jQuery is a JavaScript library! • Dealing with the DOM changing, etc) (e.g. selecting, creating, traversing, • JavaScript Events • Animations • Ajax interactions
  7. 7. What does that mean?
  8. 8. 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 = 1; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += ' odd'; } } }
  9. 9. jQuery simpli es jQuery('table tr:nth-child(odd)').addClass('odd');
  10. 10. jQuery simpli es jQuery function jQuery('table tr:nth-child(odd)').addClass('odd');
  11. 11. jQuery simpli es jQuery function jQuery('table tr:nth-child(odd)').addClass('odd'); CSS expression
  12. 12. jQuery simpli es jQuery function jQuery method jQuery('table tr:nth-child(odd)').addClass('odd'); CSS expression
  13. 13. jQuery simpli es jQuery('table tr:nth-child(odd)').addClass('odd');
  14. 14. It really is the Write less, do more JavaScript library!
  15. 15. 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 active community • Tested on 50 browsers, 11 platforms • For both coder and designer (we don't discriminate)
  16. 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 active community • Tested on 50 browsers, 11 platforms • For both coder and designer (we don't discriminate)
  17. 17. Help!
  18. 18. APIs Blogs, tutorials, screencasts, docs.jquery.com plugins, development sprints api.jquery.com visualjquery.com Google Groups jquery-en Twitter jquery-dev @jquery Help! jquery-ui-en @jquerysites jquery-ui-dev @jqueryui jquery-a11y IRC channel irc.freenode.net/#jquery
  19. 19. APIs Blogs, tutorials, screencasts, docs.jquery.com plugins, development sprints api.jquery.com visualjquery.com Google Groups jquery-en Twitter jquery-dev @jquery Help! jquery-ui-en @jquerysites jquery-ui-dev @jqueryui jquery-a11y IRC channel irc.freenode.net/#jquery
  20. 20. Concept 1: knowing the jQuery parameter types
  21. 21. • CSS selectors & custom CSS expressions • HTML • DOM elements • A function (shortcut for DOM ready)
  22. 22. jQuery(‘div’) & jQuery(‘:first’) • CSS selectors & custom CSS expressions • HTML • DOM elements • A function (shortcut for DOM ready)
  23. 23. jQuery(‘<li><a href=”#”>link</a></li>’) • CSS selectors jQuery(‘:first’) jQuery(‘div’) & & custom CSS expressions • HTML • DOM elements • A function (shortcut for DOM ready)
  24. 24. jQuery(document) or jQuery(document.createElement(‘a’)) • CSS selectors jQuery(‘:first’) jQuery(‘div’) & & custom CSS expressions • HTML jQuery(‘<li><a href=”#”>link</a></li>’) • DOM elements • A function (shortcut for DOM ready)
  25. 25. jQuery(function(){}) = jQuery(document).ready(function(){}) • CSS selectors jQuery(‘:first’) jQuery(‘div’) & & custom CSS expressions • HTML jQuery(‘<li><a href=”#”>link</a></li>’) • DOM elements jQuery(document) or jQuery(document.createElement(‘a’)) • A function (shortcut for DOM ready)
  26. 26. • CSS selectors jQuery(‘:first’) jQuery(‘div’) & & custom CSS expressions • HTML jQuery(‘<li><a href=”#”>link</a></li>’) • DOM elements jQuery(document) or jQuery(document.createElement(‘a’)) • A function (shortcut for DOM ready) jQuery(function(){}) = jQuery(document).ready(function(){})
  27. 27. Concept 2: nd something, do something
  28. 28. <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body> </html>
  29. 29. <!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>
  30. 30. <!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>
  31. 31. <!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 a'); </script> </body> </html>
  32. 32. <!DOCTYPE html> <html> <body> <ul id="nav"> <li><a href=”/home”>home</a></li> <li><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>
  33. 33. Concept 3: create something, do something
  34. 34. <!DOCTYPE html> <html> <body> <ul id='nav'> </ul> </body> </html>
  35. 35. <!DOCTYPE html> <html> <body> <ul id='nav'> </ul> <script src=”jquery.js”></script> <script> jQuery(‘<li>home</li>’); jQuery(‘<li>about</li>’); </script> </body> </html>
  36. 36. <!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>
  37. 37. <!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>
  38. 38. Concept 4: chaining & operating
  39. 39. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery.js”></script> <script> jQuery(‘ul’).attr(‘id’, ‘nav’); jQuery(‘#nav li’).addClass(‘item’); jQuery(‘#nav a’).each(function () { jQuery(this).attr(‘href’, ‘/’+jQuery(this).text()); }); </script> </body> </html>
  40. 40. <!DOCTYPE html> <html> 1 <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery.js”></script> <script> 1 jQuery(‘ul’).attr(‘id’, ‘nav’); jQuery(‘#nav li’).addClass(‘item’); jQuery(‘#nav a’).each(function () { jQuery(this).attr(‘href’, ‘/’+jQuery(this).text()); }); </script> </body> </html>
  41. 41. <!DOCTYPE html> <html> 1 <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> 2 <script src=”jquery.js”></script> <script> 1 jQuery(‘ul’).attr(‘id’, ‘nav’); 2 jQuery(‘#nav li’).addClass(‘item’); jQuery(‘#nav a’).each(function () { jQuery(this).attr(‘href’, ‘/’+jQuery(this).text()); }); </script> </body> </html>
  42. 42. <!DOCTYPE html> <html> 1 <body> <ul id='nav'> 3 <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> 2 <script src=”jquery.js”></script> <script> 1 jQuery(‘ul’).attr(‘id’, ‘nav’); 2 jQuery(‘#nav li’).addClass(‘item’); jQuery(‘#nav a’).each(function () { jQuery(this).attr(‘href’, ‘/’+jQuery(this).text()); }); </script> 3 </body> </html>
  43. 43. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery.js”></script> <script> jQuery(‘ul’).attr(‘id’, ‘nav’); jQuery(‘#nav li’).addClass(‘item’); jQuery(‘#nav a’).each(function () { jQuery(this).attr(‘href’, ‘/’+jQuery(this).text()); }); </script> </body> </html>
  44. 44. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery.js”></script> <script> jQuery(‘ul’) .attr(‘id’, ‘nav’) .find(‘li’) .addClass(‘item’) .find(‘a’) .each(function () { jQuery(this).attr(‘href’, ‘/’+jQuery(this).text()); }); </script> </body> </html>
  45. 45. Concept 5: understanding implicit iteration
  46. 46. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery.js”></script> <script> jQuery(‘ul’) .attr(‘id’, ‘nav’) .find(‘li’) .addClass(‘item’) .find(‘a’) .each(function () { jQuery(this).attr(‘href’, ‘/’+jQuery(this).text()); }); </script> </body> </html>
  47. 47. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”><a href=”/home”>home</a></li> <li class=”item”><a href=”/about”>about</a></li> </ul> <script src=”jquery.js”></script> <script> jQuery(‘ul’) .attr(‘id’, ‘nav’) .find(‘li’) .addClass(‘item’) .find(‘a’) .each(function () { jQuery(this).attr(‘href’, ‘/’+jQuery(this).text()); }); </script> </body> </html>
  48. 48. Review • Knowing the jQuery parameter types • Find something, do something • Create something, do something • Chaining & Operating • Understanding Implicit Iteration
  49. 49. “What about the bling function?”
  50. 50. jQuery == $
  51. 51. $ == jQuery
  52. 52. $ is an alias to jQuery
  53. 53. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> jQuery(‘li’).addClass(‘item’); </script> </body> </html>
  54. 54. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> jQuery(‘li’).addClass(‘item’); </script> </body> </html>
  55. 55. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> $(‘li’).addClass(‘item’); </script> </body> </html>
  56. 56. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> $(‘li’).addClass(‘item’); </script> </body> </html>
  57. 57. <!DOCTYPE html> <html> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> $(document).ready(function () { $(‘li’).addClass(‘item’); }); </script> </body> </html>
  58. 58. <!DOCTYPE html> <html> <head> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> $(document).ready(function () { $(‘li’).addClass(‘item’); }); </script> </body> </html>
  59. 59. <!DOCTYPE html> <html> <head> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> <script src=”jquery.js”></script> <script> $(document).ready(function () { $(‘li’).addClass(‘item’); }); </script> </body> </html>
  60. 60. <!DOCTYPE html> <html> <head> <script src=”jquery.js”></script> <script> $(document).ready(function () { $(‘li’).addClass(‘item’); }); </script> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> </body> </html>
  61. 61. <!DOCTYPE html> <html> <head> <script src=”jquery.js”></script> <script> $(document).ready(function () { $(‘li’).addClass(‘item’); }); </script> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> </body> </html>
  62. 62. <!DOCTYPE html> <html> <head> <script src=”jquery.js”></script> <script> $(function () { $(‘li’).addClass(‘item’); }); </script> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> </body> </html>
  63. 63. <!DOCTYPE html> <html> <head> <script src=”jquery.js”></script> <script> jQuery(function ($) { $(‘li’).addClass(‘item’); }); </script> </head> <body> <ul id='nav'> <li class=”item”>home</li> <li class=”item”>about</li> </ul> </body> </html>
  64. 64. jQuery API overview
  65. 65. • Core • Selectors • Attributes • Traversing • Manipulation • CSS • Events • Effects • Ajax • Utilities
  66. 66. • Core jQuery() • Selectors each() size() • Attributes eq() get() • Traversing index() • Manipulation length selector • CSS context • Events data() removeData() • Effects queue() dequeue() • Ajax jQuery.fn.extend() • Utilities jQuery.extend() jQuery.noConflict()
  67. 67. • Core jQuery() • Selectors each() size() • Attributes eq() get() • Traversing index() • Manipulation length selector • CSS context • Events data() removeData() • Effects queue() dequeue() • Ajax jQuery.fn.extend() • Utilities jQuery.extend() jQuery.noConflict()
  68. 68. • Core <!DOCTYPE html> • Selectors <html> <body> • Attributes <p>Element Node</p> • Traversing • <script src="jquery.js"> Manipulation </script> • CSS <script> alert($('p').get(0).nodeName); • Events </script> • Effects </body> • Ajax </html> • Utilities http://jsbin.com/ibito/edit
  69. 69. • Core <!DOCTYPE html> • Selectors <html> <body> • Attributes <p>Element Node</p> • Traversing • <script src="jquery.js"> Manipulation </script> • CSS <script> alert($('p').get(0).nodeName); • Events alert($('p')[0].nodeName); </script> • Effects • Ajax </body> </html> • Utilities http://jsbin.com/idiyi/edit
  70. 70. • Core • Selectors • Attributes • Traversing • Manipulation • CSS • Events • Effects • Ajax • Utilities
  71. 71. • Core $(‘#nav li.contact’) • Selectors • Attributes • Traversing • Manipulation • CSS • Events • Effects • Ajax • Utilities
  72. 72. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes • Traversing • Manipulation • CSS • Events • Effects • Ajax • Utilities
  73. 73. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes $(‘:radio:enabled:checked’) • Traversing • Manipulation • CSS • Events • Effects • Ajax • Utilities
  74. 74. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes $(‘:radio:enabled:checked’) • Traversing $(‘a[title]’) • Manipulation • CSS • Events • Effects • Ajax • Utilities
  75. 75. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes $(‘:radio:enabled:checked’) • Traversing $(‘a[title]’) • Manipulation $(‘a[title][hash*=”foo”]’) • CSS • Events • Effects • Ajax • Utilities
  76. 76. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes $(‘:radio:enabled:checked’) • Traversing $(‘a[title]’) • Manipulation $(‘a[title][hash*=”foo”]’) • CSS $(‘a:first[hash*=”foo”]’) • Events • Effects • Ajax • Utilities
  77. 77. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes $(‘:radio:enabled:checked’) • Traversing $(‘a[title]’) • Manipulation $(‘a[title][hash*=”foo”]’) • CSS $(‘a:first[hash*=”foo”]’) • Events $(‘.header, .footer’) • Effects • Ajax • Utilities
  78. 78. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes $(‘:radio:enabled:checked’) • Traversing $(‘a[title]’) • Manipulation $(‘a[title][hash*=”foo”]’) • CSS $(‘a:first[hash*=”foo”]’) • Events $(‘.header, .footer’) • Effects $(‘.header, .footer’, ‘#main’) • Ajax • Utilities
  79. 79. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes $(‘:radio:enabled:checked’) • Traversing $(‘a[title]’) • Manipulation $(‘a[title][hash*=”foo”]’) • CSS $(‘a:first[hash*=”foo”]’) • Events $(‘.header, .footer’) • Effects $(‘.header, .footer’, ‘#main’) • Ajax http://codylindley.com/jqueryselectors • Utilities
  80. 80. • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • Attributes $(‘:radio:enabled:checked’) • Traversing ry s elec tors jQue $(‘a[title]’) • Manipulation ilen tly, • fail s $(‘a[title][hash*=”foo”]’) CSS SS d oes! • Events just l ike C $(‘a:first[hash*=”foo”]’) $(‘.header, .footer’) • Effects $(‘.header, .footer’, ‘#main’) • Ajax http://codylindley.com/jqueryselectors • Utilities
  81. 81. • Core attr() • removeAttr() Selectors • Attributes addClass() hasClass() • Traversing toggleClass() removeClass() • Manipulation val() • CSS • Events • Effects • Ajax • Utilities
  82. 82. • Core attr() • removeAttr() Selectors • Attributes addClass() hasClass() • Traversing toggleClass() removeClass() • Manipulation val() • CSS • Events • Effects • Ajax • Utilities
  83. 83. • Core <!DOCTYPE html><html><body> • Selectors <input type="text" value="search"> • Attributes <script src="jquery.js"></script> <script> • Traversing $('input').focus(function(){ • Manipulation var v = $(this).val(); $(this).val( • v === this.defaultValue ? '' : v CSS ); • }).blur(function(){ Events var v = $(this).val(); $(this).val( • Effects ); $.trim(v) ? v : this.defaultValue • Ajax }); • Utilities </script></body></html> http://jsbin.com/akeqo3/edit
  84. 84. • Core add() eq() • children() filter() Selectors closest() is() • Attributes contents() find() map() not() • Traversing next() nextAll() slice() • Manipulation offsetParent() parent() • CSS parents() prev() • Events prevAll() siblings() • Effects andSelf() • Ajax end() • Utilities
  85. 85. • Core add() eq() • Selectors children() filter() closest() is() • Searches down Attributes contents() find() map() not() • Traversing next() nextAll() slice() • Manipulation offsetParent() parent() • CSS parents() prev() • Events prevAll() siblings() • Effects andSelf() • Ajax end() • Utilities
  86. 86. • Core add() Filters across eq() • children() filter() Selectors closest() is() • Attributes contents() find() map() not() • Traversing next() nextAll() slice() • Manipulation offsetParent() parent() • CSS parents() prev() • Events prevAll() siblings() • Effects andSelf() • Ajax end() • Utilities
  87. 87. • Core add() eq() • children() filter() Selectors closest() is() • Attributes contents() find() map() not() • Traversing next() nextAll() slice() • Manipulation offsetParent() parent() • CSS parents() prev() • Events prevAll() siblings() • Effects andSelf() • Ajax end() • Utilities
  88. 88. • Core <!DOCTYPE html> • <html> Selectors <body> • Attributes <p>Make me bold!</p> • Traversing <script src="jquery.js"> • Manipulation </script> <script> • CSS $('p') • Events .contents() .wrap('<strong />'); • Effects </script> • Ajax </body> • </html> Utilities http://jsbin.com/owesu/edit
  89. 89. • Core html() replaceWith() • text() replaceAll() Selectors • Attributes append() appendTo() empty() remove() • Traversing prepend() prependTo() clone() • Manipulation after() • CSS before() insert() • Events insertAfter() insertBefore • Effects wrap() • Ajax wrapAll() • wrapInner() Utilities
  90. 90. • Core html() replaceWith() • text() replaceAll() Selectors • Attributes append() appendTo() empty() remove() • Traversing prepend() prependTo() clone() • Manipulation after() • CSS before() insert() • Events insertAfter() insertBefore • Effects wrap() • Ajax wrapAll() • wrapInner() Utilities
  91. 91. • Core <!DOCTYPE html> • Selectors <html> <body> • Attributes <p>jQuery’s <em>easy!</em></p> • Traversing • <script src="jquery.js"> Manipulation </script> • CSS <script> • Events alert($(‘p’).text()); • Effects </script> • Ajax </body> </html> • Utilities http://jsbin.com/inulu/edit
  92. 92. • Core css() • Selectors offset() • Attributes offsetParent() position() • Traversing scrollTop() scrollLeft() • Manipulation height() • CSS width() innerHeight() • Events innerWidth() outerHeight() • Effects outerWidth() • Ajax • Utilities
  93. 93. • Core css() • Selectors offset() • Attributes offsetParent() position() • Traversing scrollTop() scrollLeft() • Manipulation height() • CSS width() innerHeight() • Events innerWidth() outerHeight() • Effects outerWidth() • Ajax • Utilities
  94. 94. • Core <!DOCTYPE html> <html> • Selectors <head> <style> • div { background: #ccc; width: 100px; Attributes margin: 0 20px; float: left; } </style> • Traversing </head> <body> • Manipulation <div></div> <div></div> • CSS <div></div> • Events <script src=“jquery.js"> </script> • <script> Effects $('div').height($(document).height()); • Ajax </script> • </body> Utilities </html> http://jsbin.com/erire3/edit
  95. 95. • Core ready() blur() • change() Selectors bind() click() • Attributes one() trigger() dbclick() focus() • Traversing triggerHandler() keydown() unbind() keypress() • Manipulation live() keyup() mousedown() • CSS die() mousenter() mouseleave() • Events hover() toggle() mouseout() mouseup() • Effects load() resize() scroll() • Ajax unload() select() • error() submit() Utilities
  96. 96. • Core ready() blur() • Selectors change() bind() click() • Acts on first, and Attributes one() trigger() dbclick() focus() • Traversing doesn’t chain! triggerHandler() keydown() unbind() keypress() • Manipulation live() keyup() mousedown() • CSS die() mousenter() mouseleave() • Events hover() toggle() mouseout() mouseup() • Effects load() resize() scroll() • Ajax unload() select() • Utilities error() submit()
  97. 97. • Core ready() blur() IE fires on blur • change() Selectors bind() click() • Attributes one() trigger() dbclick() focus() • Traversing triggerHandler() keydown() unbind() keypress() • Manipulation live() keyup() mousedown() • CSS die() mousenter() mouseleave() • Events hover() toggle() mouseout() mouseup() • Effects load() resize() scroll() • Ajax unload() select() • error() submit() Utilities
  98. 98. • Core ready() blur() • change() Selectors bind() click() • Attributes one() trigger() dbclick() focus() • Traversing triggerHandler() keydown() unbind() keypress() • Manipulation live() keyup() mousedown() • CSS die() mousenter() mouseleave() • Events hover() toggle() mouseout() mouseup() • Effects load() resize() scroll() • Ajax unload() select() • error() submit() Utilities
  99. 99. • Core <!DOCTYPE html> • <html> Selectors <body> • Attributes <p>1. click</p> • Traversing <p>2. click</p> • Manipulation <script src="jquery.js"></script> <script> • CSS $(‘p’).bind(‘click’, function(){ • Events $(this).after(‘<p>clicked</p>’); }); • Effects • </script> Ajax </body> • Utilities </html> http://jsbin.com/ogahu/edit
  100. 100. • Core <!DOCTYPE html> • <html> Selectors <body> • Attributes <p>1. click</p> • Traversing <p>2. click</p> • Manipulation <script src="jquery.js"></script> <script> • CSS $(‘p’).live(‘click’, function(){ • Events $(this).after(‘<p>’ + ➥ $(this).text()+‘ clicked</p>’); • Effects }); • Ajax </script> </body> • Utilities </html> http://jsbin.com/ihalu/edit
  101. 101. • Core show() • Selectors hide() toggle() • Attributes slideDown() • Traversing slideUp() slideToggle() • Manipulation • CSS fadeIn() fadeOut() • Events fadeTo() • Effects animate() • stop() Ajax • Utilities
  102. 102. • Core show() • Selectors hide() toggle() • Attributes slideDown() • Traversing slideUp() slideToggle() • Manipulation • CSS fadeIn() fadeOut() • Events fadeTo() • Effects animate() • stop() Ajax • Utilities
  103. 103. • Core <!DOCTYPE html><html><head> <style> • Selectors div {background:#bca; width:100px; border:1px solid green;} • Attributes </style> </head> • Traversing <body> <div id="block">Hello!</div> • Manipulation <script src="jquery.js"></script> <script> • CSS $(‘#block’).animate({ • Events ! width: ‘70%’, ! opacity: 0.4, • Effects ! marginLeft: ‘0.6in’, ! fontSize: ‘3em’, • Ajax ! borderWidth: ‘10px’ }, 1500); http://jsbin.com/oroto/edit • Utilities </script></body></html>
  104. 104. • Core $.ajax() ajaxCompete() • Selectors $.get() $.post() ajaxError() ajaxSend() • Attributes $.getJSON() $.getScript() ajaxStart() ajaxStop() • Traversing $.ajaxSetup() ajaxSuccess() • Manipulation load() • CSS serialize() • Events serializeArray() • Effects • Ajax • Utilities
  105. 105. • Core $.ajax() ajaxCompete() • Selectors $.get() $.post() ajaxError() ajaxSend() • Attributes $.getJSON() $.getScript() ajaxStart() ajaxStop() • Traversing $.ajaxSetup() ajaxSuccess() • Manipulation load() • CSS serialize() • Events serializeArray() • Effects • Ajax • Utilities
  106. 106. • Core <!DOCTYPE html><html><body> • <script src="jquery.js"> Selectors </script> • Attributes <script> • Traversing $.getJSON("http://twitter.com/ statuses/user_timeline.json? • Manipulation screen_name=rem&callback=?", function(data){ • CSS $.each(data,function(i,tweet){ $('<p/>').html • Events (tweet.text).appendTo('body'); if ( i == 30 ) return false; • Effects }); • }); Ajax </script></body></html> • Utilities http://jsbin.com/acisi/edit
  107. 107. • Core $.support $.isArray() • Selectors $.boxModel $.browser $.isFunction() • Attributes $.each() $.trim() $.param() • Traversing $.extend() $.grep() • Manipulation $.makeArray() • CSS $.map() $.inArray() • Events $.merge() $.unique() • Effects • Ajax • Utilities
  108. 108. • Core $.support $.isArray() • Selectors $.boxModel $.browser $.isFunction() • Attributes $.each() $.trim() $.param() • Traversing $.extend() $.grep() • Manipulation $.makeArray() • CSS $.map() $.inArray() • Events $.merge() $.unique() • Effects • Ajax • Utilities
  109. 109. • Core $.each(data, function(i, tweet){ • $('<p />') Selectors .html(tweet.text) • Attributes .appendTo('body'); • Traversing if ( i == 30 ) { return false; • Manipulation } }); • CSS • Events • Effects • Ajax • Utilities http://jsbin.com/acisi/edit
  110. 110. Plugins
  111. 111. What’s a plugin? A plugin is nothing more than a custom jQuery method created to extend the functionality of the jQuery object $(‘ul’).myPlugin()
  112. 112. Why create a plugin? The “do something” isn’t available in jQuery
  113. 113. Why create a plugin? Roll your own “do something” with a plugin!
  114. 114. A plugin in 6 steps
  115. 115. Step 1: create a private scope for $ alias
  116. 116. <!DOCTYPE html><html><body> <script src=”jquery.js”></script> <script> (function ($) { })(jQuery); </script></body></html>
  117. 117. Step 2: attach plugin to fn alias (aka prototype)
  118. 118. <!DOCTYPE html><html><body> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); }; // end of plugin })(jQuery); </script></body></html>
  119. 119. <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); }; // end of plugin })(jQuery); $(‘p’).notHate(); </script></body></html>
  120. 120. Step 3: add implicit iteration
  121. 121. <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function () { this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); }); }; // end of plugin })(jQuery); $(‘p’).notHate(); </script></body></html>
  122. 122. Step 4: enable chaining
  123. 123. <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); }); }; // end of plugin })(jQuery); $(‘p’).notHate().hide(); </script></body></html>
  124. 124. Step 5: add default options
  125. 125. <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); }); }; // end of plugin $.fn.notHate.defaults = {text:‘love’}; })(jQuery); $(‘p’).notHate(); </script></body></html>
  126. 126. Step 6: add custom options
  127. 127. <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); }); }; // end of plugin $.fn.notHate.defaults = {text:‘love’}; })(jQuery); $(‘p’).notHate({text: ‘love-love-love’}); </script></body></html>
  128. 128. <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function (options) { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); }); }; // end of plugin $.fn.notHate.defaults = {text:‘love’}; })(jQuery); $(‘p’).notHate({text: ‘love-love-love’}); </script></body></html>
  129. 129. <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options); return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); }); }; // end of plugin $.fn.notHate.defaults = {text:‘love’}; })(jQuery); $(‘p’).notHate({text: ‘love-love-love’}); </script></body></html>
  130. 130. <!DOCTYPE html><html><body> http://jsbin.com/ifuga/edit <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src=”jquery.js”></script> <script> (function ($) { $.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options); return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ settings.text) ); }); }; // end of plugin $.fn.notHate.defaults = {text:‘love’}; })(jQuery); $(‘p’).notHate({text: ‘love-love-love’}); </script></body></html>
  131. 131. Plugins are simple, just follow those steps.
  132. 132. News • Four conferences next year: London, Boston, San Francisco and online • New plugin site • jQuery Forum (moving from Google Groups) • jQuery.org & Foundation (Software Freedom Law Centre) • Infrastructure upgrade
  133. 133. Remy Sharp @rem jQuery team member Co-author of O'Reilly jQuery Cookbook (due November 20th) jqueryfordesigners.com remysharp.com Special thanks to Cody Lindley
  134. 134. Remy Sharp @rem jQuery team member Co-author of O'Reilly jQuery Cookbook (due November 20th) jqueryfordesigners.com ? Questions remysharp.com Special thanks to Cody Lindley
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×