jQuery - Sự khác biệt giữa $ (tài liệu). yet và $ (window) .load là gì?

Sự khác biệt giữa

$(document).ready(function(){
 //my code here
});

và

$(window).load(function(){
  //my code here
});

Và tôi muốn chắc chắn rằng:

$(document).ready(function(){

}) 

và

$(function(){

}); 

và

jQuery(document).ready(function(){

});

giống nhau.

Bạn có thể cho tôi biết những khác biệt và tương đồng giữa chúng?

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

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

Phiên bản truy vấn 3.0

Thay đổi đột phá: đã xóa .load (), .unload () và .error ()

Các phương thức này là các phím tắt cho các hoạt động sự kiện, nhưng có một số hạn chế API. .load()Phương thức sự kiện mâu thuẫn với .load() phương thức ajax . Các .error()phương pháp không thể được sử dụng với window.onerror vì cách phương pháp DOM được xác định. Nếu bạn cần đính kèm các sự kiện theo các tên này, hãy sử dụng .on()phương thức, ví dụ: thay đổi $("img").load(fn)thành $(img).on("load", fn). ¹

$(window).load(function() {});

Nên đổi thành

$(window).on('load', function (e) {})

Tất cả đều tương đương:

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

document.readylà một sự kiện jQuery, nó chạy khi DOM đã sẵn sàng, ví dụ: tất cả các yếu tố đều được tìm thấy / sử dụng, nhưng không nhất thiết phải là tất cả nội dung.
window.onloadbắn sau đó (hoặc cùng một lúc trong trường hợp xấu nhất / thất bại) khi hình ảnh và những thứ đó được tải. Vì vậy, nếu bạn đang sử dụng kích thước hình ảnh chẳng hạn, bạn thường muốn sử dụng kích thước này thay thế.

Đồng thời đọc một câu hỏi liên quan:
Sự khác biệt giữa các hàm $ (window) .load () và $ (document). Yet ()

Từ Tài liệu API jQuery

Mặc dù JavaScript cung cấp loadsự kiện để thực thi mã khi một trang được hiển thị, sự kiện này không được kích hoạt cho đến khi tất cả các tài sản như hình ảnh đã được nhận hoàn toàn. Trong hầu hết các trường hợp, tập lệnh có thể được chạy ngay khi cấu trúc phân cấp DOM được xây dựng đầy đủ. Trình xử lý được chuyển đến .ready()được đảm bảo được thực thi sau khi DOM sẵn sàng, vì vậy đây thường là nơi tốt nhất để đính kèm tất cả các trình xử lý sự kiện khác và chạy mã jQuery khác. Khi sử dụng các tập lệnh dựa trên giá trị của các thuộc tính kiểu CSS, điều quan trọng là phải tham chiếu các biểu định kiểu bên ngoài hoặc các phần tử kiểu nhúng trước khi tham chiếu các tập lệnh.

Trong trường hợp mã dựa vào tài sản được tải (ví dụ: nếu kích thước của hình ảnh là bắt buộc), mã phải được đặt trong trình xử lý cho loadsự kiện thay thế.

Trả lời câu hỏi thứ hai -

Không, chúng giống hệt nhau miễn là bạn không sử dụng jQuery trong chế độ không xung đột.

Ba chức năng này là như nhau.

$(document).ready(function(){

}) 

và

$(function(){

}); 

và

jQuery(document).ready(function(){

});

ở đây $được sử dụng để định nghĩa jQuerynhư $= jQuery.

Bây giờ sự khác biệt là

$(document).readylà sự kiện jQuery được kích hoạt khi DOMđược tải, do đó, nó được kích hoạt khi cấu trúc tài liệu đã sẵn sàng.

$(window).load sự kiện được kích hoạt sau khi toàn bộ nội dung được tải như trang chứa hình ảnh, css, v.v.

Sự khác biệt giữa $(document).ready()và các $(window).load()chức năng là mã được bao gồm bên trong $(window).load()sẽ chạy khi toàn bộ trang (hình ảnh, iframe, biểu định kiểu, v.v.) được tải trong khi sự kiện sẵn sàng tài liệu kích hoạt trước khi tất cả hình ảnh, iframe được tải, nhưng sau khi toàn bộ DOM sẵn sàng.

$(document).ready(function(){

}) 

và

$(function(){

});

và

jQuery(document).ready(function(){

});

Không có sự khác biệt giữa 3 mã trên.

Chúng tương đương nhau, nhưng bạn có thể phải đối mặt với xung đột nếu bất kỳ Khung JavaScript nào khác sử dụng cùng ký hiệu đô la $ làm tên tắt.

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

Sự kiện sẵn sàng luôn được thực thi tại trang html duy nhất được tải vào trình duyệt và các chức năng được thực thi .... Nhưng sự kiện tải được thực thi tại thời điểm tất cả các nội dung trang được tải vào trình duyệt cho trang ... .. chúng ta có thể sử dụng $ hoặc jQuery khi chúng ta sử dụng phương thức noconflict () trong các tập lệnh jquery ...

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

$ (cửa sổ) .load là một sự kiện kích hoạt khi DOM và tất cả nội dung (mọi thứ) trên trang được tải đầy đủ như CSS, hình ảnh và khung. Một ví dụ tốt nhất là nếu chúng ta muốn có được kích thước hình ảnh thực tế hoặc để có được các chi tiết của bất cứ điều gì chúng ta sử dụng nó.

$ (tài liệu). yet () chỉ ra rằng mã trong đó cần được thực thi khi DOM được tải và sẵn sàng để được thao tác bởi tập lệnh. Sẽ không chờ hình ảnh được tải để thực thi tập lệnh jQuery.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (window) .load được kích hoạt sau $ (tài liệu). yet ().

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

Trên 3 là như nhau, $ là tên bí danh của jQuery, bạn có thể phải đối mặt với xung đột nếu bất kỳ Khung JavaScript nào khác sử dụng cùng ký hiệu đô la $. Nếu bạn đối mặt với xung đột, nhóm jQuery cung cấp giải pháp không xung đột hãy đọc thêm.

$ (window) .load không được dùng nữa trong 1.8 và bị xóa trong jquery 3.0