eYe February 2016

Using jQuery object understanding

I had to jump into jQuery development without getting too much time into learning all the associated basics, so there is one thing that throws me off quite a bit.

I see two different ways our developers access jQuery objects:

Case 1:

var container =  $("#containerId");

// Then use it as:
container.hide();

Case 2:

var container =  $("#containerId");

// Then use it as:
$(container).hide();

From my thin up to date knowledge, by wrapping a container as in var obj = $(container), we get a jQuery object obj that we can further work with.

But then why do I see intermittently developers wrapping it again when using as in $(obj).doSomething()?

Edit: the question suggested as duplicate is asking about best practices and although similar, my question is purely on understanding of jQuery object wrapping.

Answers


Qwertiy February 2016

Second wrapping does nothing as I remember. So if there can be a selector a dom element or a juery object you can just wrap it and do not care about what it was.

But if you know it is a jquery object, you shouldn't use wrapping.


Gavriel February 2016

When developers develop a function, for example in a jQuery plugin, that can get a parameter that is either a DOM element or a jQuery object or a selector, then they use it:

function x(container) {
    container = $(container);
    // use container as a jquery object
}

// these both work:
x("#containerId");
x($("#containerId"));
x(document.getElementById("containerId"));


Moob February 2016

Case 1: Using a jQuery selector to find a dom element and return a jQuery object:

var container =  $("#containerId");

// Then use it as:
container.hide();

Case 2: Redundant/mistake (or perhaps if you're unsure if a variable is already a jQuery object but you need it to be): Using a jQuery selector to find a dom element and return a jQuery object then pass it to a new jQuery object:

var container =  $("#containerId");

// Then use it as:
$(container).hide();

Case 3: Select a dom element then use it in constructor for a new jQuery object (on which you then call hide() )

var container =  document.getElementById("#containerId");

// Then use it as:
$(container).hide();


Josh Noe February 2016

Short answer: Case 2 creates a jQuery object from an existing jQuery object, which is unnecessary.

$ is an alias for the jQuery Selector function. The function can take a few different arguments, such as...

  1. A string: var container = $("#containerId");
  2. An html element: var document = $(document);
  3. A jQuery element: var container = $($("#containerId"))

In the 3rd example, the 2nd call to the Selector function works, but it unnessesary.


Kevin February 2016

Case 1 is always preferred. Always cache and reuse jQuery objects if possible. This will give the best performance.

Case 2 is the easiest way to ensure you're working with a jQuery object. There are better ways, which you can see in this SO post. I would never recommend selecting objects like this. If I was expecting a jQuery object, I would do this instead. e.g.

function hideContainer(container)
{
    if(!(container instanceof jQuery))
    {
         container =  $("#containerId");
    }

    container.hide();
}

It's actually faster to select the object again via the selector string (instead of using the object reference), since it doesn't have to access object properties to determine the selector.

Take a look at these jsPerf test cases and you will see that Case 2 is much slower than Case 1 (it was 40% slower in my case, on Chrome).

But again, I think Case 2 is just the easiest, quickest way to ensure you have a jQuery object; which is why you see it so often.

Post Status

Asked in February 2016
Viewed 3,741 times
Voted 14
Answered 5 times

Search




Leave an answer