There are many Javascript libraries on the market, e.g. script.aculo.us, jquery, dojo, Prototype and so on. For most of the tasks there is no special reason why jquery. It ist mostly a matter of actual knowledge of the developers to keep learning time low when there is a basic knowledge available. Some JS-libs have an easier handling e.g. of json than other, in detail using json in jquery is simpler than in prototype.

Why should you use a js-lib at all? There are several reasons:

Simpler syntax and less code

Imagine you want to modify every div-element which has class “payment” assigned and want to set the background color to “#cccccc” to these elements.
You have something like this:

1
2
3
4
5
6

<div id="list">
  <div class="payment">some text</div>
  <div>some text</div>
  <div class="payment">some text</div>
  <div class="payment">some text</div>
</div>

With normal JS you could do the job like this:

1
2
3
4
5
6

var list = document.getElementById('list');
for (var i = 0; i < list.childNodes.length; i++) {
    if (list.childNodes.item(i).className == "payment") {
    	list.childNodes.item(i).style.backgroundColor = '#cccccc';
    }
}

Ok, six lines of code and moderate readable but what with all browser support? Umpf. And imagine this is a simple example.

With jquery you do:

1

$('div.payment').css('background-color' , '#cccccc');

And this runs in all browsers.

Better readability

Isn’t the example above better readable? You use css-selectors for selecting elements in javascript.

E.g. you want to remove the class from the div elements which are childs of the div with id “list”.

1
2
3

$('div#list div.payment').each(function() {
	$(this).removeClass('payment');
})

Better and easier extendability

You can simply create own plugins.

Multi-Browser compatibility

Nearly all functions will run in every browser.

There are often some cons why you should not use js-libs:

Big libray included

Yes it can be but e.g. with jquery you can use the compressed version for the live version. This will have only round about ~50k. And browser will cache the js file.

Higher loading times

Travering can be a costy thing, true. But with newer version it will become faster.

Conclusion

So I recommend using jquery because of the better readability, extendability and the separation of concerns.

Tip of the day:

Do not put JS-code inside html document when not needed. Use event-handling in outsourced js-file.

More infos about jquery you can find under http://www.javascriptkata.com/2007/05/29/3-reasons-why-i-use-jquery/

1
2
3
4
5
6
7

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

This is cool stuff but will not run in IE<8.

So why should i use this? Normally not, but to save requests.

Great article from http://css-tricks.com/data-uris/

1
2
3
4
5
6
7
8

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

To align vertically the paragraph P on line 7, you have to use display: table-cell; and vertical-align: middle;

Runs on Mozilla, Safari and IE8 but not IE7

This example is from W3.org. Orginal article can be found here.