Your SlideShare is downloading. ×
Intro to jQuery - LUGOR - Part 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Intro to jQuery - LUGOR - Part 1

3,916
views

Published on

Published in: Technology

1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,916
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
122
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. for Linux Lovers
    • 2. Introduction
      • Ralph Whitbeck
      • jQuery Team Member, on the Developer Relations team
      • Co-authored O’Rielly’s “jQuery Cookbook”
      • Senior Web Application Engineer 
      • BrandLogic Corporation ( http://brandlogic.com)
      • Blog: http://ralphwhitbeck.com
      • Twitter: @RedWolves
    • 3. The Official jQuery Podcast
    • 4. Overview
        • Who, what, where and why of jQuery
        • Review Core jQuery Concepts
        • jQuery API Overview
        • jQuery plugins
        • jQuery UI
    • 5. Who uses jQuery
        • 39.25% of all sites that use JavaScript
        • About 30% of the top 10,000 sites
      http://trends.builtwith.com/javascript/JQuery
    • 6. Who uses jQuery
        • 39.25% of all sites that use JavaScript
        • About 30% of the top 10,000 sites
      http://trends.builtwith.com/javascript/JQuery
    • 7. What is jQuery?
        • jQuery is a JavaScript Library!
        • Dealing with the DOM
          • (e.g. selecting, creating, traversing, changing, etc.)
        • JavaScript Events
        • Animations
        • Ajax interactions
    • 8. What does that mean?
    • 9.
      • 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…
    • 10. Using jQuery we can do this
      •  
      • jQuery(“#HiddenDiv”).show();
    • 11. Using jQuery we can do this
      •  
      • jQuery (“#HiddenDIV”).show();
      var $ = jQuery; $(“#HiddenDiv”).show(); jQuery function
    • 12. Using jQuery we can do this
      •  
      • jQuery(“ #HiddenDIV ”).show();
      jQuery Function jQuery Selector (CSS expression)
    • 13. Using jQuery we can do this
      •  
      • jQuery(“#HiddenDIV”) .show();
      jQuery Wrapped Set 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) jQuery Method
    • 15. jQuery really is the “write less, do more” JavaScript Library!
    • 16. 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 and mobile
        • It’s for both developers and designers
    • 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 and mobile
        • 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 and mobile
        • It’s for both developers and designers
    • 19. Where to get jQuery
        • Download the source from Github
        • Or use a CDN
        • jQuery CDN (Edgecast via (mt)
          • http://code.jquery.com/jquery-1.4.2.min.js Minified version
          • http://code.jquery.com/jquery-1.4.2.js Source version
          • Google
          • Microsoft
    • 20. 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
    • 21. jQuery API Overview
      • Core
      • Selectors
      • Attributes
      • Traversing
      • Manipulation
      • CSS
      • Events
      • Effects
      • Ajax
      • Utilities
      You can review Core Methods at: http://api.jquery.com
    • 22. 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
    • 23.
      • Step 1. create a private scope for $ alias
      <!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.
      • Step 2. attach plugin to fn alias
      • <!DOCTYPE html><html><body>
      • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.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
    • 25.
      • 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.4.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
    • 26.
      • 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.4.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
    • 27.
      • 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.4.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
    • 28.
      • 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.4.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
    • 29.
      • 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.4.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
    • 30.
      • 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.4.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
    • 31.
      • 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.4.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
    • 32.
      • 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.4.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
    • 33.
      • 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.4.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
    • 34.
      • 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.4.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
    • 35. Plugins are simple, just follow the steps!
    • 36. jQuery UI
      •   Official jQuery Project
      • Provides plugins that make user interface elements easy
      • Contains:
        • Interactions
        • Widgets
        • Effects
        • Theming