Is it faster to refer to jQuery objects (mostly DOM objects) by the variable name only, or by $?

Question

To put it simply:

Is this:

var x = $('#selector-id');
x.slideDown();

Faster than:

var x = $('#selector-id');
$(x).slideDown();

Answer 1

The second example doesn't make sense, as x is already a jQuery object.

It would make more sense if you did:

var selector_string = '#selector-id';
$(selector_string).slideDown();

but that would definitely be slower than the first option as you'll be accessing the DOM and making a new jQuery object every time you use it.

Answer 2

Theoretically it is faster because it makes one less function call. Practically you would never write the second because x is already a jQuery object.

Answer 3

The second version clones the jQuery object...for no reason really, so yes the first is both faster and more efficient (less wasteful).

Answer 4

remember dom acessing just slowdowns your javascript, more you access the DOM more less efficient it becomes.

below are few examples

var _elm= jQuery('.myElement');
_elm.DoThis();
_elm.DoThat();

above 2 will be faster than below written 2

jQuery('.myElement').DoThis();
jQuery('.myElement').DoThat();

// you may use firebug's profiler to test this.