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...
Today 
•    Who, what, where, and why of jQuery 
•    5 core jQuery concepts 
•    Overview of jQuery API 
•    How to bui...
Who uses jQuery 
•  35% of all sites that use JavaScript, use jQuery 
•  1 out 5 sites, of all sites, use jQuery 




    ...
Who uses jQuery 
•  35% of all sites that use JavaScript, use jQuery 
•  1 out 5 sites, of all sites, use jQuery 
     red...
Who uses jQuery 
•  35% of all sites that use JavaScript, use jQuery 
•  1 out 5 sites, of all sites, use jQuery 
     red...
What exactly is jQuery  
                        (if you don’t already know)  


•  jQuery is a JavaScript Library  
  (19...
What does that mean? 
It means no more of this 
var tables = document.getElementsByTagName(‘table’);

for (var t = 0; t < tables.length; t++) {
...
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 (C...
Using jQuery we can do this 

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



                    jQuery Selector ...
Using jQuery we can do this 

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



                    jQuery Selector ...
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 associate...
Why use jQuery over other soluKons 
•  Helps us to simplify and speed up web 
   development 
•  Allows us to avoid common...
Where to get jQuery 
•  Download the source from Google code 
   (moving to github soon) 
  h[p://code.google.com/p/jquery...
Ok, lets get to it! 
Concept 1. Find something, do something 
<!DOCTYPE html>
<html>
<body>
    <ul>
       
<li><a>home</a></li>
       
<li><...
Concept 1. Find something, do something 
<!DOCTYPE html>
<html>
<body>
    <ul>
       
<li><a>home</a></li>
       
<li><...
Concept 1. Find something, do something 
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
       
<li><a>home</a></li>
    ...
Concept 1. Find something, do something 
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
       
<li><a>home</a></li>
    ...
Concept 1. Find something, do something 
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
       
<li class=‘navLiItem’><a>...
Concept 1. Find something, do something 
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
       
<li class=‘navLiItem’><a>...
Concept 1. Find something, do something 
<!DOCTYPE html>
<html>
<body>
     <ul id=‘nav’>
        
<li class=‘navLiItem’><...
Concept 2. Create something, do something 
 <!DOCTYPE html>
 <html>
 <body>
 <ul id=‘nav’>
 </ul>
 </script>
 </body>
 </h...
Concept 2. Create something, do something 
 <!DOCTYPE html>
 <html>
 <body>
 <ul id=‘nav’>
 </ul>
 <script src=‘jquery.js’...
Concept 2. Create something, do something 
 <!DOCTYPE html>
 <html>
 <body>
 <ul id=‘nav’>
 </ul>
 <script src=‘jquery.js’...
Concept 2. Create something, do something 
 <!DOCTYPE html>
 <html>
 <body>
 <ul id=‘nav’>
    
<li><a>home</a></li>
    
...
Concept 3. Chaining 
<!DOCTYPE html>
<html>
<body>
     <ul id=‘nav’>
        
<li class=‘navLiItem’><a href=‘/home’>home<...
Concept 3. Chaining 
<!DOCTYPE html>
<html>
<body>
     <ul id=‘nav’>
        
<li class=‘navLiItem’><a href=‘/home’>home<...
Concept 3. Chaining 
<!DOCTYPE html>
<html>
<body>
     <ul id=‘nav’>
        
<li class=‘navLiItem’><a href=‘/home’>home<...
Concept 3. Chaining 
<!DOCTYPE html>
<html>
<body>
     <ul id=‘nav’>
        
<li class=‘navLiItem’><a href=‘/home’>home<...
Concept 4. Implicit iteraKon 
<!DOCTYPE html>
<html>
<body>
     <ul id=‘nav’>
        
<li class=‘navLiItem’><a href=‘/ho...
Concept 4. Implicit iteraKon 
<!DOCTYPE html>
<html>
<body>
     <ul id=‘nav’>
        
<li class=‘navLiItem’><a href=‘/ho...
Concept 5. jQuery() parameters 

•  First Parameter 
  CSS selectors ‐ e.g. jQuery(‘li’) 
  HTML ‐ e.g. jQuery(‘<li><a hre...
Review 
•    Find something, do something 
•    Create something, do something 
•    Chaining 
•    Implicit Itera)on 
•  ...
Overview of jQuery API 
•    Core 
•    Selectors 
•    A[ributes 
•    Traversing 
•    Manipula)on 
•    CSS 
•    Event...
Overview of jQuery API 
•    Core           jQuery()

•    Selectors      each() 
                    size()
•    A[ribute...
Overview of jQuery API 
•    Core           jQuery()

•    Selectors      each() 
                    size()
•    A[ribute...
Overview of jQuery API 
•    Core           <!DOCTYPE html>

     Selectors 
                    <html>
•                 ...
Overview of jQuery API 
•    Core           <!DOCTYPE html>

     Selectors 
                    <html>
•                 ...
Overview of jQuery API 
•    Core           jQuery(‘:visible’)

•    Selectors 
•    A[ributes 
•    Traversing 
•    Mani...
Overview of jQuery API 
•    Core           jQuery(‘:visible’)

•    Selectors      jQuery(‘:radio:enabled:checked’)

•   ...
Overview of jQuery API 
•    Core           jQuery(‘:visible’)

•    Selectors      jQuery(‘:radio:enabled:checked’)

•   ...
Overview of jQuery API 
•    Core           jQuery(‘:visible’)

•    Selectors      jQuery(‘:radio:enabled:checked’)

•   ...
Overview of jQuery API 
•    Core           jQuery(‘:visible’)

•    Selectors      jQuery(‘:radio:enabled:checked’)

•   ...
Overview of jQuery API 
•    Core           jQuery(‘:visible’)

•    Selectors      jQuery(‘:radio:enabled:checked’)

•   ...
Overview of jQuery API 
•    Core           jQuery(‘:visible’)

•    Selectors      jQuery(‘:radio:enabled:checked’)

•   ...
Overview of jQuery API 
•    Core           jQuery(‘:visible’)

•    Selectors      jQuery(‘:radio:enabled:checked’)

•   ...
Overview of jQuery API 
•    Core           attr()
•    Selectors      removeAttr()


•    A[ributes      addClass()
     ...
Overview of jQuery API 
•    Core           attr()
•    Selectors      removeAttr()


•    A[ributes      addClass()
     ...
Overview of jQuery API 
•    Core           <!DOCTYPE html><html><body>

•    Selectors      <input type="text" value="sea...
Overview of jQuery API 
•    Core           add()
            eq()
•    Selectors      children()
                    clos...
Overview of jQuery API 
•    Core           add()
            eq()
•    Selectors      children()
                    clos...
Overview of jQuery API 
•    Core           <!DOCTYPE html>

     Selectors 
                    <html>
•                 ...
Overview of jQuery API 
•    Core           html()
          replaceWith()
•    Selectors      text()
          replaceAll...
Overview of jQuery API 
•    Core           html()
          replaceWith()
•    Selectors      text()
          replaceAll...
Overview of jQuery API 
•    Core           <!DOCTYPE html>
•    Selectors      <html>
                    <body>
•    A[r...
Overview of jQuery API 
•    Core           css()
•    Selectors      offset()
•    A[ributes      offsetParent()
        ...
Overview of jQuery API 
•    Core           css()
•    Selectors      offset()
•    A[ributes      offsetParent()
        ...
Overview of jQuery API 
•    Core           <!DOCTYPE html>

     Selectors 
                    <html>
•                 ...
Overview of jQuery API 
•    Core           ready()
            blur()

     Selectors 
                                  ...
Overview of jQuery API 
•    Core           ready()
            blur()

     Selectors 
                                  ...
Overview of jQuery API 
•    Core           <!DOCTYPE html>

•    Selectors      <html>
                    <body>

•    A...
Overview of jQuery API 
•    Core           <!DOCTYPE html>

•    Selectors      <html>
                    <body>

•    A...
Overview of jQuery API 
•    Core           show()
•    Selectors      hide()
                    toggle()
•    A[ributes ...
Overview of jQuery API 
•    Core           show()
•    Selectors      hide()
                    toggle()
•    A[ributes ...
Overview of jQuery API 
•    Core           <!DOCTYPE html><html><head>

     Selectors 
                    <style> 
•   ...
Overview of jQuery API 
•    Core           jQuery.ajax()          jQuery.ajaxSetup()  
•    Selectors      jQuery.get() 
...
Overview of jQuery API 
•    Core           jQuery.ajax()          jQuery.ajaxSetup()  
•    Selectors      jQuery.get() 
...
Overview of jQuery API 
•    Core           <!DOCTYPE html> 
                    <html> 
•    Selectors      <body>  
    ...
Overview of jQuery API 
•    Core           jQuery.support          jQuery.trim() 
•    Selectors      jQuery.boxModel 
  ...
Overview of jQuery API 
•    Core           jQuery.support          jQuery.trim() 
•    Selectors      jQuery.boxModel 
  ...
Overview of jQuery API 
•    Core           jQuery.each(data.items, function(i,item){

•    Selectors      jQuery("<img/>"...
$ alias 
<!DOCTYPE html>
                      <!DOCTYPE html>
<html>
                               <html>
<head>
       ...
jQuery(document).ready() event 
<!DOCTYPE html>
                      <!DOCTYPE html>
<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 jQ...
Why Create a plugin? 
You want to “find something”, and “do 
something” but the “do something” is not 
available in jQuery....
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://aj...
A jQuery plugin in 6 steps 
Step 2. a[ach plugin to fn alias (aka prototype) 
<!DOCTYPE html><html><body>
<p>I hate jQuery...
A jQuery plugin in 6 steps 
Step 2. a[ach plugin to fn alias (aka prototype) 
<!DOCTYPE html><html><body>
<p>I hate jQuery...
A jQuery plugin in 6 steps 
Step 3. add implicit itera)on 
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean rea...
A jQuery plugin in 6 steps 
Step 3. add implicit itera)on 
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean rea...
A jQuery plugin in 6 steps 
Step 4. enable chaining 
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really ha...
A jQuery plugin in 6 steps 
Step 4. enable chaining 
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really ha...
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...
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 ...
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 ...
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 ...
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 ...
Plugins are simple.   
Just follow the steps! 
?
Upcoming SlideShare
Loading in...5
×

Devdays Seattle jQuery Intro for Developers

3,771

Published on

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

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • 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....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,771
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
219
Comments
1
Likes
8
Embeds 0
No embeds

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

    1. 1. Introduc)on for Developers 
    2. 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. 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. 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. 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. 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. 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. 8. What does that mean? 
    9. 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. 10. Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
    11. 11. Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery func)on 
    12. 12. Using jQuery we can do this  jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery Selector (CSS expression)  jQuery func)on 
    13. 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. 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. 15. It really is the   “write less, do more”   JavaScript Library! 
    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 ac)ve community  •  Tested on 50 browsers, 11 plaiorms  •  It’s for both coders and designers (we don’t  discriminate) 
    17. 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. 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. 19. Ok, lets get to it! 
    20. 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. 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. 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. 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. 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. 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. 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. 27. Concept 2. Create something, do something  <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> </script> </body> </html>
    28. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 38. Review  •  Find something, do something  •  Create something, do something  •  Chaining  •  Implicit Itera)on  •  jQuery() parameters 
    39. 39. Overview of jQuery API  •  Core  •  Selectors  •  A[ributes  •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
    40. 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. 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. 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. 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. 44. Overview of jQuery API  •  Core  jQuery(‘:visible’) •  Selectors  •  A[ributes  •  Traversing  •  Manipula)on  •  CSS  •  Events  •  Effects  •  Ajax  •  U)li)es 
    45. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 79. Plugins! 
    80. 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. 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. 82. A jQuery plugin in 6 steps  h[p://jsbin.com/eheku/edit#html 
    83. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 95. Plugins are simple.    Just follow the steps! 
    96. 96. ?
    1. A particular slide catching your eye?

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

    ×