Javascript: jQuery is the best free library, period! >> Scott Klarr

Previous Post: How to enable Javascript in any browser
Next Post: Binary clock - Free javascript!

Javascript: jQuery is the best free library, period!

Posted By Scott Klarr on Dec 14, 2007 at 6:47 am

What is jQuery?

Learning jQuery

jQuery Reference Book

jQuery is a lightweight but VERY powerful Javascript Library that makes coding robust javascript and ajax applications a breeze! At only 14kb gzipped, or 24kb packed, it leaves a rather nominal footprint especially when you consider the features it provides.

jQuery's main feature is its ability to traverse DOM objects with a great amount of control, and to run functions on those objects, but it also has a TON of other builtin features for making things easier including some functions to control rollover effects (see example below), CSS manipulation, AJAX & JSON communications, and more! The way it is structured also allows you to chain functions together making your source code unbeatably small and precise.

Here is an example of how to make a table of data auto highlight when you place your mouse over.

Example Table
Cell 1,1	Cell 1,2	Cell 1,2
Cell 2,1	Cell 2,2	Cell 2,2
Cell 3,1	Cell 3,2	Cell 3,2
Cell 4,1	Cell 4,2	Cell 4,2
Cell 5,1	Cell 5,2	Cell 5,2

Now lets look at the javascript that made that effect possible using jQuery:

$("#testTable tr").hover(
   function(){
      $(this).addClass("selected");
   },function(){
      $(this).removeClass("selected");
   }
);

Yup, thats it! Without jQuery, you would have to write at least 5 times more code for the same effect! Click here for full source code including HTML and CSS

Effects

There are also numerous built in visual effects that you can use ranging from sliding and fading, to the ability to specify your own animation properties using nearly any css property! Click Me For Demo

Boo!

The code that just did that is also very simple and straight forward:

$("#slideDemo").show("slow");

To learn more about jQuery and to download it absolutely free, check out www.jquery.com

Post Comment

Your Name
Email Address
Website URL
Comment