Sections


Twitter Updates


JQuery - a new kind of Java script library

The jQuery JavaScript library "tries to treat its users with a sense of respect," simplifies development and makes coding fun - its creator says.


jQuery is an amazing JavaScript library that makes it easy to create wonderful web effects in just a few lines of code.
This JavaScript library emphasizes interaction between JavaScript and HTML. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. One of the main thing that I set out for myself was to write the most understandable JavaScript code in the fewest number of characters possible. jQuery usually exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions.


Advantages

1. Documentation : JQuery offers a very impressive documentation. Developers should enjoy different samples found in their documentation. Worth mentioning are the APIs as it feature explanation and samples for developers.

2. Simple Event Handling : JQuery uses bind to group together the function. This bind could easily go for callback and the description could easily be handled.

3. DOM Manipulation : DOM is quiet tricky in some libraries but JQuery, again simplifies it by “chaining” the elements. No need for huge amount of lines as everything could be “chained” in one line. If you want to make some changes, there are filters that will look at the list and show you the things you’re looking for. Right there, you can edit and delete the entries as you wish.


Disadvantages

1. Support : community supported library is a bad thing.

2. No widget : There is no direct widgets that can come from JQuery. However, it has already been compensated with the JQuery UI.

Best Practices

1. Always Descend From an #id : The fastest selector in jQuery is the ID selector ($('#someid')). This is because it maps directly to a native JavaScript method, getElementById().

2. Use Tags Before Classes

3. Cache jQuery Objects : Get in the habit of saving your jQuery objects to a variable.
Eg: var traffic_light = $('#content #traffic_light'); Never do like this: $('#traffic_light input.on).bind('click', function(){...});

4. Harness the Power of Chaining : This allows us to write less code, making our JavaScript more lightweight.
Eg: var $active_light = $active_light.bind('click', function(){...}) .css('border', '3px dashed yellow') .css('background-color', 'orange') .fadeIn('slow');

5. Use Sub-queries

6. Limit Direct DOM Manipulation : Create exactly what you need in memory, and then update the DOM.

7. Leverage Event Delegation : Every event in JavaScript “bubbles” up the DOM tree to parent elements. This is incredibly useful when we want many elements (nodes) to call the same function. Instead of binding an event listener function to many nodes—very inefficient—you can bind it once to their parent, and have it figure out which node triggered the event.

8. Eliminate Query Waste : jQuery fails nicely if it does not find any matching elements, it still takes time to look for them. If you have one global JavaScript for your entire site, it may be tempting to throw every one of your jQuery functions into ready() function. The most efficient way to do this is to use inline initialization functions.

9. Defer to $(window).load : There is a temptation among jQuery developers to hook everything into the $(document).ready pseudo event. It occurs during page render while objects are still downloading. If you notice your page stalling while loading, all those $(document).ready functions could be the reason why. You can reduce CPU utilization during the page load by binding your jQuery functions to the $(window).load event, which occurs after all objects called by the HTML have downloaded.

10. Learn the Library ( Click here to view the jQuery 1.3 library sheet)

 


[Last updated:08 Mar 2010]