Ở bài trước các bạn đã được làm quen với jquery selector, biết được cách lựa chọn các thành phần HTML mong muốn. Ở bài này, mình sẽ giới thiệu với các bạn về các sự kiện trong jquery và cách sử dụng các sự kiện quen thuộc.
Sự kiện trong jquery là gì?
Tất cả các hành động của người truy cập mà trang web có thể trả lời được gọi là sự kiên.
Ví dụ:
Nhấn vào một nút, di chuyển chuột, chọn một nút radio,…
Cú pháp sử dụng sự kiện trong jquery
Ví dụ:
Khi nhân nút button thì ẩn đi tất cả các thẻ p
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script>$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});</script> |
Ở đây chúng ta sử dụng selector dựa theo tên của thẻ là button. Sự kiện click khi nhấn nút button. Tất cả các thẻ p ẩn đi là sử dụng hiệu ứng trong jquery, chúng ta sẽ tìm hiểu về hiệu ứng trong jquery ở bài tiếp theo. Demo
Khi nhấn vào thẻ p thì thẻ p đó sẽ bị ẩn đi
1 2 3 4 5 6 7 | <script>$("p").click(function(){ $(this).hide();});</script> |
Ở đây chúng ta sử dụng selector this để chọn chính thẻ p được click vào. Demo
Trong các ví dụ trên chúng ta đã làm quen với sự kiện click. Tiếp theo chúng ta sẽ tìm hiểu thêm về những sự kiện thường gặp trong jquery khác nhé.
Sự kiện nhấp đúp chuột:
1 2 3 4 5 | <script>$("p").dblclick(function(){ $(this).hide();});</script> |
Ở đây khi nhấn đúp chuột vào thẻ p thì thẻ đó sẽ bị ẩn đi. Demo
Sự kiện hover chuột
1 2 3 4 5 | <script>$("#demo").hover(function(){ alert("Bạn đã hover lên thẻ p thứ 3");},</script> |
Khi bạn hover chuột lên thẻ p có id = demo thì xuất hiện popup thông báo. Demo
Sự kiện focus thường sử dụng với các thành phần trong form
1 2 3 4 5 6 7 | <script>$(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "#cccccc"); });});</script> |
Khi focus chuột vào thẻ input thì thẻ input sẽ đổi màu. Demo
Ngoài những sự kiện trên thì còn rất nhiều sự kiện khác trong jquery mà chúng ta trong quá trình làm việc sẽ gặp tới. Tuy chức năng mỗi sự kiện khác nhau nhưng cách dùng thì tương tự nhau.
Kết luận:
Ở bài thứ 3 trong series học jquery cơ bản này thì mình đã giới thiệu về sự kiện trong jquery và cách sử dụng. Hy vọng qua bài này các bạn đã có thể sử dụng được các sự kiên của jquery vào các ứng dụng đơn giản rồi. Ở bài tiếp theo chúng ta sẽ tìm hiểu về hiệu ứng trong jquery.