Intro to jQuery - LUGOR - Part 1

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

Overview Who, what, where and why of jQuery Review Core jQuery Concepts jQuery API Overview jQuery plugins jQuery UI

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

What is jQuery? jQuery is a JavaScript Library! Dealing with the DOM (e.g. selecting, creating, traversing, changing, etc.) JavaScript Events Animations Ajax interactions

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…

Using jQuery we can do this jQuery(“#HiddenDiv”).show();

Using jQuery we can do this jQuery (“#HiddenDIV”).show(); var $ = jQuery; $(“#HiddenDiv”).show(); jQuery function

Using jQuery we can do this jQuery(“ #HiddenDIV ”).show(); jQuery Function jQuery Selector (CSS expression)

Using jQuery we can do this jQuery(“#HiddenDIV”) .show(); jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression)

Using jQuery we can do this jQuery(“#HiddenDIV”). show() ; jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression) jQuery Method

jQuery 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 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

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

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

jQuery API Overview Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities You can review Core Methods at: http://api.jquery.com

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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> A jQuery plugin in 6 steps

Step 3. add implicit iteration <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> 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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> 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.4.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(); </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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> 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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> 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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> 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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> 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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> 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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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> A jQuery plugin in 6 steps

Plugins are simple, just follow the steps!

jQuery UI Official jQuery Project Provides plugins that make user interface elements easy Contains: Interactions Widgets Effects Theming

Intro to jQuery - LUGOR - Part 1

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Intro to jQuery - LUGOR - Part 1 (20)

Recently uploaded (20)

Intro to jQuery - LUGOR - Part 1

Editor's Notes