jQuery: what is it "forbidden" to do in plain Javascript

Question

A jQuery best practices question.

I am writing a very jQuery intensive web page. I am new to jQuery and notice its power, but as I come with heavy javascript experience and knowledge, my question is: What should be done in jQuery and what in plain javascript.

For example, there are callbacks that send a plain DOM object as an argument. Should I use that or should I wrap it ( like $(this)).

Does it matter if I do this.x=y or $(this).attr("x", y).

Answer 1

I think it's a judgement call. Use your common sense.

For instance, if you have 1000 div's on the page, you probably wouldn't want to wrap it inside $(..)

$('div').click(function() {
    this.id = Random.guid(); // instead of $(this).attr('id', Random.guid());
});

As for other assignments, as long as you understand what jQuery is doing, you can stick with it just for consistency, but be aware of performance issues like in the above example.

As @colinmarc mentions, at times jQuery blurs the distinction between element attributes and object properties which can be misleading and buggy.

Answer 2

If your function receives a DOM object and you don't need any jQuery functionality for that DOM object, then there is no need to make convert it to a jQuery object. For instance, if you receive a checkbox object, you can examine the checked property without any use of jQuery.

However, if you need to navigate to a different element from that checkbox, it might be worthwhile to convert it:

function yourCallback(cb) {
    cb = $(cb);
    var sel = $(cb).closest('td').next().find('select');
    // For example, update the options in a neighboring select field
    ...
}

jQuery (as do other libraries) blend in smoothly with native JS. If you need extra functionality, augment the object in question.

As for your last question: You might find the data function useful to avoid nonstandard DOM attributes. If your property x in your question is in fact a valid DOM attribute, you can write either this.x = y or $(this).attr('x', y), IMO it does not matter much. However, if x is not a DOM attribute, use

$(this).data('key', value)

That way, you can store arbitrary key-value pairs with the DOM element, where value can be an arbitrary primitive value or object.

Answer 3

When your using jQuery, it always returns an instance of jQuery unless obv your using a function like val();

the reason we use $(this).value instead of this.value is to make sure that this is an instance of jQuery.

if somewhere in your code you set a variable called my_link witch is equal a DOM Object and not a jQuery function.. further in your application my_link.val() would result into an error, but by doing $(my_link).val() will assure you that the function val will be available. as $() returns an instance of jquery.

Sorry for the miss understanding in my previous post.

Answer 4

Since jQuery objects have richer functionality than nature JS DOM nodes, if you're on the fence, you might as well wrap in jQuery. JQuery is so lightweight, there's not really much reason not to use jQuery objects.

Does it matter if I do this.x=y or $(this).attr("x", y).

The native will be slightly faster, but you'll probably spend more time in other code-- DOM traversal or building. In this specific example, the former is more concise, so I'd choose that. Since jQuery is so lightweight, I tend to switch back and forth fluidly.

Here are other guidelines we follow:

• For callbacks, like a click handler, you'll need to follow the API-- usually a DOM node. Code you write that is similar should probably just take DOM nodes as well. But if you have a list of items, always use a jQuery object.
• For most code, I try to see if you can structure the code as a jQuery plugin-- applying some transformation to a set of DOM nodes. If you can do that, you'll gain some guidance from the plugin architecture.
• I use jQuery's bind/trigger mechanism as it is quite flexible and low-coupling.
• To keep code straight, I'd recommend name prefixing jQuery objects with a dollar sign. For example, var $this = $(this);. Although it's really no big deal to call $() excessively, it does end up looking a sloppy if you call it too much.

Hope this helps.