Sự khác biệt giữa $ (document.body) và $ ('body')

104

Tôi là người mới bắt đầu sử dụng jQuery và trong khi xem qua một số ví dụ mã, tôi đã tìm thấy:

$(document.body) và $('body')

Có sự khác biệt nào giữa hai điều này?

jquery document document-body

— ashleedawg
nguồn

1

Một trang nhanh hơn, tuy nhiên, nếu xét đến điều đó sẽ không bao giờ được gọi nhiều hơn một vài lần trên một trang, sự khác biệt giữa hai trang này là rất nhỏ.

— Kevin B

$(body)không hoạt động cho .on('click'...các sự kiện, ngược lại $(document.body)và $(document)cả hai đều hoạt động.

— rybo111

3

Tuyên bố trên là sai và cũng có sự khác biệt nhỏ về hiệu suất, khoảng 10% có lợi cho $ (document.body). Bạn có thể xem so sánh tại đây sitepoint.com/jquery-body-on-document-on

— Sigismund

77

Chúng đề cập đến cùng một phần tử, sự khác biệt là khi bạn nói rằng document.bodybạn đang truyền trực tiếp phần tử tới jQuery. Ngoài ra, khi bạn chuyển chuỗi 'body', công cụ chọn jQuery phải diễn giải chuỗi để tìm ra (các) phần tử mà nó đề cập đến.

Trong thực tế, một trong hai sẽ hoàn thành công việc.

Nếu bạn quan tâm, có thêm thông tin trong tài liệu về hàm jQuery .

— Justin Ethier
nguồn

1

Tuyên bố đầu tiên không hoàn toàn chính xác. Chúng có thể tham chiếu đến cùng một phần tử. Thường là thậm chí. Nhưng không phải lúc nào cũng vậy :). Xem câu trả lời của tôi dưới đây.

— jvenema

18

Các câu trả lời ở đây không thực sự hoàn toàn chính xác. Đóng, nhưng có một trường hợp cạnh.

Sự khác biệt là $ ('body') thực sự chọn phần tử theo tên thẻ, trong khi document.body tham chiếu đến đối tượng trực tiếp trên tài liệu.

Điều đó có nghĩa là nếu bạn (hoặc một tập lệnh giả mạo) ghi đè phần tử document.body (xấu hổ!) $ ('Body') sẽ vẫn hoạt động, nhưng $ (document.body) thì không. Vì vậy, theo định nghĩa chúng không tương đương.

Tôi muốn đoán có những trường hợp biên khác (chẳng hạn như các phần tử được định danh toàn cầu trong IE) cũng sẽ kích hoạt số lượng phần tử nội dung bị ghi đè trên đối tượng tài liệu và tình huống tương tự sẽ áp dụng.

— jvenema
nguồn

Tôi không nghĩ rằng nó có thể được đặt document.bodythành bất kỳ điều gì khác ngoài a <body>: i.imgur.com/unJVwXy.png

— mpen 31/03/18

Có thể được giải quyết ngay bây giờ. Đã có lúc FF và IE cho phép bạn làm điều này và / hoặc sẽ bị nhầm lẫn bởi các mục có id là "body" (lỗi mà tôi gặp phải là một khách hàng sử dụng tập lệnh của chúng tôi trên trang web của bác sĩ phẫu thuật thẩm mỹ với một bức ảnh được gắn thẻ id "body"). Hy vọng không còn là vấn đề :)

— jvenema

12

Tôi đã tìm thấy sự khác biệt khá lớn về thời gian khi thử nghiệm trong trình duyệt của mình.

Tôi đã sử dụng tập lệnh sau:

CẢNH BÁO: chạy điều này sẽ làm đóng băng trình duyệt của bạn một chút, thậm chí có thể làm sập trình duyệt.

var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
    $("body");
}

console.timeEnd('selector');

i = n;
console.time('element');
while (i --> 0){
    $(document.body);
}

console.timeEnd('element');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Mở rộng đoạn mã

Tôi đã thực hiện 10 triệu lượt tương tác và đó là kết quả (Chrome 65):

bộ chọn: 19591,97509765625ms
phần tử: 4947.8759765625ms

Truyền trực tiếp phần tử nhanh hơn khoảng 4 lần so với truyền qua bộ chọn.

— Phiter
nguồn

7

Bạn nhận được một phiếu ủng hộ chỉ cho "ký hiệu mũi tên", bạn lừa đảo táo tợn bạn!

— KlaymenDK

1

Tôi đọc ở đâu đó về việc này và tôi muốn sử dụng nó ngay lập tức XD

— Phiter

Có, nhưng - bạn có thực sự sẽ làm điều này 10 triệu lần không? Tại sao không thực hiện loại phân tích này ở nơi nó được tính?

— scrayne

@scrayne các bài kiểm tra hiệu suất đó không liên quan đến các trường hợp sử dụng thực. Khá hiếm khi thực hiện 10 triệu phép toán trên một phần tử như thế này. Nhưng OP muốn biết sự khác biệt và tôi nhận thấy rằng có sự khác biệt về hiệu suất, vì vậy tôi cho rằng điều đó đáng chú ý.

— Phiter

9

$(document.body)đang sử dụng tham chiếu toàn cục documentđể nhận tham chiếu đến body, trong khi đó $('body')là một bộ chọn trong đó jQuery sẽ nhận tham chiếu đến <body>phần tử trêndocument .

Không có sự khác biệt lớn nào mà tôi có thể thấy, không có bất kỳ sự tăng hiệu suất đáng chú ý nào từ cái này sang cái khác.

— Gabe
nguồn

9

$(document.body)là cách đo nhanh hơn theo bài viết này: sitepoint.com/jquery-body-on-document-on

— Steve Harrison

6

Sẽ không có sự khác biệt nào cả có thể cái đầu tiên hiệu suất hơn một chút nhưng tôi nghĩ nó tầm thường (bạn không nên lo lắng về điều này, thực sự).

Với cả hai, bạn bọc <body>thẻ trong một đối tượng jQuery

— Nicola Peluchetti
nguồn

3

Đầu ra cả hai đều tương đương. Mặc dù biểu thức thứ hai đi qua tra cứu từ trên xuống từ gốc DOM. Bạn có thể muốn tránh chi phí bổ sung (tuy nhiên có thể rất nhỏ) nếu bạn đã có sẵn đối tượng document.body để JQuery kết thúc. Xem http://api.jquery.com/jQuery/ #Selector Context

— santon
nguồn