for Linux Lovers
Introduction <ul><li>Ralph Whitbeck </li></ul><ul><li>jQuery Team Member, on the Developer Relations team </li></ul><ul><l...
The Official jQuery Podcast
Overview <ul><ul><li>Who, what, where and why of jQuery </li></ul></ul><ul><ul><li>Review Core jQuery Concepts </li></ul><...
Who uses jQuery  <ul><ul><li>39.25% of all sites that use JavaScript </li></ul></ul><ul><ul><li>About 30% of the top 10,00...
Who uses jQuery  <ul><ul><li>39.25% of all sites that use JavaScript </li></ul></ul><ul><ul><li>About 30% of the top 10,00...
What is jQuery?  <ul><ul><li>jQuery is a JavaScript Library! </li></ul></ul><ul><ul><li>Dealing with the DOM </li></ul></u...
What does that mean?
<ul><li>if (browserType == &quot;ie&quot;)  document.poppedLayer =  </li></ul><ul><li>eval('document.getElementById(&quot;...
Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“#HiddenDiv”).show(); </li></ul>
Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery (“#HiddenDIV”).show(); </li></ul>var $ = jQuery; $(“#Hidden...
Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“ #HiddenDIV ”).show(); </li></ul>jQuery Function jQuery Se...
Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“#HiddenDIV”) .show(); </li></ul>jQuery Wrapped Set jQuery ...
Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“#HiddenDIV”). show() ; </li></ul>jQuery Wrapped Set jQuery...
jQuery really is the “write less, do more” JavaScript Library!
Why use jQuery?  <ul><ul><li>Helps us to simplify and speed up web development </li></ul></ul><ul><ul><li>Allows us to avo...
Why use jQuery?  <ul><ul><li>Helps us to simplify and speed up web development </li></ul></ul><ul><ul><li>Allows us to avo...
Why use jQuery?  <ul><ul><li>Helps us to simplify and speed up web development </li></ul></ul><ul><ul><li>Allows us to avo...
Where to get jQuery <ul><ul><li>Download the source from Github </li></ul></ul><ul><ul><li>Or use a CDN </li></ul></ul><ul...
Core jQuery Concepts <ul><ul><li>Select Something, do something </li></ul></ul><ul><ul><li>Create something, do something ...
jQuery API Overview <ul><li>Core </li></ul><ul><li>Selectors </li></ul><ul><li>Attributes </li></ul><ul><li>Traversing </l...
jQuery Plugins <ul><li>  There are over 2200 plugins  </li></ul><ul><li>Plugins extend jQuery’s functionality </li></ul><u...
<ul><li>Step 1. create a private scope for $ alias </li></ul><!DOCTYPE html><html><body> <script src=&quot;http://ajax.goo...
<ul><li>Step 2. attach plugin to fn alias </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><script src=&quo...
<ul><li>Step 2. attach plugin to fn alias </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery...
<ul><li>Step 3. add implicit iteration </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</...
<ul><li>Step 3. add implicit iteration </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</...
<ul><li>Step 4. enable chaining </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li...
<ul><li>Step 4. enable chaining </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li...
<ul><li>Step 5. add default options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> ...
<ul><li>Step 6. add custom options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> <...
<ul><li>Step 6. add custom options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> <...
<ul><li>Step 6. add custom options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> <...
<ul><li>Step 6. add custom options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> <...
Plugins are simple, just follow the steps!
jQuery UI <ul><li>  Official jQuery Project </li></ul><ul><li>Provides plugins that make user interface elements easy </li...
Upcoming SlideShare
Loading in...5
×

Intro to jQuery - LUGOR - Part 1

4,004

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,004
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
123
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • It simplifies…
  • Wrapped Set , is an array like structure that contains each of the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer. More importantly though you can also apply jQuery functions against all the selected elements.
  • Any good JavaScript framework will do these top two points
  • It’s these last four that really set jQuery apart
  • It’s these last four that really set jQuery apart
  • Learn jQuery Effects Demo
  • Show AIR APP (Screen 4) The API is broken up to help you find what you need to do one of the core jquery functions select, create, do something then do something else. The API is categorized by functionality
  • Create a private scope for the jQuery Alias
  • So what do you need to do to be able to use jQuery on your page.
  • Intro to jQuery - LUGOR - Part 1

    1. 1. for Linux Lovers
    2. 2. Introduction <ul><li>Ralph Whitbeck </li></ul><ul><li>jQuery Team Member, on the Developer Relations team </li></ul><ul><li>Co-authored O’Rielly’s “jQuery Cookbook” </li></ul><ul><li>Senior Web Application Engineer  </li></ul><ul><li>BrandLogic Corporation ( http://brandlogic.com) </li></ul><ul><li>Blog: http://ralphwhitbeck.com </li></ul><ul><li>Twitter: @RedWolves </li></ul>
    3. 3. The Official jQuery Podcast
    4. 4. Overview <ul><ul><li>Who, what, where and why of jQuery </li></ul></ul><ul><ul><li>Review Core jQuery Concepts </li></ul></ul><ul><ul><li>jQuery API Overview </li></ul></ul><ul><ul><li>jQuery plugins </li></ul></ul><ul><ul><li>jQuery UI </li></ul></ul>
    5. 5. Who uses jQuery <ul><ul><li>39.25% of all sites that use JavaScript </li></ul></ul><ul><ul><li>About 30% of the top 10,000 sites </li></ul></ul>http://trends.builtwith.com/javascript/JQuery
    6. 6. Who uses jQuery <ul><ul><li>39.25% of all sites that use JavaScript </li></ul></ul><ul><ul><li>About 30% of the top 10,000 sites </li></ul></ul>http://trends.builtwith.com/javascript/JQuery
    7. 7. What is jQuery? <ul><ul><li>jQuery is a JavaScript Library! </li></ul></ul><ul><ul><li>Dealing with the DOM </li></ul></ul><ul><ul><ul><li>(e.g. selecting, creating, traversing, changing, etc.) </li></ul></ul></ul><ul><ul><li>JavaScript Events </li></ul></ul><ul><ul><li>Animations </li></ul></ul><ul><ul><li>Ajax interactions </li></ul></ul>
    8. 8. What does that mean?
    9. 9. <ul><li>if (browserType == &quot;ie&quot;) document.poppedLayer = </li></ul><ul><li>eval('document.getElementById(&quot;HiddenDIV&quot;)'); </li></ul><ul><li>else </li></ul><ul><li>document.poppedLayer = </li></ul><ul><li>eval('document.layers[&quot;HiddenDIV&quot;]'); </li></ul><ul><li>document.poppedLayer.style.visibility = &quot;visible&quot;; </li></ul>It means no more of this…
    10. 10. Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“#HiddenDiv”).show(); </li></ul>
    11. 11. Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery (“#HiddenDIV”).show(); </li></ul>var $ = jQuery; $(“#HiddenDiv”).show(); jQuery function
    12. 12. Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“ #HiddenDIV ”).show(); </li></ul>jQuery Function jQuery Selector (CSS expression)
    13. 13. Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“#HiddenDIV”) .show(); </li></ul>jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression)
    14. 14. Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“#HiddenDIV”). show() ; </li></ul>jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression) jQuery Method
    15. 15. jQuery really is the “write less, do more” JavaScript Library!
    16. 16. Why use jQuery? <ul><ul><li>Helps us to simplify and speed up web development </li></ul></ul><ul><ul><li>Allows us to avoid common headaches associated with cross-browser development </li></ul></ul><ul><ul><li>Provides a large pool of plugins </li></ul></ul><ul><ul><li>Large and active community </li></ul></ul><ul><ul><li>Tested on 50 browsers, 11 platforms and mobile </li></ul></ul><ul><ul><li>It’s for both developers and designers </li></ul></ul>
    17. 17. Why use jQuery? <ul><ul><li>Helps us to simplify and speed up web development </li></ul></ul><ul><ul><li>Allows us to avoid common headaches associated with cross-browser development </li></ul></ul><ul><ul><li>Provides a large pool of plugins </li></ul></ul><ul><ul><li>Large and active community </li></ul></ul><ul><ul><li>Tested on 50 browsers, 11 platforms and mobile </li></ul></ul><ul><ul><li>It’s for both developers and designers </li></ul></ul>
    18. 18. Why use jQuery? <ul><ul><li>Helps us to simplify and speed up web development </li></ul></ul><ul><ul><li>Allows us to avoid common headaches associated with cross-browser development </li></ul></ul><ul><ul><li>Provides a large pool of plugins </li></ul></ul><ul><ul><li>Large and active community </li></ul></ul><ul><ul><li>Tested on 50 browsers, 11 platforms and mobile </li></ul></ul><ul><ul><li>It’s for both developers and designers </li></ul></ul>
    19. 19. Where to get jQuery <ul><ul><li>Download the source from Github </li></ul></ul><ul><ul><li>Or use a CDN </li></ul></ul><ul><ul><li>jQuery CDN (Edgecast via (mt) </li></ul></ul><ul><ul><ul><li>http://code.jquery.com/jquery-1.4.2.min.js Minified version </li></ul></ul></ul><ul><ul><ul><li>http://code.jquery.com/jquery-1.4.2.js Source version </li></ul></ul></ul><ul><ul><ul><li>Google </li></ul></ul></ul><ul><ul><ul><li>Microsoft </li></ul></ul></ul>
    20. 20. Core jQuery Concepts <ul><ul><li>Select Something, do something </li></ul></ul><ul><ul><li>Create something, do something </li></ul></ul><ul><ul><li>Chaining and Operating </li></ul></ul><ul><ul><li>Demo’d </li></ul></ul><ul><ul><li>http://ejohn.org/apps/learn-jquery/ </li></ul></ul><ul><ul><li>and </li></ul></ul><ul><ul><li>http://ralphwhitbeck.com/talks/stackoverflowdevdays/createdosomething.html </li></ul></ul>
    21. 21. jQuery API Overview <ul><li>Core </li></ul><ul><li>Selectors </li></ul><ul><li>Attributes </li></ul><ul><li>Traversing </li></ul><ul><li>Manipulation </li></ul><ul><li>CSS </li></ul><ul><li>Events </li></ul><ul><li>Effects </li></ul><ul><li>Ajax </li></ul><ul><li>Utilities </li></ul>You can review Core Methods at: http://api.jquery.com
    22. 22. jQuery Plugins <ul><li>  There are over 2200 plugins </li></ul><ul><li>Plugins extend jQuery’s functionality </li></ul><ul><li>If you can’t find the functionality in a plugin, make your own! </li></ul><ul><li>You can make a jQuery Plugin in six steps </li></ul>
    23. 23. <ul><li>Step 1. create a private scope for $ alias </li></ul><!DOCTYPE html><html><body> <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> <script> (function($){ })(jQuery); </script></body></html> A jQuery plugin in 6 steps
    24. 24. <ul><li>Step 2. attach plugin to fn alias </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function(){ </li></ul></ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g,'love')); </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    25. 25. <ul><li>Step 2. attach plugin to fn alias </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function(){ </li></ul></ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g,'love')); </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate(); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    26. 26. <ul><li>Step 3. add implicit iteration </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function(){ </li></ul></ul><ul><ul><ul><li>this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g,'love')); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate(); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    27. 27. <ul><li>Step 3. add implicit iteration </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><p>I mean really hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function(){ </li></ul></ul><ul><ul><ul><li>this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g,'love')); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate(); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    28. 28. <ul><li>Step 4. enable chaining </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><p>I mean really hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function(){ </li></ul></ul><ul><ul><ul><li>return this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g,'love')); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate(); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    29. 29. <ul><li>Step 4. enable chaining </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><p>I mean really hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function(){ </li></ul></ul><ul><ul><ul><li>return this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g,'love')); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate() .hide() ; </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    30. 30. <ul><li>Step 5. add default options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><p>I mean really hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function(){ </li></ul></ul><ul><ul><ul><li>return this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text )); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>$.fn.loveNotHate.defaultOptions = {text:'love'}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate(); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    31. 31. <ul><li>Step 6. add custom options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><p>I mean really hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function(){ </li></ul></ul><ul><ul><ul><li>return this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>$.fn.loveNotHate.defaultOptions = {text:'love'}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate( {text:'love-love-love'} ); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    32. 32. <ul><li>Step 6. add custom options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><p>I mean really hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function( customOptions ){ </li></ul></ul><ul><ul><ul><li>return this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>$.fn.loveNotHate.defaultOptions = {text:'love'}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate( {text:'love-love-love'} ); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    33. 33. <ul><li>Step 6. add custom options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><p>I mean really hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function( customOptions ){ </li></ul></ul><ul><ul><ul><li>var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); </li></ul></ul></ul><ul><ul><ul><li>return this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>$.fn.loveNotHate.defaultOptions = {text:'love'}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate( {text:'love-love-love'} ); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    34. 34. <ul><li>Step 6. add custom options </li></ul><ul><li><!DOCTYPE html><html><body> </li></ul><ul><li><p>I hate jQuery!</p> </li></ul><ul><li><p>I mean really hate jQuery!</p> </li></ul><ul><li><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>(function($){ </li></ul><ul><ul><li>$.fn.loveNotHate = function( customOptions ){ </li></ul></ul><ul><ul><ul><li>var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); </li></ul></ul></ul><ul><ul><ul><li>return this.each(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>$(this).text($(this).text().replace(/hate/g, options.text )); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>$.fn.loveNotHate.defaultOptions = {text:'love'}; </li></ul></ul><ul><li>})(jQuery); </li></ul><ul><li>jQuery('p').loveNotHate( {text:'love-love-love'} ); </li></ul><ul><li></script></body></html> </li></ul>A jQuery plugin in 6 steps
    35. 35. Plugins are simple, just follow the steps!
    36. 36. jQuery UI <ul><li>  Official jQuery Project </li></ul><ul><li>Provides plugins that make user interface elements easy </li></ul><ul><li>Contains: </li></ul><ul><ul><li>Interactions </li></ul></ul><ul><ul><li>Widgets </li></ul></ul><ul><ul><li>Effects </li></ul></ul><ul><ul><li>Theming </li></ul></ul>
    1. A particular slide catching your eye?

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

    ×