Bạn đang ở bài 3 trong 7 bài của serie Jquery cơ bản.

Ở 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.

su-kien-trong-jquery

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


<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


<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:

<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

<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

<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.

[Bài 3] Sự kiện trong jquery
5 (100%) 5 votes

Bình luận

1 Bình luận on "[Bài 3] Sự kiện trong jquery"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
trackback

[…] bài trước chúng ta đã tìm hiểu về sự kiện trong jquery. Ở bài này mình sẽ giới thiệu […]

wpDiscuz