jQuery is a JavaScript library that makes it easy to work with the Document Object Model (DOM) of a website. jQuery is not a replacement for JavaScript. It is a JavaScript library, which gives some extra functionality that is not available natively in JavaScript itself.
jQuery is designed to make it easy to create, manipulate, or destroy elements in the document. Manipulation includes animation, CSS effects such as fades, resizes, and so on.
jQuery also makes it very easy to add behaviors to elements. So, you can do things like drag boxes around, have things happen when you hover a mouse cursor over something, have scripts run when a select box is changed, and so on.
All of this can be accomplished in plain JavaScript if you feel the need to write it yourself, but there is no point in re-inventing the wheel. If there is a tool available that makes things easier for you, then you should not do it the hard way.
Besides, handwritten JavaScript tends to be much more verbose than it could be if you used a library, such as jQuery.
As an example, let's say that you want to get all of the <span> elements in a page that are contained in an element with the testme class, and change their contents to the word hi!. Here is the HTML of the example:
<html> <head> </head> <body> <h1 class="testme"><span>this will change</span></h1> <p>this will not</p> <p class="testme">this will also not</p> <p class="testme"><span>this will change</span></p> <a href="javascript:run_test()">do it</a> </body> </html>
When displayed in a browser, it will look like the following:
When the do it link is clicked, we want the view to change to this:
For the first test, here is how to do it in plain JavaScript. Place this code in the <head> section of the previous HTML code.
<script>
function run_test(){
var i,j,els,els2;
els=document.getElementsByTagName('*');
for(i in els){
if(!/(^| )testme( |$)/.test(els[i].className))continue;
els2=els[i].getElementsByTagName('span');
for(j in els2){
els2[j].innerHTML='hi!';
}
}
}
</script>It would be difficult to write this more compactly in pure JavaScript, but it's still too complex to be maintainable. Really, if you saw that for the first time, would you know straight away what it was trying to do? And, can you be sure that it will work in all browsers?
With jQuery, you can write a much more readable piece of code. Replace the above JavaScript with this:
<script src="../jquery.min.js"></script>
<script>
function run_test(){
$('.testme span').html('hi!');
}
</script>I know what you're thinking—where's the rest of it? Well, that's the whole thing. It very concisely strips away the confusion and all that you end up with is a very clear piece of code, which can be understood immediately. The problems of cross-browser compatibility are also solved by using the jQuery library. You can be sure that the new script will work as planned in all major browsers.
The example links to the jQuery library file, jquery.min.js, which you can download from http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js.