5 Reasons Why I Love (and Am Sticking With) jQuery

by Matt Ward

December 20, 2010 in design Resources

In the same way that I think that it’s safe to say that WordPress has become the defacto blogging engine on the web today (and possibly the most popular content management package, period), it seems to me that jQuery has probably also become the nearly equally dominant JavaScript framework. At the very least, it seems to be the one we’re talking about the most.

I think that there are a number of different reasons as to why this would be. Altogether, it’s just a really awesome framework that readily and easily extends what we can do with client-side coding routines. In this article, I would like to look at the five key reasons why I have personally and enthusiastically adopted jQuery.

Selectors

jQuery’s ability to use CSS-like selectors in order to target certain elements or groups of elements within a document is, hands down, my absolute favourite feature. It’s just so incredibly useful. For instance, if I wanted to use CSS to style all the list elements in a list with the id of “mylist” I could do it like this:

#mylist li{ color : blue }

But let’s say I subsequently wanted to use jQuery to change the color of all these elements to red (likely based on some condition). Well, I could use the exact same selector syntax to accomplish this:

jQuery(“#mylist li”).css(“color”,“red”);

There are a couple of things that I really love about this. First, the familiarity makes the syntax very accessible and easy to learn for people who are familiar with CSS. This was the case with me when I first came to jQuery. I was already quite proficient with creating styles and had a solid understanding of how to target elements with selectors. Ultimately, this meant that I was able to pick up on jQuery’s selector syntax almost immediately, cutting down on the overall learning curve.

The other thing that this use of selectors does is to really simplify accessing different elements from the DOM. In plain JavaScript, we can access elements via their id, through the getElementById() method of the document object. To access a collection of elements, we would have to manually work through child arrays and, if you only wanted certain elements, you would have to do a bunch of cross checking.

With jQuery, the framework does all the heavy lifting for us, making it super easy to create rich, document-changing functionality!

Events

Traditionally, if I wanted to attach a function to a particular event on an HTML element, such as a click, focus or hover, I would have to use tag attributes such as onclick, onmouseover or onfocus. These worked well enough and still server their purposes.

However, using jQuery, we can actually use the built in listeners to attach our functions to a wide variety of different events. All we need to do is use the following basic syntax.

jQuery(“#mylist li”).click( function(){ ... });

Now every time someone clicks a list item within the object with id of “mylist”, the defined function will execute. If we’re only working with one or two items, there are probably not are all that many benefits over using the HTML attribute method (other than cleaning up our HTML code). However, if we needed to apply listeners to more than just a few elements, the jQuery technique can be a far more efficient way of doing things.

Even better (from my perspective) is the ability to change event behaviours. Sometimes, there are circumstances where you may want to change the functionality that is executed on a particular event. As far as I can tell, there is no easy way of doing this when using the HTML attributes. Theoretically, we could clone a particular element, remove it and then replace the original with the clone, just changing the required attribute. It’s not a very elegant solution though.

Using jQuery, however, we can simply use the unbind() method.

jQuery(“#mylist li”).unbind(“click”);

jQuery(“#mylist li”).click( function(){ ... });

This is a super useful technique, allowing us to flip and switch functionality on the fly. It has probably saved me hours and hours of writing ugly, clumsy code to do this exact same thing.

Animation

One of the other things that jQuery is probably best known for is its ability to control on-screen animations, some of which can actually become quite complex. This is definitely a huge benefit of using the framework.

I remember creating my own custom animations with plain-Jane JavaScript, and while it really wasn’t all that difficult (just a bunch of math and changing CSS properties), it was a time consuming process that involved a lot of coding, testing, calculating and re-coding. Using the animate() method, or a number of others such as fadeIn() or slideDown(), in can take just a matter of minutes to achive effects that would have taken hours to code if we were doing it by hand.

For example, suppose we have a message box that appears on screen, perhaps reporting on errors or confirming that an action had been completed. As developers and designers with good usability habits, we need to provide the user with a way of closing the warning message, so we create a close (x) button. When the button is clicked, we could easily make it vanish by changing the CSS display property with something like this:

document.getElementById(“msg”).style.display = “none”;

The warning message would instantly vanish, and our goal would be accomplished. With jQuery, however, we can be a little more slick:

jQuery(“#msg”).fadeOut();

Simply put, this will cause the element to slowly fade out and vanish from the DOM. Ultimately, it achieves the same general purpose as the straight JavaScript technique, but the user experience is just a little bit slicker and more enjoyable. Though this example doesn’t use it, methods like fadeOut() also allow us to set options to control the speed of the animation, and even provide an additional function to execute once the animation is complete.

This extra animation functionality makes creating slick, animated UI relatively simple, even for beginners who have only limited coding experience.

Extensibility

One of the concepts that we hear associated with jQuery all the time is the plugin. There are all kinds of different plugins out there, with each building upon the existing core of the framework. I believe that, over time, some of the most popular have even been integrated into the core.

Basically, all a jQuery plugin really constitutes is an extra block of code that adds an additional method (or methods) to the core jQuery object. Thus, whenever a new jQuery object is initiated, the plugin method will also be included, allowing it to be executed just like any other method.

The simple beauty of this is that it makes the framework hugely adaptable. If we were to include all of the plugins that exist out there in the core, jQuery would become a huge, bloated monster, both in terms of its overall size in bytes, and in terms of the amount of memory that would need to be allocated with every initialization of the object.

By focusing on a basic plugin architecture, though, jQuery itself can remain smaller and leaner, and developers can choose to include the functionality that they need while excluding the functionality that they don’t – sometimes even within the same site or application.

For instance, in one project that I have been working on recently, there was a section that needed to be able to generated data tables. I used jQuery AJAX to fetch the data, and then a fully featured jQuery plugin to transform the simple, static HTML table into a fully sortable, searchable and paginated table that made for a far better user experience. However, I only needed that plugin to be visible to a certain section of the overall project, so I used some basic conditional logic to only supply the plugin when it was needed, thereby preventing jQuery itself from becoming bloated with unnecessary methods.

Regardless, there are hundreds and hundreds of different plugins out there (many of which are variations on solving the same basic problem), and when you include those within the overall jQuery family, the possibilities suggested by its functionality are, theoretically, endless.

Community

Like any open source project, jQuery has also developed its own, dedicated community of users and developers. In many ways, it reminds me of the WordPress community. Thousands and thousands of people are using and contributing to jQuery every single day, generally by means of the plugins that we were just discussing. Sometimes, as is the case with my own simple Contained Sticky Scroll plugin, they are authored by a single developer. Other times, a plugin may be created by a team, or perhaps originally created by one person, but expanded upon and supported by several others.

So what’s the advantage of this?

Well I’m sure you’ve heard the saying that two heads are better than one, meaning that having two people thinking cooperatively about the same problem is likely to result in a better solution that if just one individual was working on it. If that’s true of just two minds, how much more would it be true of thousands and thousands of minds? Granted, not everyone in the jQuery community is working on the same problems at the same time, and we frequently see multiple solutions to the same problem (think of how many tooltip plugins there are out there), but the continued, innovative problem solving moves us ever forward.

Ultimately, the existence of the community that has sprung up around jQuery also provides a great deal of support for beginners, or even intermediate users (which I consider myself). I still frequent forums from time to time, in an effort to find a solution to a particularly vexing problem, and with the vast number of jQuery experts out there, I am usually able to track down an answer to help me do what I need to get done.

This kind of vast and accessible support network is just one more reason why I love working with jQuery and find it to be one of the single most valuable tools in my development toolbox.

But What About the Others?

Yes I realize that there are some other JavaScript frameworks out there. MooTools seems to have a pretty loyal following. Have I tried them? Not at all. There has really been no need. jQuery has been able to do pretty much everything I’ve ever needed of it (and a whole lot more). Given the benefits that I can derive from its selectors, events, animation, extensibility and community, why would I use anything else?

Until I’m presented with a framework that can do something that jQuery can’t, or which can do it in a clearly superior way, I’ll be sticking with my current choice. If it’s not broken, as they say, don’t fix it.

Moreover, given the rampant popularity of jQuery, I cannot help wondering if the future holds the possibility of it becoming more than just a framework. Could it be possible that eventually browsers will start supporting jQuery natively? It certainly doesn’t seem beyond the realm of possibility, especially as we move towards richer and richer web apps that ultimately require the broad range of functionality that jQuery has to offer.

It may not happen at all, but I think that if any framework has the potential to become a natively supported extension of JavaScript, it would almost certainly be jQuery. Call me a romantic, but and I guess that’s just one more reason to love it and stick with it.

Powered by Shutterstock

About Matt Ward

  • Federica Sibella

    Dec 20th

    and because it’s very easy to learn, very well documented and widely adopted -> there are many examples and many tutorials for those willing to experiment new solutions :)

  • ditatompel

    Dec 20th

    And jQuery.noConflict() function. haha

  • Tiago

    Dec 20th

    Jquery is not magic, it surely is easy and nice!
    But you could use regular javascript to attach and dettach event handlers before jQuery was around… that’s what jQuery does anyway…

  • Brian L.

    Dec 20th

    I like the fact that jQuery can do so many things and is so light weight when compared to other javascript frameworks!

  • NakedISIS

    Dec 20th

    wow, i use jquery today and ajax now, they’re come big today :D

    how about fb box in sidebar ?

  • Rakesh Pai

    Dec 21st

    The problem with having used only one thing and not looking at what others are doing is that you don’t know what you are missing.

    For example, jQuery doesn’t have a dependency management system for managing development and deployment in big projects.

    Also, for large projects, working with selectors starts getting clunky very quickly. You want to start working with “components” or “widgets”. Jquery doesn’t provide any infrastructure for letting you do that.

    My tip: at least explore to see what other frameworks do before picking a favourite. If all you have is a hammer…

  • Nottingham Web Design

    Dec 21st

    Couldn’t agree more, jQuery all the way!

  • Steven

    Dec 21st

    jQuery (and other frameworks in general) can certainly make coding quick and easy. However, the number of times I see such libraries being used for what would only require a few lines of javascript in comparison, is worrying.

    Rather than expand on negativity however, I also think jQuery is fast becoming an adopted standard. What I would like to see, is javascript-capable browsers adopting it by default so that mobile users especially do not need to keep downloading otherwise-bloated scripts, just to see content slide (in fact, it is more efficient to rely on a plugin like Flash which only needs installing once).

  • Chris

    Dec 21st

    @Steven Interesting that you point out about mobile devices adopting it by default and in the same sentence say it’s more efficient to use Flash. Of course, the most popular mobile device doesn’t actually support Flash…

  • Joost Elfering

    Dec 21st

    although I totally agree with the idea that jQuery is a very good framework I have some small points in the story I raise my eyebrows at or I do not agree with.

    Yes jQuery is a nice framework, yes it does a lot of thing the correct way and introduces some interesting ideas. parts of it are even beginning to flow into JavaScript API’s like the getElementsByClassName method that has been added to some of the browsers lately. Even date selectors are finding their way into HTML5 as a standard. But I do not agree that All ideas should be part of native JavaScript. A lot of ideas that have to do with animations are very vulnerable to change as we find new ways to animate things and the effects you could think of are almost infinate. To put that all supported in every browser so that developers van rely on it… This is my other point… Getting things into the standard is hard, getting it supported is harder, getting it supported in legacy browsers…. this is where the true power of jQuery lies! It is a library that you as a developer include into the browser, legacy or not!

    try to take some of the crude basics (selectors, HTML element enhancers) and put that into native JavaScript. but keep in mind that legacy browser are still out there…

    another point that really raised my eyebrows was that the author didn’t look any further… I know of a couple of frameworks that do certain things a lot better then jQuery could ever do. Did you ever take a look at the Class method of the Prototype library. It is a very nice and very efficient extension of native JavaScript object prototyping. JQuery can not do this as it can only do extensions and create a proper class like prototype can do. I can only suggest that we look beyond the first excitement of jQuery and see that there are other frameworks that have good ideas in them, are more efficient with certain things and of course can be combined with jQuery as you have the jQuery.noConflict() method!

  • fancyCMS

    Dec 23rd

    jQuery is a great tool. It’s easy to learn, edit, you wont need any additional software to edit it. And of course which is the most appealing is nice animation but…still the abilities of Flash technology are unbeatable. Everything would be ok if Adobe guys were not as greedy as they are :D

  • Htc desire cases

    Dec 23rd

    I wish i knew coding so that i could understand Jquery but Yes i have been using readymade jquery sliders and they are no doubt amazing so i am with you on this one :D

  • Arabic

    Dec 24th

    I wish i knew coding so that i could understand Jquery but Yes i have been using readymade tgtdf

  • aditia

    Jan 4th

    agree with you jQuery really great framework I think this is the most easier javascript framework these day, and some extension like jqueryui, jquery mobile really help to build the widget easily

  • Missy

    Aug 2nd

    I’m coming at this post from the perspective of a designer-developer in a multinational organisation with dozens of sites worlwide.

    Through the adoption of jQuery as an integral part of our (mainly) .NET platforms we’ve significantly upped the ante on usability and increased revenue by over 15% this year. Part of this is due to the ability to use jQuery to rapid-prototype new solutions, closing business decisions much faster than before.

    I think it will be a good 5 years – if not longer – before we see any serious competitor to jQuery.

  • Leave a Comment

    Your email address will not be published. Required fields are marked *