1.
jQuery Framework Mohammed Arif Senior Interactive Developer @ SapientNitro Twitter@ arif_iq Linkedin: http:// in.linkedin.com/in/mohdarif Blog: http:// www.mohammedarif.com

2.
Agenda: <ul><li>Why you should use jQuery </li></ul><ul><li>What is $() </li></ul><ul><li>What Unobtrusive JavaScript means </li></ul><ul><li>The jQuery wrapper </li></ul><ul><li>The document ready handler </li></ul><ul><li>Utility functions </li></ul><ul><li>Extending jQuery – Plugin Development </li></ul><ul><li>Using jQuery with other libraries </li></ul>

3.
Before We Start! <ul><li>Self-executed anonymous function </li></ul>// Create a anonymous function, to use as a wrapper ( function () { // The variable that would, normally, be global var msg = “It’s a self executed anonymous function!&quot;; alert ( msg ); // Close off the anonymous function and execute it })();

4.
Why you should use jQuery jQuery is ideal because it can create impressive animations and interactions (AJAX). jQuery is simple to understand and easy to use, which means the learning curve is small, while the possibilities are infinite. <ul><li>Fast, concise, unobtrusive JavaScript Library </li></ul><ul><ul><li>Lightweight footprint </li></ul></ul><ul><ul><ul><li>Approx 15KB in size (Minified and Gzipped) </li></ul></ul></ul><ul><ul><li>Cross-browser </li></ul></ul><ul><ul><ul><li>IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ </li></ul></ul></ul><ul><ul><li>CSS3 Compliant </li></ul></ul><ul><ul><ul><li>Supports CSS 1-3 and basic XPath </li></ul></ul></ul>

5.
What is $() <ul><li>Everything starts with $ </li></ul><ul><ul><li>It’s a shortcut: $() == jQuery() </li></ul></ul>the $() function removes the need to do a for loop to access a group of elements since whatever we put inside the parentheses will be looped through automatically and stored as a jQuery object. We can put just about anything inside the parentheses of the $() function.

6.
What Unobtrusive JavaScript means <a onclick=&quot;doSomething()&quot; href=&quot; backuplink.html &quot;>Click!</a> <a href=&quot;backuplink.html&quot; class=&quot;doSomething&quot;>Click!</a> $('a.doSomething').click(function(){ // Do something here! alert('You did something, woo hoo!'); }); Separation of functionality (the &quot;behavior layer&quot;) from a Web page's structure/content and presentation.

7.
$(document).ready() <ul><li>$(document).ready() </li></ul><ul><ul><li>Replacement for window.onload event </li></ul></ul><ul><ul><ul><li>Executes as soon DOM is ready </li></ul></ul></ul><ul><ul><ul><li>Doesn’t require external sources to be loaded </li></ul></ul></ul><ul><ul><ul><ul><li>Images </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Frames </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Etc </li></ul></ul></ul></ul><ul><ul><li>$( function ) = $(document).ready( function ) </li></ul></ul>

8.
Utility functions Functions namespaced by $ that don’t operate on a wrapped set. These functions could be thought of as top-level functions except that they are defined on the $ instance rather than window. jQuery flags $.browser $.boxModel $.styleFloat etc. Contains flags for the user agent, read from navigator.userAgent.

9.
Extending jQuery Fortunately, and by design, jQuery makes it easy to extend its set of functions by extending the wrapper returned when we call $(). jQuery offers a mechanism for adding in methods and functionality, bundled as plugins. Most of the methods and functions included in the default download are written using the jQuery plugin construct. $.fn.methodName = function() { … . } $.methodName = function() { … . }

10.
Important points to remember <ul><li>Name your file jquery.[insert name of plugin].js, eg. jquery.disable.js </li></ul><ul><li>All new methods are attached to the jQuery.fn object, all functions to the jQuery object. </li></ul><ul><li>inside methods, 'this' is a reference to the current jQuery object. </li></ul><ul><li>Any methods or functions you attach must have a semicolon (;) at the end - otherwise the code will break when compressed. </li></ul><ul><li>Your method must return the jQuery object, unless explicitly noted otherwise. </li></ul><ul><li>You should use this.each to iterate over the current set of matched elements - it produces clean and compatible code that way. </li></ul><ul><li>Always use jQuery instead of $ inside your plugin code - that allows users to change the alias for jQuery in a single place. </li></ul>

11.
Using jQuery with other libraries The definition of the $ variable is the largest point of contention and conflict when using other libraries on the same page as jQuery. As we know, jQuery uses $ as an alias for the jQuery name, which is used for every feature that jQuery exhibits. But other libraries, most notably Prototype, use the $ name as well. jQuery provides the $.noConflict() utility function to relinquish control of the $ name to whatever other library might wish to use it. The syntax of this function is as follows:

12.
References <ul><li>http://jquery.com/ </li></ul><ul><li>http:// docs.jquery.com/Main_Page </li></ul><ul><li>http://www.visualjquery.com/ </li></ul><ul><li>http://docs.jquery.com/Plugins/Authoring </li></ul><ul><li>http://www.learningjquery.com/ </li></ul><ul><li>http://groups.google.com/group/jquery-en </li></ul><ul><li>http:// javascriptlibraries.com / </li></ul>

13.
Feedback