Sự kiện jQuery

Khóa học gợi ý:

jQuery được thiết kế đặc biệt cho việc xử lý sự kiện.

Hàm xử lý sự kiện jQuery

Chương trình xử lý sự kiện là phương pháp cốt lõi trong jQuery. Termini được sử dụng thường xuyên là sự kiện "kích hoạt" (hoặc "kích hoạt").

Thường thì các mã jQuery sẽ được đặt trong phương pháp xử lý sự kiện ở phần <head>.

Mô hình

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>Đây là tiêu đề</h2>
<p>Đây là đoạn văn.</p>
<p>Đây là đoạn văn khác.</p>
<button>Nhấn tôi</button>
</body>
</html>

Thử nghiệm trực tiếp

Trong ví dụ trên, khi sự kiện nhấn nút được kích hoạt, một hàm sẽ được gọi:

$("button").click(function() {  // một số mã... } )

Phương pháp này ẩn tất cả các yếu tố <p>:

$("p").hide();

Các hàm trong tệp độc lập

Nếu trang web của bạn chứa nhiều trang và bạn muốn các hàm jQuery của bạn dễ dàng bảo trì, thì hãy đặt các hàm jQuery của bạn vào tệp .js độc lập.

Khi chúng tôi trình bày jQuery trong hướng dẫn, chúng tôi sẽ thêm hàm trực tiếp vào phần <head>. Tuy nhiên, tốt hơn là đặt chúng vào một tệp riêng biệt, như vậy (thông qua thuộc tính src để tham chiếu tệp):

Mô hình

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

Xung đột tên jQuery

jQuery sử dụng ký hiệu $ như là cách giới thiệu jQuery.

Các hàm của một số thư viện JavaScript khác (ví dụ như Prototype) cũng sử dụng ký hiệu $.

jQuery sử dụng phương pháp noConflict() để giải quyết vấn đề này.

var jq=jQuery.noConflict()，giúp bạn sử dụng tên của riêng mình (ví dụ như jq) để thay thế ký hiệu $.

Thử nghiệm trực tiếp

Kết luận

Do jQuery được thiết kế đặc biệt để xử lý sự kiện HTML, vì vậy khi bạn tuân theo các nguyên tắc sau, mã của bạn sẽ trở nên phù hợp và dễ bảo trì hơn:

  • Đặt tất cả mã jQuery vào hàm xử lý sự kiện
  • Đặt tất cả các hàm xử lý sự kiện vào bộ xử lý sự kiện sẵn sàng của tài liệu
  • Đặt mã jQuery vào tệp .js riêng biệt
  • Nếu có xung đột tên, hãy đổi tên thư viện jQuery

Sự kiện jQuery

Dưới đây là một số ví dụ về phương pháp sự kiện trong jQuery:

hàm sự kiện Gán hàm vào
$(document).ready(function) Gán hàm vào sự kiện sẵn sàng của tài liệu (khi tài liệu hoàn thành việc tải)
$(selector).click(function) Gây sự kiện hoặc gán hàm vào sự kiện khi所选元素点击
$(selector).dblclick(function) Gây sự kiện hoặc gán hàm vào sự kiện khi所选元素双击
$(selector).focus(function) Gây sự kiện hoặc gán hàm vào sự kiện khi所选元素获得焦点
$(selector).mouseover(function) Gây sự kiện hoặc gán hàm vào sự kiện悬停在所选元素上

Nếu bạn cần sách tham khảo đầy đủ, hãy truy cập trang web của chúng tôi jQuery Sách tham khảo sự kiện。