$(document) .ready (function() là gì ?

Các sự kiện (events) được sinh ra để giúp tương tác giữa người dùng và trang web, vậy làm thế nào để quản lý các sự kiện đó? Jquery cho chúng ta hẳn 2 bộ quản lý sự kiện đó là $(document).ready() và $(window).load().

Trong thực tế $(document).ready() hay $(document).ready(function()) có ưu điểm hơn window.load rất nhiều nên thường được sử dụng. Bởi vậy trong bài viết này mình sẽ đi sâu phân tích về $(document).ready(). Các bạn cùng theo dõi nhé.

$(document).ready() là gì?

document.ready là bộ quản lý sự kiện cơ bản của Jquery. Hiểu nôm na thì nó cũng là 1 sự kiện trong jquery, $(document).ready() được kích hoạt khi tài liệu html của trang web được load xong và cây DOM được tạo thành.

$(document).ready() kích hoạt sự kiện ngay khi DOM Tree được load và trước khi toàn bộ nội dung của trang được load

Hàm $(document).ready() có thể được gọi nhiều lần, bên cạnh cách viết này chúng ta có thể viết $(function(){……..}) hoặc $().ready(function(){……….}) đều được.

Ví dụ minh họa $(document).ready()

Code html:

<div style="background: #fff; border: 1px dashed #ddd; margin: 5px; padding: 10px;" id="body1" >
<button id="target">click here</button>
</div> 

Code Jquery:

 $(document).ready(function() {
                $('#target').click(function( e ){
                $("#body1").css("color", "magenta");
                });
         });

Kết quả :

Khi click vào button màu chữ của button sẽ đổi màu

Một số loại sự kiện hay gặp

• Sự kiện của con chuột: click(), hover(), mouseout(), mousedown(), mouseup(), mouseover()……
• Sự kiện bàn phím: là các sự kiện xảy ra khi ta nhấn một phím hay tổ hợp phím nào đó: keydown((), keyup(), keypress(),…..
• Sự kiện Form: blur(), focus(), change(), submit(), select(),….
• Sự kiện trình duyệt: được kích hoạt khi ta tương tác với cửa sổ trình duyệt như scroll()– cuộn trang, hay resize() – kích thước cửa sổ thay đổi.

Đến đây chắc hẳn các bạn đã biết $(document).ready là gì và cách dùng cơ bản rồi đúng không. Chúc các bạn làm việc tốt vớiJquery nhé