Tôi muốn hiểu mối quan hệ giữa đối tượng jQuery và phần tử DOM ..
Khi jQuery trả về một phần tử, nó sẽ hiển thị như [object Object]trong một cảnh báo. Khi getElementByIDtrả về một phần tử, nó sẽ hiển thị dưới dạng [object HTMLDivElement]. điều đó chính xác có nghĩa là gì? Ý tôi là cả hai đều có sự khác biệt?
Ngoài ra, những phương thức nào có thể hoạt động trên đối tượng jQuery và phần tử DOM? Một đối tượng jQuery có thể đại diện cho nhiều phần tử DOM không?
Câu trả lời:
Tôi muốn hiểu mối quan hệ giữa đối tượng jQuery và phần tử DOM
Một đối tượng jQuery là một đối tượng giống như mảng có chứa (các) phần tử DOM. Một đối tượng jQuery có thể chứa nhiều phần tử DOM tùy thuộc vào bộ chọn bạn sử dụng.
Ngoài ra, những phương thức nào có thể hoạt động trên đối tượng jQuery và phần tử DOM? Một đối tượng jQuery có thể đại diện cho nhiều phần tử DOM không?
Các hàm jQuery (danh sách đầy đủ có trên trang web) hoạt động trên các đối tượng jQuery chứ không phải trên các phần tử DOM. Bạn có thể truy cập các phần tử DOM bên trong một hàm jQuery bằng cách sử dụng .get()hoặc truy cập trực tiếp phần tử đó tại chỉ mục mong muốn:
$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector
Nói cách khác, những điều sau sẽ mang lại cho bạn kết quả tương tự:
<div id="foo"></div>
alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));
Để biết thêm thông tin về đối tượng jQuery, hãy xem tài liệu . Cũng kiểm tra tài liệu cho.get()
Khi bạn sử dụng jQuery để lấy một phần tử DOM, đối tượng jQuery trả về chứa một tham chiếu đến phần tử. Khi bạn sử dụng một hàm gốc như getElementById, bạn nhận trực tiếp tham chiếu đến phần tử, không được chứa trong một đối tượng jQuery.
Một đối tượng jQuery là một đối tượng giống như mảng có thể chứa nhiều phần tử DOM:
var jQueryCollection = $("div"); //Contains all div elements in DOM
Dòng trên có thể được thực hiện mà không cần jQuery:
var normalCollection = document.getElementsByTagName("div");
Trên thực tế, đó chính xác là những gì jQuery sẽ thực hiện bên trong khi bạn chuyển vào một bộ chọn đơn giản như div. Bạn có thể truy cập các phần tử thực tế trong bộ sưu tập jQuery bằng getphương pháp:
var div1 = jQueryCollection.get(0); //Gets the first element in the collection
Khi bạn có một phần tử hoặc một tập hợp các phần tử, bên trong một đối tượng jQuery, bạn có thể sử dụng bất kỳ phương thức nào có sẵn trong API jQuery, trong khi khi bạn có phần tử thô, bạn chỉ có thể sử dụng các phương thức JavaScript gốc.
Tôi vừa mới bắt đầu chơi với jQuery vào tháng trước và tôi đã có một câu hỏi tương tự chạy xung quanh trong đầu. Tất cả các câu trả lời bạn nhận được cho đến nay đều hợp lệ và có dấu chấm, nhưng một câu trả lời rất chính xác có thể là:
Giả sử bạn đang ở trong một hàm và để tham chiếu đến phần tử đang gọi, bạn có thể sử dụng thishoặc $(this); nhưng sự khác biệt là gì? Hóa ra, khi bạn sử dụng $(this), bạn đang bao bọc thisbên trong một đối tượng jQuery. Lợi ích là khi một đối tượng là một đối tượng jQuery, bạn có thể sử dụng tất cả các hàm jQuery trên đó.
Nó khá mạnh mẽ, kể từ khi bạn thậm chí có thể quấn một chuỗi đại diện của các yếu tố, var s = '<div>hello <a href='#'>world</a></div><span>!</span>', bên trong một đối tượng jQuery chỉ bằng cách theo nghĩa đen gói nó trong $ (): $(s). Bây giờ bạn có thể thao tác tất cả các phần tử đó với jQuery.
Hầu hết thành viên jQuery Functionskhông có giá trị trả về mà trả về giá trị hiện tại jQuery Objecthoặc giá trị khác jQuery Object.
Vì thế,
console.log("(!!) jquery >> " + $("#id") ) ;
sẽ trả về [object Object], nghĩa là a jQuery Objectduy trì tập hợp là kết quả của việc đánh giá bộ chọn String( "#id") so với Document,
trong khi ,
console.log("(!!) getElementById >> " + document.getElementById("id") ) ;
sẽ trả về [object HTMLDivElement](hoặc trên thực tế là [object Object]trong IE) bởi vì / nếu giá trị trả về là a div Element.
Ngoài ra, những phương thức nào có thể hoạt động trên đối tượng jQuery và phần tử DOM? (1) Một đối tượng jQuery có thể đại diện cho nhiều phần tử DOM không? (2)
(1) Có một loạt các thành viên Functiontrong jQuery liên quan đến các DOM Object. Điều tốt nhất để làm imo là tìm kiếm tài liệu API jQuery cho một tài liệu có liên quan Functionkhi bạn có một nhiệm vụ cụ thể (chẳng hạn như chọn Nodehoặc thao tác chúng).
(2) Có, một đĩa đơn jQuery Objectcó thể duy trì một danh sách nhiều DOM Element. Có nhiều Functions(chẳng hạn như jQuery.findhoặc jQuery.each) được xây dựng dựa trên hành vi lưu vào bộ nhớ đệm tự động này.
[object Object]vẫn sẽ là một div Elementmặc dù. Nếu được chọn với jQuery, nó sẽ là a jQuery Object.
Đó chỉ là trình duyệt của bạn thông minh. Cả hai đều là các đối tượng nhưng DOMElements là các đối tượng đặc biệt . jQuery chỉ gói các DOMElements trong một đối tượng Javascript.
Nếu bạn muốn biết thêm thông tin gỡ lỗi, tôi khuyên bạn nên xem các công cụ gỡ lỗi như Firebug cho Firefox và trình kiểm tra tích hợp của Chrome (rất giống với Firebug).
Ngoài những gì đã được đề cập, tôi muốn bổ sung thêm về lý do tại sao đối tượng jQuery được nhập theo mô tả từ jquery-object
Việc triển khai các phương thức phần tử khác nhau giữa các nhà cung cấp và phiên bản trình duyệt.
Ví dụ: tập hợp innerHTMLphần tử có thể không hoạt động trong hầu hết các phiên bản của Internet Explorer.
Bạn có thể đặt innerHTML theo cách jQuery và jQuery sẽ giúp bạn ẩn các điểm khác biệt của trình duyệt.
// Setting the inner HTML with jQuery.
var target = document.getElementById( "target" );
$( target ).html( "<td>Hello <b>World</b>!</td>" );
jQuery cung cấp danh sách các phương thức được liên kết với đối tượng jQuery để giúp nhà phát triển trải nghiệm mượt mà hơn, vui lòng kiểm tra một số phương thức trong http://api.jquery.com/ . Trang web cũng cung cấp một thao tác DOM phổ biến, hãy xem cách chèn một phần tử được lưu trữ vào newElementsau targetphần tử theo cả hai cách.
Cách DOM,
// Inserting a new element after another with the native DOM API.
var target = document.getElementById( "target" );
var newElement = document.createElement( "div" );
target.parentNode.insertBefore( newElement, target.nextSibling );
Cách jQuery,
// Inserting a new element after another with jQuery.
var target = document.getElementById( "target" );
var newElement = document.createElement( "div" );
$( target ).after( newElement );
Hy vọng đây là một bổ sung.