jQuery For Developers Stack Overflow Dev Days Toronto

10 months ago

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Do you like this presentation?

No comments yet

Post a comment

    Login or Signup to post a comment
    Login to SlideShare
    Login to Twitter
    Edit your comment Cancel

    Notes on slide 1

    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.

    3 Favorites

    jQuery For Developers Stack Overflow Dev Days Toronto - Presentation Transcript

    1. for Developers
    2. Introduction
      • Ralph Whitbeck
      • jQuery Team Member, on the Evangelism team
      • Co-authored O’Rielly’s “jQuery Cookbook” due out end of year
      • Senior Web Application Engineer 
      • BrandLogic Corporation ( http://brandlogic.com)
      • Blog: http://ralphwhitbeck.com
      • Twitter: @RedWolves
    3. We’re not in Kansas anymore!
    4. Overview
        • Who, what, where and why of jQuery
        • Review Core jQuery Concepts
        • jQuery API Overview
        • jQuery plugins
        • jQuery UI
        • jQuery News
        • Announcement
    5. Who uses jQuery
        • 35.36% of all sites that use JavaScript, use jQuery
        • A little more then 1 out 5 sites (23.07%), use jQuery
      http://trends.builtwith.com/javascript/JQuery
    6. Who uses jQuery
        • 35% of all site that use JavaScript, use jQuery
        • 1 out 5 sites, use jQuery
      http://trends.builtwith.com/javascript/JQuery
    7. Who uses jQuery
        • 35% of all site that use JavaScript, use jQuery
        • 1 out 5 sites, use jQuery
      http://trends.builtwith.com/javascript/JQuery
    8. What is jQuery?
        • jQuery is a JavaScript Library!
        • Dealing with the DOM
          • (e.g. selecting, creating, traversing, changing, etc.)
        • JavaScript Events
        • Animations
        • Ajax interactions
    9. What does that mean?
      • if (browserType == "ie") document.poppedLayer =
      • eval('document.getElementById("HiddenDIV")');
      • else
      • document.poppedLayer =
      • eval('document.layers["HiddenDIV"]');
      • document.poppedLayer.style.visibility = "visible";
      It means no more of this…
    11. Using jQuery we can do this
      •  
      • jQuery(“#HiddenDiv”).show();
    12. Using jQuery we can do this
      •  
      • jQuery (“#HiddenDIV”).show();
      var $ = jQuery; $(“#HiddenDiv”).show(); jQuery function
    13. Using jQuery we can do this
      •  
      • jQuery(“ #HiddenDIV ”).show();
      jQuery Function jQuery Selector (CSS expression)
    14. Using jQuery we can do this
      •  
      • jQuery(“#HiddenDIV”) .show();
      jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression)
    15. Using jQuery we can do this
      •  
      • jQuery(“#HiddenDIV”). show() ;
      jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression) jQuery Method
    16. jQuery really is the “write less, do more” JavaScript Library!
    17. Why use jQuery?
        • Helps us to simplify and speed up web development
        • Allows us to avoid common headaches associated with cross-browser development
        • Provides a large pool of plugins
        • Large and active community
        • Tested on 50 browsers, 11 platforms
        • It’s for both developers and designers
    18. Why use jQuery?
        • Helps us to simplify and speed up web development
        • Allows us to avoid common headaches associated with cross-browser development
        • Provides a large pool of plugins
        • Large and active community
        • Tested on 50 browsers, 11 platforms
        • It’s for both developers and designers
    19. Why use jQuery?
        • Helps us to simplify and speed up web development
        • Allows us to avoid common headaches associated with cross-browser development
        • Provides a large pool of plugins
        • Large and active community
        • Tested on 50 browsers, 11 platforms
        • It’s for both developers and designers
    20. Where to get jQuery
        • Download the source from Github (moved last night)
        • Or use a CDN
          • Google
          • Microsoft
    21. Core jQuery Concepts
        • Select Something, do something
        • Create something, do something
        • Chaining and Operating
        • Demo’d
        • http://ejohn.org/apps/learn-jquery/
        • and
        • http://ralphwhitbeck.com/talks/stackoverflowdevdays/createdosomething.html
    22. jQuery API Overview
      • Core
      • Selectors
      • Attributes
      • Traversing
      • Manipulation
      • CSS
      • Events
      • Effects
      • Ajax
      • Utilities
      You can review Core Methods at: http://docs.jquery.com or http://api.jquery.com
    23. jQuery Plugins
      •   There are over 2200 plugins
      • Plugins extend jQuery’s functionality
      • If you can’t find the functionality in a plugin, make your own!
      • You can make a jQuery Plugin in six steps
      • Step 1. create a private scope for $ alias
      <!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
      • Step 2. attach plugin to fn alias
      • <!DOCTYPE html><html><body>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function(){
        • $(this).text($(this).text().replace(/hate/g,'love'));
        • };
      • })(jQuery);
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 2. attach plugin to fn alias
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function(){
        • $(this).text($(this).text().replace(/hate/g,'love'));
        • };
      • })(jQuery);
      • jQuery('p').loveNotHate();
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 3. add implicit iteration
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function(){
          • this.each(function(){
            • $(this).text($(this).text().replace(/hate/g,'love'));
          • });
        • };
      • })(jQuery);
      • jQuery('p').loveNotHate();
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 3. add implicit iteration
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <p>I mean really hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function(){
          • this.each(function(){
            • $(this).text($(this).text().replace(/hate/g,'love'));
          • });
        • };
      • })(jQuery);
      • jQuery('p').loveNotHate();
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 4. enable chaining
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <p>I mean really hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function(){
          • return this.each(function(){
            • $(this).text($(this).text().replace(/hate/g,'love'));
          • });
        • };
      • })(jQuery);
      • jQuery('p').loveNotHate();
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 4. enable chaining
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <p>I mean really hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function(){
          • return this.each(function(){
            • $(this).text($(this).text().replace(/hate/g,'love'));
          • });
        • };
      • })(jQuery);
      • jQuery('p').loveNotHate() .hide() ;
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 5. add default options
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <p>I mean really hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function(){
          • return this.each(function(){
            • $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text ));
          • });
        • };
        • $.fn.loveNotHate.defaultOptions = {text:'love'};
      • })(jQuery);
      • jQuery('p').loveNotHate();
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 6. add custom options
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <p>I mean really hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function(){
          • return this.each(function(){
            • $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
          • });
        • };
        • $.fn.loveNotHate.defaultOptions = {text:'love'};
      • })(jQuery);
      • jQuery('p').loveNotHate( {text:'love-love-love'} );
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 6. add custom options
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <p>I mean really hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function( customOptions ){
          • return this.each(function(){
            • $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
          • });
        • };
        • $.fn.loveNotHate.defaultOptions = {text:'love'};
      • })(jQuery);
      • jQuery('p').loveNotHate( {text:'love-love-love'} );
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 6. add custom options
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <p>I mean really hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
      • <script>
      • (function($){
        • $.fn.loveNotHate = function( customOptions ){
          • var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions);
          • return this.each(function(){
            • $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
          • });
        • };
        • $.fn.loveNotHate.defaultOptions = {text:'love'};
      • })(jQuery);
      • jQuery('p').loveNotHate( {text:'love-love-love'} );
      • </script></body></html>
      A jQuery plugin in 6 steps
      • Step 6. add custom options
      • <!DOCTYPE html><html><body>
      • <p>I hate jQuery!</p>
      • <p>I mean really hate jQuery!</p>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></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>
      A jQuery plugin in 6 steps
    36. Plugins are simple, just follow the steps!
    37. jQuery UI
      •   Official jQuery Project
      • Provides plugins that make user interface elements easy
      • Contains:
        • Interactions (Draggable, Droppable, Resizable, Selectable & Sortable)
        • Widgets (Accordian, Datepicker, Dialog, Progressbar, Slider, Tabs)
        • Effects (AddClass, RemoveClass, Animate, Effects, etc.)
        • Theming
    38. What can jQuery & jQuery UI Produce?
        • High school students from Spotswood High School
        • Jamie Gilar
        • John Cicolella
        • Demo’d http://www.jamie.strunex.net/homework/channel/ Also Demo’d http://ralphwhitbeck.com/talks/stackoverflowdevdays/ui-createdosomething.html
    39. jQuery News
      • Four Conferences next year (online, San Francisco, London, and Boston)
      • Revamped Plugin site (by EOY)
      • jQuery Ownership transferred from John Resig to the Software Freedom Conservancy.
      • jQuery 1.4 coming soon
      • Much More, including…
    40. Announcement
    41. The Official jQuery Podcast
      • jQuery Podcast
      • Co-hosting with Elijah Manor
      • Scheduled to release 1 st Episode mid-November
      • Similar in format to This Week in Tech
      • Live streaming via http://tinychat.com/jquerypodcast
      • Twitter Account: @jQueryPodcast
    42. The Official jQuery Podcast
      • Interview key people in the jQuery Community
      • First scheduled guest is John Resig
      • Second scheduled guest is Richard D. Worth
      • Hopefully Jeff and Joel in the future
    43. Thank You
      • Questions?

    Ralph WhitbeckRalph Whitbeck + Follow

    1307 views, 3 favs, 4 embeds more

    About this presentation

    Usage Rights

    © All Rights Reserved

    Stats

    • 3 Favorites
    • 0 Comments
    • 1 Downloads
    • 1,100 Views on
      SlideShare
    • 207 Views on
      Embeds
    • 1,307 Total Views

    Embed views

    • 148 views on http://ralphwhitbeck.com
    • 30 views on http://www.globalnerdy.com
    • 24 views on http://blogs.msdn.com
    • 5 views on http://www.slideshare.net

    more

    Embed views

    • 148 views on http://ralphwhitbeck.com
    • 30 views on http://www.globalnerdy.com
    • 24 views on http://blogs.msdn.com
    • 5 views on http://www.slideshare.net

    less

    Accessibility

    View text version

    Additional Details

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint

    Categories

    Tags

    Follow SlideShare

    0 tweets
    1 share
    WordPress
    Blogger
    More
    options
    What's New

    © 2010 SlideShare Inc. All rights reserved.