web-dev-qa-db-fra.com

JQuery $ (this) .attr ("name") vs this.name

Quelle est la principale différence entre

$(this).attr("name")

et

this.name

et quelle est l'explication technique?

javascriptjquerythisattr
14
Sameera Thilakasiri

Le premier obtient la valeur d'attribut de l'objet jQuery formé à partir de l'élément DOM. Le second obtient la propriété directement de l'élément DOM et est donc plus rapide. Vous devez utiliser des propriétés natives dans la mesure du possible.

17
Rory McCrossan

Eh bien, je sais que vous devez penser ... c'est une question de performance ... mais non. C'est une question de fiabilité.

Lorsque vous accédez au DOM via javascript, vous n'avez pas d'accès direct au DOM, ce que vous obtenez est une interface, définie par la spécification HTML du W3C.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-798055546

L'interface HTMLElement définit uniquement ces propriétés.

interface HTMLElement : Element {
    attribute DOMString       id;
    attribute DOMString       title;
    attribute DOMString       lang;
    attribute DOMString       dir;
    attribute DOMString       className;
};

Vous pourrez donc appeler "this.name" uniquement sur les éléments dont l'interface a une propriété "name" définie (entrées les plus probables).

Ce code simple vous donnera une idée de ce qui peut mal tourner.

<a fakeAttr="Hola" id="myAnchor" data-mytext="Anyone?">Link</a>


$(function(){

  /* This gives you undefined */
  alert('Direct access: ' + $('#myAnchor')[0].fakeAttr);

  /* This gets the work done */
  alert('jQuery access: ' + $('#myAnchor').attr('fakeAttr'));

  $('#myAnchor').click(function(){

     /* This is of course empty */
     alert(this.fakeAttr);
  });
});

http://jsbin.com/ganihali/1/edit

La façon dont le navigateur crée l'objet proxy javascript-DOM peut varier ... IE utilisé pour être plus convivial avec les développeurs et analyser tout depuis le DOM, puis le donner au développeur en tant qu'objet prêt à l'emploi Mais c'était l'époque préhistorique, de nos jours aucun navigateur ne vous donnera de propriétés personnalisées. Pas même les attributs de données (HTML5 valide).

Je serais donc très prudent pour rendre mon accès sujet aux erreurs rapide et léger aux propriétés et utiliser un cadre (il y a une raison à cela).

5
Adrian Salazar