JQuery $(this).attr("name")与this.name的区别

Question

主要区别是什么？

$(this).attr("name")

和

this.name

那么技术解释是什么？

- Sameera Thilakasiri

---

http://jsperf.com/jquery-this-attr-name-vs-this-name - Pratik Joshi

Answer 1

第一个从由DOM元素形成的jQuery对象中获取属性值。第二个直接从DOM元素获取属性，因此速度更快。在可能的情况下应使用本机属性。

- Rory McCrossan

---

除了链接的href属性外，其中this.href将始终返回绝对URL。 - VisioN

但它只会使差异为2毫秒。当你说更快时，它只会比$(this).attr("name")快2毫秒，而不是比它快10分钟或半个小时。这不应该有任何影响。 - Pratik Joshi

区别很小，但是为什么不想要最好的性能和更短的代码呢？ - Rory McCrossan

第二个直接从DOM元素获取属性，这并不正确：第二个只是调用属性的getter方法，它并不等同于它所反映的属性值。例如 checked 属性和 checked 属性的值。 - pozs

@RoryMcCrossan 这不是语义学。在一个问题中，当人们需要知道DOM中属性和特性的区别时，这两个词是不能互换的。 - pozs

Answer 2

我知道你一定会想...这是一个性能问题...但不是。这是一个可靠性问题。

当你通过JavaScript访问DOM时，你没有直接访问DOM的权限，你获得的是一个接口，由W3C HTML规范定义。

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

HTMLElement接口仅定义了这些属性。

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

因此，您只能在那些接口定义了属性“name”的元素上调用“this.name”（很可能是输入框）。

这段简单的代码将让您了解可能出现的问题。

<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

浏览器如何构建javascript-DOM代理对象可能会有所不同... IE曾经对开发人员比较友好，从DOM解析所有内容，然后将其作为一个可用的对象属性提供给开发人员。但那是史前时代，现在没有浏览器会给你自定义属性。甚至不支持data-attributes（HTML5有效）。

因此，我会非常谨慎地访问属性并使用框架（这是有原因的），以便快速轻松地避免错误。

- Adrian Salazar