What is your favorite feature of jQuery?

Question

I just had the jQuery epiphany the other day and still feel like there is tons of power in it that I'm not utilizing.

So that said, what is your favorite feature of jQuery that saves you time and/or makes your client side applications that much more cool or powerful?

Answer 1

Selectors, and chaining.

Answer 2

Chaining! Huge jQuery chains are amazing. Sometimes I can't stop. It feels almost like doing everything in one line (you want to, don't deny it).

this.lasso = $('<div/>')
    .css({ position: 'absolute', overflow: 'hidden' })
    .addClass('ui-crop-lasso')
    .hide()
    .appendTo('body')
    .resizable({
        handles: 'all',
        start: setLasso,
        stop: setLasso,
        resize: setLasso,
        minHeight: 50,
        minWidth: 50
    })
    .draggable({
        containment: el,
        cursorAt: 'move',
        drag: setLasso
    });

Try it out, you'll be addicted in no time.

Answer 3

The way jQuery objects works regardless of being none, one or many DOM elements in it.

Also, event handling rocks. Being able to just return false on click events, for example, rocks.

Answer 4

The plugin system is incredible. You technically could be, and remain, a complete JQuery novice and still exploit most, if not all, of its power via the application of plugins. This makes it very popular with artists and non-programmers just looking to add a tooltip, modal dialog, lightbox, drop down menu, etc.

Answer 5

Not exactly a feature but the amount of already written plug-ins and community information on how to use jQuery is definitely a bonus. Otherwise, selectors along with the plug-in system.

Answer 6

My favorite feature of jQuery is how it helped to turned JavaScript from a hated language into a sexy language almost overnight.

Answer 7

As a newcomer to jQuery, it has to be the jQuery UI plugin, and the themes people have designed to go with it. ThemeRoller lets you quickly adapt themes and play "what if" scenarios with your application as it's being displayed in Firefox. I was able to hugely improve a web application through the use of tabs, accordion sliders, datepickers, and alerts in just a day or two starting from no knowledge of jQuery at all.

More experienced web developers will like jQuery's philosophy of "unobtrusive JavaScript", its rigorous leveraging of XHTML and CSS, selectors, and chaining.

Answer 8

Creating an HTML Element and keeping a reference:

var newDiv = $('<div></div>');
newDiv.attr("id","myNewDiv").appendTo("body");
//Now whenever I want to append the new div I created, 
//I can just reference it from the 'newDiv' variable

Checking if an element exists:

if ($("#someDiv").length) {
    //it exists...
}

Writing your own selectors:

$.extend($.expr[':'], {
    over100pixels: function(a) {
        return $(a).height() > 100;
    }
});

$('.box:over100pixels').click(function() {
    alert('The element you clicked is over 100 pixels high');
});

Answer 9

Not having to worry (as much) about compatibility among different browsers

Answer 10

I like the fact that it treats novices and experts alike equally, to a certain degree. If you know what you are doing, though, you can really make an application shine in all respects. Things such as lazy loading, code separation and templating can all be accomplished with jQuery. It was designed as a DOM tool, but can be easily adapted to be namespaced and to act as a full-stack js framework.

In a nutshell, I think the best feature of jQuery is that it was designed from all angles with the idea of simplicity in mind. The simplest answer is usually the best answer.

Answer 11

Mostly things which require lot of cross-browser testing and tweaking which I could not possibly write myself as reliable and test so extensively as the jQuery community does. This includes:

• $(document).ready(...). Look at the implementation of this function. There are lot of if-else statements checking various browser features.

• Position and dimension methods: $(...).offset(), $(...).position(), $(...).width(), $(...).innerWidth() etc. Again, the same story here. Also, they work reliably (or I assume more reliably that I would be able to achieve myself) for special cases such as window and document.

• $(...).animate(). The ability to animate elements based on any (reasonable) CSS style. Also animation chaining and $(...).stop(). Very fluent API.

• Event handlers. This is something that every JavaScript library has, and it’s not anything one could not implement himself, but it’s nice to have.

There are also some less favourite features. One of them is function chaining which seems to be the semi-official jQuery programming style. It may impressive at the first sight, but overall, it’s not anything you cannot do using variables and separate statements and in the end, in my opinion, it leads to a less readable code.

Another minor thing which I like less is eagerness of using closures and deeply nested anonymous functions. It may be harder to read such code after a week. It may not immediately obvious where some variables are coming from and what function scopes are. Try to ready some more elaborate jQuery source to see what I mean.

Even though, one of the selling points of jQuery is selectors, I find that I don't need them so often, and if I need any, I usually get by with the basic ones.

Finally, jQuery DOM manipulation has some useful utilities, but overall, I think one could achieve the same with a little bit more (albeit tedious) code. I know I'm most likely oversimplifying, but it does not seem like that there are some serious cross-browser issues.

Answer 12

Selectors with support for CSS 1-3 and XPath combined and your own custom selectors!

// "odd" numbered rows in a table with class "orders"
jQuery('table.orders tr:odd')

// All external links (links that start with http://)
jQuery('a[@href^="http://"]')

Answer 13

I like jQuery's aspect of removing event handlers from HTML to separate content from behavior. Instead of writing

<p class="active" onclick="myFunction()">foo</p>

numerous times on a web page, I can write this instead:

<p class="active">foo</p>

and write this once inside my script tags:

$(".active").click(function(){ ... });

Why do I like this better? Because jQuery separates content from functionality the same way that CSS separates content from style. And as Jan Zich and others mention, jQuery makes a lot of that functionality very easy to program for any browser, so for example animation becomes a breeze when you want to simulate tabs that display/hide divs on a page for the user.

Answer 14

Regex in the selectors (since I use ASP.Net and the controls have ridiculous, rendered IDs.)

To get this in jQuery:

<asp:TextBox ID="txtTest" runat="server" />

I just do this:

$("input[id$='txtTest']")

It has made me change my outlook on doing client side stuff on web sites.

Answer 15

Plug-in system:

((function($){
    $.fn.plugin = function(){
        return this.each(function(){
            //code here
        });
    }
})(jQuery)

Chaining:

$('.parent').children().remove().end().css('background-color', 'red');

Cross-browser compatibility across variety of features, eg. Ajax

$.GET('url', {data: 'here'}, function(data){ /* callback */ });

Answer 16

Relative values in the animate funciton:

$('div.class:hover').animate({ height: '+=10', width: '+=10', opacity: '-=.5' })