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

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 2

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.