for Developers
Introduction <ul><li>Ralph Whitbeck </li></ul><ul><li>jQuery Team Member, on the Evangelism team </li></ul><ul><li>Co-auth...
We’re not in Kansas anymore!
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>35.36% of all sites that use JavaScript, use jQuery </li></ul></ul><ul><ul><li>A little more ...
Who uses jQuery  <ul><ul><li>35% of all site that use JavaScript, use jQuery </li></ul></ul><ul><ul><li>1 out 5 sites, use...
Who uses jQuery  <ul><ul><li>35% of all site that use JavaScript, use jQuery </li></ul></ul><ul><ul><li>1 out 5 sites, use...
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 (moved last night) </li></ul></ul><ul><ul><li>Or use a CDN...
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>...
<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...
What can jQuery & jQuery UI Produce? <ul><ul><li>High school students from Spotswood High School </li></ul></ul><ul><ul><l...
jQuery News <ul><li>Four Conferences next year (online, San Francisco, London, and Boston) </li></ul><ul><li>Revamped Plug...
Announcement
The Official jQuery Podcast <ul><li>jQuery Podcast </li></ul><ul><li>Co-hosting with Elijah Manor </li></ul><ul><li>Schedu...
The Official jQuery Podcast <ul><li>Interview key people in the jQuery Community </li></ul><ul><li>First scheduled guest i...
Thank You <ul><li>Questions? </li></ul>
Upcoming SlideShare
Loading in...5
×

jQuery For Developers Stack Overflow Dev Days Toronto

5,495

Published on

10/23/2009 - jQuery for Developers - Stack Overflow DevDays

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,495
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide
  • There are 11 thousand + questions tagged at stackoverflow, jQuery 9 th highest used tag. (higher than iphone) jQuery is second only to javascript in client side scripting languages in questions tagged
  • 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.
  • Ask if there are any questions if there is time.
  • jQuery For Developers Stack Overflow Dev Days Toronto

    1. 1. for Developers
    2. 2. Introduction <ul><li>Ralph Whitbeck </li></ul><ul><li>jQuery Team Member, on the Evangelism team </li></ul><ul><li>Co-authored O’Rielly’s “jQuery Cookbook” due out end of year </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. We’re not in Kansas anymore!
    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><ul><ul><li>jQuery News </li></ul></ul><ul><ul><li>Announcement </li></ul></ul>
    5. 5. Who uses jQuery <ul><ul><li>35.36% of all sites that use JavaScript, use jQuery </li></ul></ul><ul><ul><li>A little more then 1 out 5 sites (23.07%), use jQuery </li></ul></ul>http://trends.builtwith.com/javascript/JQuery
    6. 6. Who uses jQuery <ul><ul><li>35% of all site that use JavaScript, use jQuery </li></ul></ul><ul><ul><li>1 out 5 sites, use jQuery </li></ul></ul>http://trends.builtwith.com/javascript/JQuery
    7. 7. Who uses jQuery <ul><ul><li>35% of all site that use JavaScript, use jQuery </li></ul></ul><ul><ul><li>1 out 5 sites, use jQuery </li></ul></ul>http://trends.builtwith.com/javascript/JQuery
    8. 8. 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>
    9. 9. What does that mean?
    10. 10. <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…
    11. 11. Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“#HiddenDiv”).show(); </li></ul>
    12. 12. Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery (“#HiddenDIV”).show(); </li></ul>var $ = jQuery; $(“#HiddenDiv”).show(); jQuery function
    13. 13. Using jQuery we can do this <ul><li>  </li></ul><ul><li>jQuery(“ #HiddenDIV ”).show(); </li></ul>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)
    15. 15. 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
    16. 16. jQuery really is the “write less, do more” JavaScript Library!
    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 </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 </li></ul></ul><ul><ul><li>It’s for both developers and designers </li></ul></ul>
    19. 19. 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 </li></ul></ul><ul><ul><li>It’s for both developers and designers </li></ul></ul>
    20. 20. Where to get jQuery <ul><ul><li>Download the source from Github (moved last night) </li></ul></ul><ul><ul><li>Or use a CDN </li></ul></ul><ul><ul><ul><li>Google </li></ul></ul></ul><ul><ul><ul><li>Microsoft </li></ul></ul></ul>
    21. 21. 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>
    22. 22. 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://docs.jquery.com or http://api.jquery.com
    23. 23. 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>
    24. 24. <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.3.2/jquery.min.js&quot;></script> <script> (function($){ })(jQuery); </script></body></html> 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><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.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
    26. 26. <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.3.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
    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><script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.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 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.3.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
    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.3.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
    30. 30. <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.3.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
    31. 31. <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.3.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
    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.3.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
    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.3.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
    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.3.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
    35. 35. <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.3.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
    36. 36. Plugins are simple, just follow the steps!
    37. 37. 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 (Draggable, Droppable, Resizable, Selectable & Sortable) </li></ul></ul><ul><ul><li>Widgets (Accordian, Datepicker, Dialog, Progressbar, Slider, Tabs) </li></ul></ul><ul><ul><li>Effects (AddClass, RemoveClass, Animate, Effects, etc.) </li></ul></ul><ul><ul><li>Theming </li></ul></ul>
    38. 38. What can jQuery & jQuery UI Produce? <ul><ul><li>High school students from Spotswood High School </li></ul></ul><ul><ul><li>Jamie Gilar </li></ul></ul><ul><ul><li>John Cicolella </li></ul></ul><ul><ul><li>Demo’d http://www.jamie.strunex.net/homework/channel/ Also Demo’d http://ralphwhitbeck.com/talks/stackoverflowdevdays/ui-createdosomething.html </li></ul></ul>
    39. 39. jQuery News <ul><li>Four Conferences next year (online, San Francisco, London, and Boston) </li></ul><ul><li>Revamped Plugin site (by EOY) </li></ul><ul><li>jQuery Ownership transferred from John Resig to the Software Freedom Conservancy. </li></ul><ul><li>jQuery 1.4 coming soon </li></ul><ul><li>Much More, including… </li></ul>
    40. 40. Announcement
    41. 41. The Official jQuery Podcast <ul><li>jQuery Podcast </li></ul><ul><li>Co-hosting with Elijah Manor </li></ul><ul><li>Scheduled to release 1 st Episode mid-November </li></ul><ul><li>Similar in format to This Week in Tech </li></ul><ul><li>Live streaming via http://tinychat.com/jquerypodcast </li></ul><ul><li>Twitter Account: @jQueryPodcast </li></ul>
    42. 42. The Official jQuery Podcast <ul><li>Interview key people in the jQuery Community </li></ul><ul><li>First scheduled guest is John Resig </li></ul><ul><li>Second scheduled guest is Richard D. Worth </li></ul><ul><li>Hopefully Jeff and Joel in the future </li></ul>
    43. 43. Thank You <ul><li>Questions? </li></ul>

    ×