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

В чем разница между

$(this).attr("name")

и

this.name

и что такое техническое объяснение?

Ответ 1

Первый получает значение атрибута из объекта jQuery, образованного из элемента DOM. Второй получает свойство непосредственно из элемента DOM и, следовательно, быстрее. При необходимости следует использовать собственные свойства.

Ответ 2

Хорошо, я знаю, что вы должны думать... это дело производительности... но нет. Это вопрос надежности.

Когда вы обращаетесь к DOM через javascript, у вас нет прямого доступа к DOM, то вы получаете интерфейс, определенный HTML-спецификацией W3C.

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;
};

Таким образом, вы сможете называть "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 действителен).

Поэтому я был бы очень осторожен в том, чтобы сделать мой легкий быстрый доступ к свойствам свойств и использовать фреймворк (есть причина для этого).