You are reading an article. Lots more of these in the archives. Yehuda Katz Meet Yehuda Arrow

Articles

20Comment Retweet

The Rise Of jQuery

Apr 28, 2009 In Development By Yehuda Katz

jQuery uses the existing, ubiquitous API for interacting with the DOM: CSS selectors. Millions of designers already know how to use CSS. Before jQuery, JavaScript developers crawled the DOM with nightmarish, error-prone code while their designer brethren could simply select some page elements and apply styles. jQuery brings the accessibility of CSS targeting to JavaScript

One of the seminal works about JavaScript was DOM Scripting by Jeremy Keith. That book, which earned instant classic status, first opened the eyes of the web community to the fact that JavaScript programmers do most of their work with the browser’s DOM. jQuery became popular because it capitalized on that same idea. Instead of spending a lot of energy trying to convert JavaScript into Python or Ruby, jQuery provides the best possible abstraction on top of the DOM.


In developing this DOM abstraction, John Resig, the creator of jQuery, decided to stick with the existing, ubiquitous API for interacting with the DOM: CSS selectors. Millions of designers already know how to use CSS. Before jQuery, JavaScript developers crawled the DOM with nightmarish, error-prone code while their designer brethren could simply select some page elements and apply styles. jQuery brings the accessibility of CSS targeting to JavaScript. If a developer or even a designer knows how to apply style, they can easily apply JavaScript behavior as well using jQuery.


With CSS, making all paragraphs with the class important turn the color red is as simple as p.important { color: red }. jQuery leverages that same technique to apply behavior to elements. Select some page elements. Add behavior. For instance,say you wanted to bold those same elements once they are clicked. With jQuery,you would do:


    $("p.important").click(function() {
      $(this).css("font-weight", "bold");
    });


The conceptual similarity with CSS makes it easy to both leverage existing skills as well as make DOM scripting accessible to a whole new audience. Several surveys show that a majority of designers who use JavaScript program using jQuery. jQuery has taken hold of the Ruby on Rails community, even though Rails comes with built-in support for the Prototype library. That’s because getting started with jQuery is as simple as learning a few elements of JavaScript syntax, and you’re off to the races.

jQuery also supports a powerful technique called chaining, which makes it easy to apply multiple behaviors to a collection of elements at once, using powerful, straight-forward syntax. Let’s imagine that we wanted to take external links, apply a rel attribute and add a class at the same time. We would write the following code:


    $("a.external")
      .attr("external", "true")
      .addClass("external");


We could continue chaining as many behaviors as we like, mimicking the convenience and ease of use of CSS. And this is just the beginning. Because of the simple yet elegant architecture of jQuery, it’s trivial to add new behaviors that can be applied to group of elements. Imagine if you could add new rendering properties to CSS. With jQuery, it’s so easy that many jQuery users are creating reusable behaviors (sometimes called “plugins”) in the first day that they use jQuery. That’s because it’s as simple as:


    $.fn.makeExternal = function() {
      return $(this)
        .attr("external", "true")
        .addClass("external")
    }
    $("a.external").makeExternal();


Since writing plugins is so easy, jQuery has a veritable cornucopia of plugins; the power of jQuery is that plugins all work the same way. Select some elements using a CSS selector. Apply some behavior. Because it’s always the same, jQuery is easy to use. The jQuery core itself and most jQuery plugins follow the guessable API principle, making it easy to remember how to use various functions.

For instance, to get an attribute from part of the html, say the href of a link, you’d do something like:

  $("a").attr("href"); 

And to set the same attribute, you’d do:

  $("a").attr("href", "http://example.com")

To get and set CSS styles, the syntax is identical. To get the color from an element, you’d do:

  $("a").css("color")

And to set it, you simply do:

  $("a").css("color", "red") 

Moving forward, jQuery has significantly normalized the way developers and designers talk about the DOM. This makes it possible to build abstractions on top of it like jQuery UI and the Glimmer GUI tool. In fact, jQuery’s extensible nature is what makes it possible for Glimmer to easily support its own plugins and, one hopes, robust community around those plugins.

Follow the Conversation

20 comments so far. You should leave one, too.

Andrew Chalkley said on Apr 28, 2009

Great write up/introduction Katz!

Jeff said on Apr 28, 2009

Great article. Couple of thoughts - I don''t think it''s necessarily fair to say that before jQuery, "JavaScript developers crawled the DOM with nightmarish, error-prone code". There are other frameworks out there that make working cross browser and working with the DOM much easier, such as scriptaculous, prototype, mootools, Yahoo framework, etc. which have been around for a lot longer than jQuery.

