jQuery: Simplified JavaScript

Advertisement
For many developers, manipulating an HTML document by using JavaScript and the DOM (document object model) can seem like a pain in the neck. It takes a lot of raw JavaScript just to make a web page do a trivial trick that might have left an impression back in the early days of the web but nowadays looks commonplace and tired. If you want to make your web pages act and move like desktop applications, then it's hard to avoid using JavaScript.

jQuery, an open source JavaScript library, eases the coding it takes to work with a web document's DOM. Put simply, if you use jQuery in your web documents, you'll write less code that's more powerful, have fewer headaches, and have access to a large jQuery plug-in library.

With jQuery, you'll never need to worry about your JavaScript breaking in different web browsers, as jQuery normalizes the differences behind the scenes and let's you get back to solving real coding problems. The creators of jQuery made this library incredibly easy to use, so designers as well as developers can take advantage of it.

jQuery

jQuery

Using jQuery with the DOM

First off, before you can use jQuery in your web documents, you must include it some way. The most popular way is to include it directly into the <head> of your document from Google's development servers:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Now that your web document is jQuery-aware, you can start finding elements via CSS selectors and controlling them with jQuery calls. One of the beautiful things about jQuery is that all jQuery methods return the element that you're working with, which means that you can endlessly chain together methods for tighter, cleaner code. Less coding, more doing. Suppose you wanted to hide all the DIVs on your web document at once; to do this with jQuery you'd write this:

jQuery('div').hide();

The above code selects all the DIVs on your web page and hides them via the "hide" jQuery method. To make all DIVs visible again, you simply replace the "hide" method with the "show" method. Suppose we now want to only hide the DIVs that are derived from a ".dosomething" class, we can do this:

jQuery('.dosomething').hide();

Or if "dosomething" were an ID instead of a class, we would code it like so:

jQuery('#dosomething').hide();

Are you starting to see the power of jQuery? jQuery objects contain a wealth of methods, such as the "fadeIn" and "fadeOut" methods, which makes animation a snap. For example, using the fade methods on a DIV will animate it by sliding it in or out of view. Using jQuery's animation and user interface methods can give your web pages panache that would take too long to code without jQuery by your side.

jQuery Makes JavaScript Easy

Writing raw JavaScript code to control your web document's DOM can be time-consuming and cumbersome to say the least. Not a lot of coders like to do it. To simplify your JavaScript, use the jQuery library. You'll write shorter, leaner code that's easier to understand and maintain.

Not only will you become a more efficient web developer but you'll also have access to the large library of jQuery plug-ins, and should you ever need support, the jQuery community on the Internet is vast and friendly. Once you start using jQuery for all your JavaScript and DOM needs, you'll never go back to old school way of JavaScript DOM coding.

Content: 
TOPlist