Bạn đang quan tâm đến $(Document).Ready(Function() Là Gì, Jquery Tại Sao Cần Sử Dụng Document phải không? Nào hãy cùng VCCIDATA đón xem bài viết này ngay sau đây nhé, vì nó vô cùng thú vị và hay đấy!
XEM VIDEO $(Document).Ready(Function() Là Gì, Jquery Tại Sao Cần Sử Dụng Document tại đây.
Giới thiệu
Cũng như các ngôn ngữ lập trình khác, JavaScript sẽ chạy biên dịch từ trên xuống dưới và từ trái qua phải. Chính vì vậy khi bạn sử dụng một hàm mà phía trên nó không tồn tại hàm đó thì sẽ bị bái lỗi undefined ngay. Và để giải quyết vấn đề này thì ta sẽ dùng sự kiện onload trong JavaScript.
Đang xem: $(document).ready(function() là gì
Trong bài viết này, chúng ta sẽ cùng nhau so sánh window.onload và $(document).ready().
Giả sử bạn có hàm A nằm trong file a.js và trong file b.js có sử dụng hàm A thì bắt buộc file a.js phải đặt trên file b.js, nó tuan theo nguyên tắc load theo thứ tự.
Ví dụ: đoạn code này sai vì hàm do_validate() mặc dù đã định nghĩa nhưng nó lại nằm dưới đoạn code gọi tới nó
Trường hợp này sai vì hàm do_validate chưa được định nghĩa
//Đặt file A trước file Bvar flag = do_validate(); // hàm này nằm trong file Afunction do_validate() // hàm này nằm trong file B{ // return TRUE/FALSE;}
//Đặt file B trước file Afunction do_validate() // hàm này năm trong file B{ // return TRUE/FALSE;} var flag = do_validate(); hàm này năm trong file A
Một lưu ý quan trọng nữa khi các bạn gán một hàm nào đó cho một sự kiện nào đó trong HTML thì cũng phải tuân theo quy luật trên, nghĩa là nếu bạn gán một hàm mà phía trên thẻ HTML đó không có thì nó sẽ thông báo lỗi là undefined.
và để ta có thể viết như trường hợp 1 thì sẽ dùng window.onload và $(document).ready() để giải quyết vấn đề đó Javascript 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. jQuery cũng vậy vì nó là thư viện kiểu mới của javascript vậy khác nhau giữa chúng là gì? Mình sẽ cho biết dưới đây.
Xem thêm: Game Chịch 18+ – Kho Game 18+ Đã Có Ai Share Chưa
Window.onload()
Sự kiện này có ý nghĩa rằng khi trình duyệt đã load xong mọi thứ (image, js, css) thì những đoạn code nằm bên trong đó mới được chạy. Có một lưu ý rằng nếu bạn sử dụng onload cho một thẻ HTML nào đó thì nó sẽ có tác dụng với thẻ HTML đó thôi nhưng nếu bạn dùng cho window thì nó sẽ có tác dụng cho toàn trang.
Hay nói cách khác những đoạn code nằm bên trong sự kiện onload sẽ được chạy sau cùng khi mà trình JS đã được biên dịch 1 lần. Chính vì vậy nếu trong sự kiện onload bạn gọi tới một hàm nào đó thì dù bạn đặt hàm đó phía trên hay phía dưới thì đều đúng
$(document).ready()
Cũng giống với sự kiện Window.onload() nếu bạn muốn một sự kiện jQuery nào đó hoạt động bạn phải gọi nó bên trong hàm $(document).ready(). Nhưng mọi thứ bên trong hàm này sẽ được load ngay khi DOM Tree được load và trước khi toàn bộ nội dung của trang được load.
Tham khảo: Khoá học Online nền tảng lập trình cho người mới bắt đầu bằng ngôn ngữ JavaScript
Kết Luận
$(document).ready() có ưu điểm rõ rệt hơn onload khi thời điểm kích hoạt sự kiện là sớm hơn, đặc biệt khi trang web có dung lượng lớn, chứa nhiều hình ảnh.
Xem thêm: 3000+ Đồng Hồ Casio Việt Nam, Đồng Hồ Casio Chính Hãng Nhật Bản
Tuy nhiên nếu bạn cần thao tác JavaScript với các hình ảnh thì sử dụng window.onload() là hợp lý. Vậy nên tùy mục đích sử dụng các bạn có thể áp dụng kiến thức này vào việc lập trình với JavaScript.
Vậy là đến đây bài viết về $(Document).Ready(Function() Là Gì, Jquery Tại Sao Cần Sử Dụng Document đã dừng lại rồi. Hy vọng bạn luôn theo dõi và đọc những bài viết hay của chúng tôi trên website VCCIDATA.COM.VN
Chúc các bạn luôn gặt hái nhiều thành công trong cuộc sống!
