jQuery subtleties

Question

Community wiki. At least I think it's worthy of that. I've always been interested in some of the inner workings of jQuery, and a great question prompted this.

I'm not talking about cool stuff you can do with jQuery but more subtleties of how it works. Maybe links to helpful posts could come in here.

One example is that $() is interchangeable with $(document) as can be seen from the source:

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {
        // Make sure that a selection was provided
        selector = selector || document;

Any more?

Answer 1

While the documentation only mentions triggering events on a selected set of elements:

$('button').trigger('click');

You can actually trigger an event on all elements (including objects outside the DOM such as document and window) by calling the jQuery.event.trigger function:

jQuery.event.trigger('click');

This is useful especially when you add custom events with $('element').bind('event', function) and want to trigger it on all elements that are bound to it. Note that this in the event handler function will refer to the individual element, as usual.

This is how jQuery's Ajax events work.

Answer 2

You should look into how jQuery binds event handling to objects.

Answer 3

A subtlety which I often mix up is the difference between the iterator function's arguments to $.each and $.grep, which are reversed:

$.grep's form:

$.grep(["a","b","c"],function(item,i){
  console.log(i,item);
});

Grep takes a function with the item as the first argument, and the counter as the second.

$.each's form:

$.each(["a","b","c"],function(i,item){
  console.log(i,item);
});

Each takes a function with the counter as the first argument, and the item as the second.

Mixing these up can lead to some fun bugs :)

Another subtlety that comes up for some beginners is that of result sets vs. single elements:

---

$(selector)

Returns a jQuery object, which could contain a number of DOM elements.

---

$(selector)[0] or $(selector).get(0)

Returns the first result as an actual DOM element.

---

$(selector).eq(0) or $($(selector).get(0))

Returns the DOM element wrapped in a jQuery object so that we can do stuff like:

$(selector).eq(0).addClass("deleted").fadeOut();