Don''t get me wrong, I love jQuery, I''m a jQuery addict. It would be interesting to see an analysis of how jQuery was able to beat out the other frameworks to become king of the crop.

Jeff

Andrew said on Apr 29, 2009

I use Jquery all the time in my job, I find it was really easy to learn as Im a CSS pro. I enjoy how easy it is to create active content, and add great effects to my designs. Onward, jQuery!

Anti-Jquery said on Apr 29, 2009

With great power comes great responsibility... Only time will tell

Josh said on Apr 29, 2009

I know everyone is going to hate me for this but. JQuery to me is something you use to hack something together quick. I feel like JQuery is Javascript for designers for sure. And it does bring a fresh approach to adding interactions to your pages. But IMO it does not replace a more fundamental framework such as prototype or mootools.

Chris Gerke said on Apr 29, 2009

For those that are interested you can download a free PDF containing the full content of the book "DOM Scripting by Jeremy Keith" here.

http://bit.ly/19nPjT

Mark Cooke said on Apr 30, 2009

Whatever tools we can use to make life easier is a boon to developers - jQuery is just such a tool.
Not to diminish jQuery in any way, ExtJS is another great framework, and Coolite is an ASP.NET library that nicely wraps up the framework. ExtJS takes a more traditional OO design with classes and widgets and goes beyond DOM manipulation. Best of all, ExtJS can optionally use jQuery to perform CSS selectors and animations!

Robin said on May 1, 2009

@jeff prototype has been around for a while, but YUI only hit 1.0 four months before jQuery, and mootools didn’t hit 1.0 until 8 months later.

Jethro Larson said on May 1, 2009

I thought the article was going to be more about the history of jQuery. I''m a little disappointed.

Nathan L Smith said on May 1, 2009

@Robin Version numbers are meaningless.

I don''t think the all of the points made in the article really apply to jQuery specfically, but to any good JS framework. jQuery is easier to learn for designer-types, though.

Jidlafe said on May 13, 2009

I Yehuda Katz, my name is Jidlafe Hegner, and was born in Angola-Africa. I study in Brazil and I started in my career hear working with Java, and I bougth your book "jQuery em Ação" in Portugues, in inglês "jQuery in Action" yesterday. I want learn more about that Rich Library - jQuery.

Congratulations on collaborations.

NOTE: Forgeve me becouse my bad ingles.

Jidlage Hegner

Anthony Alexander said on May 21, 2009

I noticed the page uses prototype + scriptalicious and jquery, whatever for? I can''t imagine anything that can''t be done with only 1 framework. I agree with Jeff, alot of people are giving JQuery too much credit, but I guess that''s what happens when novices get excited over something they''ve never seen before. CSS selectors was the last thing I included in my own framework and it uses external selector engines, currently Peppy, I''d love to use sizzle but JQuery''s developer Mr.Resig is a little capitalist and I doubt I''ll be using that source anytime soon. This was very confusing, I still don''t know what you guys do here.. :(

edwin said on Jul 6, 2009

jquery is the best!

Joshua Allen said on Jul 11, 2009

@Anthony - I believe that prototype and scriptaculous were used for the comment box and gravatar functionality. I''m sure it would be possible to remove the dependencies and settle on only one library, but that hasn''t been a priority.

true religion said on Sep 14, 2009

I guess that’s what happens when novices get excited over something they’ve never seen before. CSS selectors was the last thing I included in my own framework and it uses external selector engines, currently Peppy....

koja said on Oct 16, 2009

Hi all
I am a web developper and and I am a little bit confused : does jquery worth it? do I have to learn it or there is a more powerful framework out there that can be more useful to me?

Derek Land said on Nov 6, 2009

I''ve been picking at jQuery for a while now - but more confused than not - and this is the first understandable, easy to read breakdown of library I''ve seen yet.

Thanks so much!

Keef Keef said on Jan 14, 2010

You know who loves jQuery? People like me who want to do the most mundane things in their intranet applications but work in a firm that still uses IE6.

diyaliz diyaliz said on May 1, 2010

jquery is the best!...

Marcus Tucker Marcus Tucker said on Sep 6, 2010

I''m surprised nobody else has pointed out that your example code references $("a.external") which is by definition an anchor which already has a CSS class of "external" applied to it (and hence it makes no sense to apply the class again).

Perhaps you meant $("a:external") which would rely on an ":external" custom pseudo-selector already having been defined? James Padolsey provides an implementation of exactly this here:
http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/

I also think that your examples for retrieving attributes and CSS colors should be altered to the following to make it clear that a value is returned (in contrast to the examples which set values):

var href = $("a").attr("href");

var color = $("a").css("color");