5

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');

});;
Alex
  • 66,732
  • 177
  • 439
  • 641
  • 2
    Why should any be avoided? Thousands of man-hours were invested to ensure cross-browser compatibility. – Sparky Mar 30 '12 at 22:23
  • well yes, but some of them are just wrappers for stuff that is most likely not to change in javascript – Alex Mar 30 '12 at 22:25
  • I guess I'm just trying to get to root of why you're asking this. Are you having problems with something? – Sparky Mar 30 '12 at 22:26
  • All I can say is that I trust the tools I use or I wouldn't be using them. – Sparky Mar 30 '12 at 22:32
  • but sometimes is faster to call a native property than using a jQuery method that will get you the same property – Alex Mar 30 '12 at 22:34
  • Ah ok, why didn't you mention this in your question then? I even asked previously, _"I'm just trying to get to root of why you're asking this"_. Like pulling teeth. – Sparky Mar 30 '12 at 23:34

3 Answers3

3

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Ironically `href` is one example where jQuery **does** do something for you (browsers differ on whether a relative URL in an `href` attribute comes out fully qualified or not in the `href` property). Also, boolean attributes are precisely the thing that jQuery has got wrong, over and over. *"jQuery has already sanitized the value into a boolean"*: no, the boolean already exists as the `checked` property, and has done reliably in all major browsers since IE 4. Just use `this.checked` (and likewise for all other boolean attributes). It is better than the jQuery alternative in every way. – Tim Down Mar 30 '12 at 23:17
  • See also http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element – Tim Down Mar 30 '12 at 23:18
  • @TimDown - I cleaned up the examples. – jfriend00 Mar 30 '12 at 23:27
1

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!

Dmitry Pashkevich
  • 13,431
  • 9
  • 55
  • 73
1

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

Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536