jQuery For Developers Stack Overflow Dev Days Toronto

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

We’re not in Kansas anymore!

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

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

Who uses jQuery 35% of all site that use JavaScript, use jQuery 1 out 5 sites, use jQuery 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 It’s for both developers and designers

Where to get jQuery Download the source from Github (moved last night) Or use a CDN 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://docs.jquery.com or 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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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 (Draggable, Droppable, Resizable, Selectable & Sortable) Widgets (Accordian, Datepicker, Dialog, Progressbar, Slider, Tabs) Effects (AddClass, RemoveClass, Animate, Effects, etc.) Theming

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

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…

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

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

jQuery For Developers Stack Overflow Dev Days Toronto

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to jQuery For Developers Stack Overflow Dev Days Toronto (20)

Recently uploaded (20)

jQuery For Developers Stack Overflow Dev Days Toronto

Editor's Notes