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

Question

两者之间的主要区别是什么

$(this).attr("name")

和

this.name

什么是技术解释？

Answer 1

第一个从DOM元素形成的jQuery对象中获取属性值.第二个直接从DOM元素获取属性,因此更快.您应尽可能使用本机属性.

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中的所有内容,然后将其作为即用型对象属性提供给开发人员.但那是史前时代,现在没有浏览器会给你自定义属性.甚至不是数据属性(HTML5有效).

因此,我会非常小心地使我的轻量级错误倾向访问属性并使用框架(这是有原因的).