When should i wrap a DOM object with $()?

Question

Using JQuery:

Sometimes, I can do variable.val() and it works. Sometimes, I'm required to use $(variable).val().

I want to be able to make the choice without trial-and-error.

Does anyone know when to wrap an object with $() while using JQuery?

Answer 1

Simply put $(variable) takes a DOM element and creates a jQuery object. You need to use it any time you end up with a DOM object rather than a jQuery object.

The most likely reasons you'd get a DOM object would be:

1. Events - In any event you bind (like click) in jQuery, the this variable and all the event arguments will reference DOM objects (not jQuery objects).
2. Non-jQuery javascript - If you have parts of your code that still use document.getElementById (Like if you have some legacy javascript or are referencing a third-party library that's not a jQuery plugin for some reason) then these will be DOM objects and need to be wrapped.

There is however no harm in calling $(variable) if variable is already a jQuery object, beyond the obfuscation to someone who might presume it's a DOM object by how you use it, and you can always get back to the DOM object by calling $(variable)[0].

Answer 2

Wrapping a DOM object with $() will convert it to a jQuery Wrapped Set Element. This way you should be able to call jQuery methods with it (val(), attr(), show(), hide(), serialize()).

If however you need to get or set pure javascript properties, then you shouldn't wrap it.