When to use jQuery wrapper methods instead of built-in javascript methods

Question

Which jQuery methods should be avoided in favour of built-in methods / properties?

Example:

$('#el').each(function(){

  // this.id vs $(this).attr('id');
  // this.checked vs $(this).is(':checked');

});;

Answer 1

I use the direct javascript property like this.id in these cases:

1. Whenever it does exactly what I want.
2. When speed is important.
3. When all browsers I care about support exactly what I need.

I use the jQuery access method when:

1. There are cross browser support issues or I'm not sure that there aren't cross browser issues.
2. When the jQuery way has more or enhanced functionality that is useful in my circumstance.
3. When it's part of a chained operation and chaining works better with jQuery.
4. When I'm already using jQuery for this operation and it seems inconsistent to mix/match some direct access and some jQuery access.

For example: str = $(elem).html() doesn't really have any advantages over str = elem.innerHTML, but $(elem).html(str) does have some advantages over elem.innerHTML = str; because the jQuery method will clean up the objects that are being removed more completely than the innerHTML way.

Answer 2

This is a broad question but here's a couple of guidelines that I think are useful. You can/should use native js methods when:

1. You know what you are doing. That is you know the spec and any possible inconsistencies between browsers.
2. You are writing performance-critical piece of code where convenience is not top priority
3. You are not satisfied with the way library function works. This can break down to the following:
   • library implementation is buggy (that happens)
   • library implementation is incomplete (e.g. doesn't yet support some new features that are OK to use in your case)
   • simply your vision of some feature is different from library's implementation

The first condition should be true in any case :) The others can combine or go separately. I understand that they are all debatable and can provoke long talks on philosophy but I think they are good starting points and summarize lots of cases.

But the bottom line is - if you don't have a reason to avoid library methods, use them!

Answer 3

Most DOM properties are problem-free in all major browsers. For the two examples you mention (id and checked), the DOM properties are 100% reliable and should be used in preference to the jQuery equivalent for reliability, performance and readability.

The same goes for all properties corresponding to boolean attributes: readonly, disabled, selected are common ones. Here are some more. className is also 100% solid. For other properties and attributes, it's up to you. Using a library like jQuery may be the best approach for these if you're unsure and can afford to lose some performance (usually the case).

Stack Overflow regular Andy Earnshaw has blogged about this: http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element