Document.ready là gì

Mình không hiểu tại sao khi viết mã lệnh jQuery thì cần đặt bên trong document.ready.

Đang xem: $(document).ready(function() là gì

Ví dụ như mã sau:

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

và đoạn mã sau:

$(“a”).click(function (e) );

cùng có kết quả cuối cùng như nhau.

Vậy thì tại sao và khi nào cần sử dụng document.ready?

jQuery JavaScript
Gửi Huỷ

2 Câu Trả Lời

Câu hỏi hay đấy.

Có một số nhầm lẫn xung quanh toàn bộ lời khuyên "đặt tập lệnh ở cuối trang của bạn" và vấn đề nào nó cố gắng giải quyết. Đối với câu hỏi này, tôi sẽ không nói về việc đặt tập lệnh ở cuối trang có ảnh hưởng đến hiệu suất/thời gian tải hay không. Tôi sẽ chỉ nói về việc liệu bạn có cần $(document).ready nếu bạn cũng đặt tập lệnh ở cuối trang.

Tôi giả sử bạn đang tham chiếu DOM trong các chức năng bạn đang ngay lập tức gọi trong tập lệnh của mình (bất kỳ thứ gì đơn giản như document hoặc document.getElementById). Tôi cũng giả sử bạn chỉ hỏi về các tệp này. IOW, tập lệnh thư viện hoặc tập lệnh mà mã tham chiếu DOM của bạn yêu cầu (như jQuery) cần được đặt trước đó trong trang.

Để trả lời câu hỏi của bạn: Nếu bạn bao gồm các tập lệnh tham chiếu DOM ở cuối trang, Không, bạn không cần $(document).ready.

Giải thích: Nếu không có sự hỗ trợ của "onload" – triển khai liên quan như $(document).ready quy tắc ngón tay cái là: Bất kỳ mã nào tương tác với các phần tử DOM trong trang phải được đặt/bao gồm thêm xuống trang hơn các phần tử mà nó tham chiếu. Điều dễ nhất để làm là đặt mã đó trước khi đóng </body>. Xem ở đây và ở đây . Nó cũng hoạt động xung quanh "Operation aborted" lỗi .

Sau khi nói rằng, điều này không có nghĩa là vô hiệu hóa việc sử dụng $(document).ready. Tham khảo một đối tượng trước khi nó được tải là những sai lầm phổ biến nhất được thực hiện khi bắt đầu trong DOM JavaScript (chứng kiến ​​nó quá nhiều lần để đếm). Đó là giải pháp của jQuery cho vấn đề và nó không yêu cầu bạn phải suy nghĩ về nơi tập lệnh này sẽ được bao gồm liên quan đến các phần tử DOM mà nó tham chiếu. Đây là một chiến thắng lớn cho các nhà phát triển. Nó chỉ là một điều ít hơn họ phải suy nghĩ.

Xem thêm: “ ủy ban nhân dân xã tiếng anh là gì ?

Ngoài ra, thường khó khăn hoặc không thực tế khi di chuyển tất cả các tập lệnh tham chiếu DOM xuống cuối trang (ví dụ: bất kỳ tập lệnh nào phát hành các cuộc gọi document.write phải ở lại). Lần khác, bạn đang sử dụng một khung làm cho một số mẫu hoặc tạo ra các phần javascript động, trong đó các hàm tham chiếu cần được bao gồm trước js.

Cuối cùng, nó được sử dụng để được "thực hành tốt nhất" để mứt tất cả các mã DOM-tham chiếu vào window.onload, tuy nhiên nó đã được eclipsed bởi $(document).ready triển khai cho cũng tài liệu lý do .

Tất cả điều này thêm lên đến $(document).ready như một giải pháp vượt trội hơn, thực tế và chung cho vấn đề tham chiếu các phần tử DOM quá sớm.

người giới thiệu
jQuery: Tại sao sử dụng document.ready nếu JS bên ngoài ở cuối trang?
https://qa-vi.com/qa/detail/1b53a10ed0eb47e6729707191071abc0

Câu hỏi hay đấy. Có một số nhầm lẫn xung quanh toàn bộ lời khuyên "đặt tập lệnh ở cuối trang của bạn" và vấn đề nào nó cố gắng giải quyết. Đối với câu hỏi này, tôi sẽ không nói về việc đặt tập lệnh ở cuối trang có ảnh hưởng đến hiệu suất/thời gian tải hay không. Tôi sẽ chỉ nói về việc liệu bạn có cần $(document).ready nếu bạn cũng đặt tập lệnh ở cuối trang. Tôi giả sử bạn đang tham chiếu DOM trong các chức năng bạn đang ngay lập tức gọi trong tập lệnh của mình (bất kỳ thứ gì đơn giản như document hoặc document.getElementById). Tôi cũng giả sử bạn chỉ hỏi về các tệp này. IOW, tập lệnh thư viện hoặc tập lệnh mà mã tham chiếu DOM của bạn yêu cầu (như jQuery) cần được đặt trước đó trong trang. Để trả lời câu hỏi của bạn: Nếu bạn bao gồm các tập lệnh tham chiếu DOM ở cuối trang, Không, bạn không cần $(document).ready. Giải thích: Nếu không có sự hỗ trợ của "onload" – triển khai liên quan như $(document).ready quy tắc ngón tay cái là: Bất kỳ mã nào tương tác với các phần tử DOM trong trang phải được đặt/bao gồm thêm xuống trang hơn các phần tử mà nó tham chiếu. Điều dễ nhất để làm là đặt mã đó trước khi đóng </body>. Xem ở đây và ở đây . Nó cũng hoạt động xung quanh "Operation aborted" lỗi . Sau khi nói rằng, điều này không có nghĩa là vô hiệu hóa việc sử dụng $(document).ready. Tham khảo một đối tượng trước khi nó được tải là những sai lầm phổ biến nhất được thực hiện khi bắt đầu trong DOM JavaScript (chứng kiến ​​nó quá nhiều lần để đếm). Đó là giải pháp của jQuery cho vấn đề và nó không yêu cầu bạn phải suy nghĩ về nơi tập lệnh này sẽ được bao gồm liên quan đến các phần tử DOM mà nó tham chiếu. Đây là một chiến thắng lớn cho các nhà phát triển. Nó chỉ là một điều ít hơn họ phải suy nghĩ. Ngoài ra, thường khó khăn hoặc không thực tế khi di chuyển tất cả các tập lệnh tham chiếu DOM xuống cuối trang (ví dụ: bất kỳ tập lệnh nào phát hành các cuộc gọi document.write phải ở lại). Lần khác, bạn đang sử dụng một khung làm cho một số mẫu hoặc tạo ra các phần javascript động, trong đó các hàm tham chiếu cần được bao gồm trước js. Cuối cùng, nó được sử dụng để được "thực hành tốt nhất" để mứt tất cả các mã DOM-tham chiếu vào window.onload, tuy nhiên nó đã được eclipsed bởi $(document).ready triển khai cho cũng tài liệu lý do . Tất cả điều này thêm lên đến $(document).ready như một giải pháp vượt trội hơn, thực tế và chung cho vấn đề tham chiếu các phần tử DOM quá sớm. người giới thiệu jQuery: Tại sao sử dụng document.ready nếu JS bên ngoài ở cuối trang? https://qa-vi.com/qa/detail/1b53a10ed0eb47e6729707191071abc0

HTML render từ trên xuống dưới theo 1 thread (single thread), do đó cái chưa được render ra sẽ bị lỗi khi gọi nó.

Ví dụ:

(1) <div>a div</div>

(2) <button>a button</button>

Browser đang render thằng (1) mà gọi thằng (2) sẽ không thấy.

Nếu bạn viết js ở cuối trang:

(1) <div>a div</div>

(2) <button>a button</button>

(3) <script>/*button available */</script>

thì vị trí thứ (3) sẽ gọi được tới button vì nó đã được render ra rồi.

Nhưng nếu bạn gọi:

(0) <script>/*button **NOT** available */</script>

(1) <div>a div</div>

(2) <button>a button</button>

gọi script ở vị trí thứ 0 thì button chưa được render ra nên sẽ không thấy nó.

Xem thêm: Vay Tín Chấp Là Gì – Những Lợi ích Khi Vay Tín Chấp

Do đó, jQuery cung cấp 1 ready callback (hàm gọi lại) là khi nào document được render ra hết thì những script bạn viết trong nó mới được thực thi cho dù bạn đặt ở đâu đi chăng nữa.

HTML render từ trên xuống dưới theo 1 thread (single thread), do đó cái chưa được render ra sẽ bị lỗi khi gọi nó. Ví dụ: (1) `<div>a div</div>` (2) `<button>a button</button>` Browser đang render thằng (1) mà gọi thằng (2) sẽ không thấy. Nếu bạn viết js ở cuối trang: (1) `<div>a div</div>` (2) `<button>a button</button>` (3) `<script>/*button available */</script>` thì vị trí thứ (3) sẽ gọi được tới button vì nó đã được render ra rồi. Nhưng nếu bạn gọi: (0) `<script>/*button **NOT** available */</script>` (1) `<div>a div</div>` (2) `<button>a button</button>` gọi script ở vị trí thứ 0 thì button chưa được render ra nên sẽ không thấy nó. Do đó, jQuery cung cấp 1 ready callback (hàm gọi lại) là khi nào document được render ra hết thì những script bạn viết trong nó mới được thực thi cho dù bạn đặt ở đâu đi chăng nữa.