Sự kiện được sinh ra để giúp người dùng tương tác với các trang web, vậy làm thế nào để quản lý các sự kiện này? Jquery cung cấp cho chúng ta hai trình xử lý sự kiện, document realy và $ (window).load ().
Trên thực tế, $ (document).ready () hay $ (document).ready (function ()) có nhiều ưu điểm hơn window.load nên nó thường được sử dụng. Vì vậy, trong bài đăng này, tôi sẽ phân tích sâu về $ (document).ready (). Mời các bạn theo dõi.
Tham Khảo Thêm: margins là gì – Ý nghĩa và các hoạt động của ký quỹ
Document ready là gì?
document.ready là trình xử lý sự kiện Jquery cơ bản. Nói tóm lại, đây cũng là một sự kiện trong jquery kích hoạt $ (document).ready () khi tài liệu html của trang web tải xong và cây DOM được tạo.
$ (document.ready () kích hoạt sự kiện ngay lập tức trước khi cây DOM được tải và trước khi toàn bộ nội dung của trang được tải
Hàm $ (document).ready () có thể được gọi nhiều lần, nếu không chúng ta có thể viết $ (function () {…..}) hoặc $ (). Ready (function () {…..}) cũng rất tốt.
Ví dụ document realy
- Mã HTML:
- <div style=”background: #fff; border: 1px dashed #ddd; margin: 5px; padding: 10px;” id=”body1″ >
- <button id=”target”>click here</button>
- </div>
- mã jQuery:
- $(document).ready(function() {
- $(‘#target’).click(function(e){
- $(“#body1”).css(“color”, “magenta”);
- });
- });
- kết quả:
- Khi bạn nhấp vào nút, màu văn bản của nút sẽ thay đổi màu
Một số loại sự kiện phổ biến
Sự kiện chuột: click (), hover (), mouseout (), mousedown (), mouseup (), mouseover ()…
Sự kiện bàn phím: các sự kiện xảy ra khi chúng ta nhấn phím hoặc tổ hợp phím: keydown ((), keyup (), keypress (),…..
Các sự kiện biểu mẫu: dim (), focus (), change (), submit (), select (),….
Sự kiện trình duyệt: Được kích hoạt khi chúng tôi tương tác với cửa sổ trình duyệt, chẳng hạn như scroll () – cuộn trang hoặc resize () – kích thước cửa sổ thay đổi.
Tìm Hiểu Thêm: Năm 2023 là năm con gì?
Đến đây chắc bạn đã biết document realy là gì và cách sử dụng nó rồi phải không? Chúc may mắn với công việc của bạn với Jquery
Truy cập trang web The Ocean Apartments của chúng tôi hàng ngày để nhận thêm nhiều kiến thức hữu ích nhé!