Khi viết jQuery bạn sẽ gặp phải câu lệnh $(document).ready(function(). Nhưng bạn đã thực sự hiểu nó là gì chưa? Trong bài viết sau Quách Quỳnh sẽ giải thích về phương thức ready() dành cho người mới tìm hiểu về jQuery.
Tìm hiểu $(document).ready(function() là gì?
$(document).ready() được sử dụng để cung cấp một hàm sau khi tài liệu được tải. Bất kỳ đoạn code nào bạn viết bên trong phương thức $(document).ready() sẽ chạy khi DOM của trang sẵn sàng thực thi mã JavaScript.
Chúng ta không thể thao tác trang một cách an toàn cho đến khi tài liệu sẵn sàng. $(document).ready() sẽ đợi nội dung tài liệu HTML được tải đầy đủ và trở nên sẵn sàng, sau khi hiển thị tất cả các phần tử vào đối tượng window hay nói một cách ngắn gọn là hoàn tất việc tải phần nội dung.
$(document).ready () của tài liệu báo hiệu rằng DOM của trang hiện đã sẵn sàng, vì vậy bạn có thể thao tác với nó mà không cần lo lắng rằng các phần của DOM vẫn chưa được tạo.
Hãy thực hành ví dụ sau:
<html>
<head>
<title>Ví dụ</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("div").click(function() {
alert("Xin chào bạn nhé!");
});
});
</script>
</head>
<body>
<div id="container-box">
Nhấp vào đây!
</div>
</body>
</html>
Ở đây chúng ta sử dụng $(document) để tạo một đối tượng jQuery từ tài liệu. Sau đó, dùng hàm .ready () được gọi trên đối tượng jQuery đó, rồi truyền vào hàm chúng ta muốn thực thi.
$(document).ready(function() để ngăn không cho bất kỳ mã jQuery nào chạy trước khi tài liệu được tải xong (đã sẵn sàng). Bạn nên đợi tài liệu được tải đầy đủ và sẵn sàng trước khi làm việc với nó. Điều này cũng cho phép bạn có mã JavaScript trước phần nội dung của tài liệu, trong phần đầu.
Kết luận: Qua bài viết này bạn đã biết $(document).ready(function(){} và cách dùng như thế nào rồi đấy. Chúc bạn học tốt jQuery và áp dụng thành thạo cho các chức năng trên website của mình.
