Ngôn ngữ Jquery khá mạnh mẽ trong việc bắt sự kiện. Nó sẽ lắng nghe người dùng thực hiện hành vi từ đó thực thi các chức năng đáp ứng lại. Bài viết này chúng ta cùng tìm hiểu về Sự kiện click() trong jQuery. Và thực hiện các bài tập ví dụ để tường tận hơn.

Cách viết sự kiện Click()

$(selector).click(function() {

// Code thực thi sau khi sự kiện click() xảy ra

}

)

Ví dụ:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ví dụ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert(" Sự kiện Click đã thực thi! ");
});
});
</script>
</head>

<body>

<p>Nhấp vào đây!</p>

</body>
</html>

Kết quả là một hộp cảnh báo xuất hiện

su-kien-click-trong-jquery

Ví dụ tiếp theo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#an").click(function(){
$("h2").hide();
});
$("#hien").click(function(){
$("h2").show();
});
});
</script>
</head>
<body>

<h2>Nếu bạn nhấp vào Button ẩn văn bản sẽ biến mất, ấn vào Button hiện sẽ hiện ra.</h2>

<button id="an">Ẩn</button>
<button id="hien">Hiện</button>

</body>
</html>

Ngoài sự kiện click() thì một số Event cũng thường gặp như:

  • dblclick: nhấp đôi chuột lên phần tử
  • mouseenter: khi chuột đi vào phần tử
  • mouseleave: khi con chuột rời khỏi phần tử.
  • mouseover: khi con chuột trên phần tử.

Sau khi tìm hiểu xong click() và thực hành ví dụ bạn thấy có thú vị không. Jquery có nhiều thứ hay ho để khám phá nữa đấy. Hãy đón chờ những bài tiếp theo của mình nhé!

Category:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *