jQuery

jQuery is a new kind of JavaScript Library.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

About The Code

The code itself is written rather cleanly in an attempt to self-document. If you’ve spotted some areas of code that could be improved, please feel free to discuss it on the Development mailing list. All input is gladly appreciated!

All of the code is available in two formats:

  • Compressed (which allows you to have a significantly smaller file size) and
  • Uncompressed (good for debugging and to understand what is behind the magic).

Download jQuery

This is the recommended version of jQuery to use for your application. The code in here should be stable and usable in all modern browsers.

The minified version, while having a larger file size than the packed version, is generally the best version to use on production deployments. The packed version requires non-trivial client-side processing time to uncompress the code.

http://docs.jquery.com/Downloading_jQuery

Download the Windows Help File (chm)

Path : JQuery Doc

DOM Scripting

Understanding Selectors: the Backbone of jQuery

The first step to unobtrusive DOM scripting (at least in jQuery and Prototype) is using selectors. Selectors can (amazingly) select an element out of the DOM tree so that it can be manipulated in some way.

If you’re familiar with CSS then you’ll understand selectors in jQuery; they’re almost the same thing and use almost the same syntax. jQuery provides a special utility function to select elements. It is called $.

A set of very simple examples of jQuery selectors:
  1. $(document); // Activate jQuery for object
  2. $(‘#mydiv’) // Element with ID “mydiv”
  3. $(‘p.first’) // P tags with class first.
  4. $(‘p[title=”Hello”]’) // P tags with title “Hello”
  5. $(‘p[title^=”H”]’) // P tags title starting with H
  1. $(document);
    The first option will apply the jQuery library methods to a DOM object (in this case, the document object).
  2. $(’#mydiv’)
    The second option will select every <div> that has the <id> attribute set to “mydiv”.
  3. $(’p.first’)
    The third option will select all of the <p> tags with the class of “first”.
  4. $(’p[title=”Hello”]‘)
    This option will select from the page all <p> tags that have a title of “Hello”. Techniques like this enable the use of much more semantically correct (X)HTML markup, while still facilitating the DOM scripting required to create complex interactions.
  5. $(’p[title^=”H”]‘)
    This enables the selection of all of the <p> tags on the page that have a title that starts with the letter H.
These examples barely scratch the surface.

Almost anything you can do in CSS3 will work in jQuery, plus many more complicated selectors. The complete list of selectors is well documented on the jQuery Selectors DOC’s. If you’re feeling super-geeky, you could also read the CSS3 selector specification from the W3C.

Browser Compatibility

jQuery supports these browsers:

   * Firefox 1.5+
   * Internet Explorer 6+
   * Safari 2.0.2+
   * Opera 9+

Download jquery library:

http://docs.jquery.com/Downloading_jQuery

Once you add this file to your HTML page you can start using it. <script type=”text/javascript” src=”jquery.js”></script>

The coding standards are bit different from java script.

Eg: $(document).ready(function(){// Your code here});

In jQuery, a couple of handy effects are provided, to really make your web site stand out. Eg:

$(“a”).click(function(event){ event.preventDefault(); $(this).hide(“slow”); });


Best Tutorials on jQuery:

http://docs.jquery.com/Tutorials

http://www.visualjquery.com/

Have Fun With Jquery.

One thought on “jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s