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

Question

là gì khác nhau chính giữa

$(this).attr("name") 

và

this.name 

và giải thích kỹ thuật là gì?

Answer 1

Đầu tiên nhận giá trị thuộc tính từ đối tượng jQuery được tạo thành từ phần tử DOM. Thứ hai lấy thuộc tính trực tiếp từ phần tử DOM và do đó nhanh hơn. Bạn nên sử dụng các thuộc tính gốc nếu có thể.

Answer 2

Vâng, tôi biết bạn phải suy nghĩ ... đó là một vấn đề hiệu suất ... nhưng không. Đó là vấn đề đáng tin cậy.

Khi bạn truy cập DOM thông qua javascript, bạn không có quyền truy cập trực tiếp vào DOM, những gì bạn nhận được là giao diện, được xác định bởi Đặc tả HTML của W3C.

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

Giao diện HTMLElement chỉ xác định thuộc tính này.

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

Vì vậy, bạn sẽ có thể gọi là "this.name" chỉ trên những yếu tố mà giao diện có một tài sản "tên" định nghĩa (đầu vào rất có thể).

Mã đơn giản này sẽ cung cấp cho bạn ý tưởng về những gì có thể xảy ra.

<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

Làm thế nào trình duyệt được xây dựng the-DOM javascript đối tượng proxy có thể thay đổi ... IE đã từng là thân thiện hơn với các nhà phát triển và phân tích tất cả mọi thứ từ DOM và sau đó đưa nó cho các nhà phát triển như một sẵn sàng để sử dụng thuộc tính đối tượng. Nhưng đó là thời tiền sử, ngày nay không có trình duyệt nào sẽ cung cấp cho bạn các đặc tính tùy chỉnh. Thậm chí không phải thuộc tính dữ liệu (HTML5 hợp lệ).

Vì vậy, tôi sẽ rất cẩn thận khi thực hiện truy cập dễ bị lỗi nhanh về ánh sáng đối với các thuộc tính và sử dụng khung (có lý do cho điều đó).