3 reasons why I use jQuery

These days, you can’t write a web application without using one of the billionth javascript library. Two of them stood out of the crowd : prototype and jQuery. I will explain why did I choose jQuery.

Prototype

Prototype is comfortably installed in a lot of developers mind because of two reasons : it was the first widely used and script.aculo.us. Being the first accepted library is a hard thing to do and it will always help them. Scriptaculous (I hate to write it with the dots) had an incredible effect on the popularity of prototype. For the first time, we could do “flash animation” without using flash. This was instant popularity.

jQuery

jQuery is one of the bastard child of prototype. It reuses the $() function but brings it to a level you never could have hope for. In fact, jQuery is almost completly based on the $ sign. Why? Maybe because it’s fast, maybe because it’s trendy. I don’t know. Example, you want to download a JSON from a server, $.getJSON(”http://www.thesite.com/thejson”).

Reason #1 : The selectors

jQuery supports a lot of selectors. And when I say a lot, I really mean a lot. First, there’s CSS selectors. You just have to apply what you know about CSS and you can write many complex selectors.

Second, there’s XPath selectors. When I was young (sic!), I wrote a lot of XSL. And when I say a lot, I really mean a lot. XSL makes an intensive use of that XPath thingy. Because XHTML is basically XML, we could use XPath to easily navigate throught the DOM. The problem was that before jQuery, nothing could do that. Now, we can!

In comparison, prototype just has the $(’theId’) to select a element. Ouch!

Reason #2 : The Attributes

It’s easy to add/remove attributes to any HTML element. I use it when I create new elements or when I need to add/remove a css class on an element. The interesting thing is that you can chain them and it will work. Example, I want

  1. $("div").attr("title", "This is a div").addClass("newClass");

You can add as many as you want…

Reason #3 : Ajax and JSON

Once again, ajax is now easy as 1,2,3. I wrote an article on JSON and in my mind, there’s no real alternative to JSON. jQuery helps you with it.

  1. $.getJSON("http://www.thesite.com/thejson",
  2.         function(json){
  3.                 alert("I received the json and put it in the json var : " + json.toString());
  4.         }
  5. );

It’s a little more complex with prototype.

Comments

  1. Seth May 29, 2007 at 16:54:50

    Nice article. Was always wondering about why people use one over the other.

    Shouldn’t this line with alert in the JSON callback function be:
    alert(”I received the json and put it in the json var ” + json.toString());

    You have a “:” where you should have a “+”.

  2. Dan (maintainer of Javascript Kata) May 29, 2007 at 17:11:19

    Thanks Seth. I corrected the post.

  3. Tobias May 29, 2007 at 17:54:38

    Prototype have had support for CSS selectors (implemented with XPath in the browser that supports it) for some time now with the $$() function: http://prototypejs.org/api/utility/dollar-dollar

  4. Wayne May 29, 2007 at 20:07:34

    prototype or jQuery is all fine and dandy for the most basic of javascript needs but once you need more heavy weight widgets nothing beats EXT (extjs.com). Although the YUI kit comes close :)

  5. Dan (maintainer of Javascript Kata) May 29, 2007 at 21:52:00

    @Tobias
    Thanks! I didn’t know that.

    @Wayne
    Every library has its advantages/disadvantages. I don’t want to start a debate because it would never end. It’s just that one day, you have to make a choice and I chose jQuery.

    For a great UI library that is based on jQuery, have a look at Interface Element.

  6. Ankur May 29, 2007 at 23:58:15

    Prototype was the first javascript library I tried, but I have since ditched it for the excellent Mootools framework. Now I can’t live without it!

  7. Oleg May 30, 2007 at 06:57:02

    jQuery rocks! If Ext were using jQuery closely it were much better I suppose.

  8. Luis' Parenthesis May 30, 2007 at 15:56:27

    I think jQuery is currently the closest thing to the right kind of abstraction for manipulating the DOM. It’s clean, it’s quick and it’s easy. It’s also extendable! Just include a few libraries along with an unobstrusive lightweight behavioral JavaScript and you can practically turn your microformatted static website into a fashionable Web 2.0 front-end.

    Of course, it incredibly dumb down the Web even more, but it’s my kind of stupidity, the type I like to aim for.

  9. 68cuda May 30, 2007 at 16:12:17

    Thanks for the article.

  10. [...] Pese que soy pro-MooTools, he de reconocer que jQuery me enamoró desde el primer día que lo usé. Lamentablemente no he podido dedicarle mucho tiempo, últimamente no he podido dedicarselo a nada, pero soy conscientes de que estos 3 motivos son un buen aliciente para decidirte por este framework. [...]

  11. [...] este sitio explican cuales son las principales tres razones de porque utilizar [...]

  12. Carlos Leopoldo November 26, 2007 at 04:19:00

    jQuery una buena alternativa para prototype o mootools…

    Desde hace tiempo estaba convencido que mootools era excelente cómo librería JavaScript, pero últimamente me he puesto a probar jQuery, debo reconocer que ya conocía jQuery pero siempre la pasaba por alto y nunca la probé por pereza, pensaba para …

  13. [...] beats jQuery and Ext for AIR jQuery vs. Prototype: OO JavaScript with or without training wheels 3 reasons why I use jQuery Tags: framework, function, JavaScript, [...]

Post a comment

Comments are moderated and innapropriate ones won't be approved. Please respect this public space.