Mục lục:
Video: Học lập trình Web A-Z - jQuery- Bài 03 - Điều khiển sự kiện cơ bản 2025
Thư viện jQuery thêm một khả năng rất mạnh khác cho JavaScript. Nó cho phép lập trình HTML5 và CSS3 dễ dàng đính kèm một sự kiện vào bất kỳ đối tượng jQuery nào. Hãy xem hover. html.
Khi bạn di chuyển con trỏ chuột qua bất kỳ mục nào trong danh sách, một đường viền sẽ xuất hiện quanh mặt hàng. Đây không phải là một hiệu ứng khó khăn để đạt được trong CSS thông thường nhưng nó thậm chí còn dễ dàng hơn trong jQuery.
Cách thêm sự kiện di chuột
Xem mã để biết cách hoạt động:
hover. html $ (init); hàm init () {$ ("li"). hover (border, noBorder);} / / end init function border () {$ (this). css ("border", "1px solid black");} function noBorder () {$ (this). css ("border", "0px none black");}
Hover Demo
- alpha
- beta
- gamma
- delta
HTML không thể đơn giản hơn. Nó chỉ đơn giản là một danh sách không có thứ tự. JavaScript không phức tạp hơn nhiều. Nó bao gồm ba chức năng một dòng:
-
init () được gọi là khi tài liệu đã sẵn sàng. Nó làm cho các đối tượng jQuery của tất cả các danh sách và gắn kết các sự kiện với họ. Hàm hover () chấp nhận hai tham số:
-
Đầu tiên là một hàm được gọi khi con trỏ di chuyển trên đối tượng.
-
Thứ hai là một hàm được gọi khi con trỏ rời khỏi đối tượng.
-
-
border () vẽ một đường viền xung quanh phần tử hiện tại. Mã nhận dạng $ (this) được sử dụng để xác định đối tượng hiện tại.
-
noborder () là một hàm tương tự như hàm border () , nhưng nó loại bỏ một đường biên từ đối tượng hiện tại.
Trong ví dụ này, đã sử dụng ba chức năng khác nhau. Nhiều người lập trình jQuery thích sử dụng các hàm nặc danh (đôi khi được gọi là lambda chức năng) để bao gồm toàn bộ chức năng trong một dòng dài:
$ ("li"). ("border", "1px solid black");}, function () {$ (this) css ("border", "0px none black");});
Lưu ý rằng điều này vẫn còn về mặt kỹ thuật một dòng mã. Thay vì tham khảo hai chức năng đã được tạo ra, bạn có thể xây dựng các chức năng ngay lập tức khi cần thiết. Mỗi định nghĩa chức năng là một tham số cho phương thức hover ().
Nếu bạn là một nhà khoa học máy tính, bạn có thể lập luận rằng đây không phải là một ví dụ hoàn hảo về chức năng lambda, và bạn sẽ đúng. Điều quan trọng là để ý rằng một số ý tưởng về lập trình chức năng (như chức năng lambda) đang dần dần biến thành chương trình AJAX chính thống và đó là một sự phát triển thú vị.
Thay đổi các lớp học trên bay
jQuery hỗ trợ một tính năng tuyệt vời.Bạn có thể định nghĩa một phong cách CSS và sau đó thêm hoặc loại bỏ phong cách đó từ một phần tử tự động.
Mã cho thấy tính dễ dàng của loại này là thêm vào:
class. html. có biên giới {border: 1px solid black;} $ (init); hàm init () {$ ("li"). click (toggleBorder);} / / end init chức năng toggleBorder () {$ (this). toggleClass ("bordered");}
Class Demo
- alpha
- beta
- gamma
- delta
Dưới đây là cách thực hiện chương trình này:
-
Bắt đầu với một trang HTML cơ bản.
Tất cả những điều thú vị xảy ra trong CSS và JavaScript, vì vậy nội dung thực tế của trang không quan trọng.
-
Tạo lớp bạn muốn thêm và xóa.
Bạn có thể xây dựng một lớp CSS được gọi là chỉ đơn giản là rút ra một biên giới xung quanh phần tử. Tất nhiên, bạn có thể tạo ra một lớp CSS phức tạp hơn nhiều với tất cả các loại định dạng nếu bạn thích.
-
Liên kết một phương thức init ().
Khi bạn bắt đầu thấy, hầu hết các ứng dụng jQuery đều yêu cầu một số kiểu khởi tạo. Bạn có thể gọi chức năng đầu tiên. init ()
-
Gọi hàm toggleBorder () bất cứ khi nào người dùng nhấp vào một mục trong danh sách.
Phương thức init () chỉ đơn giản thiết lập một trình xử lý sự kiện. Bất cứ khi nào một mục trong danh sách nhận được sự kiện nhấp chuột (có nghĩa là nó được nhấp vào) thì nên kích hoạt chức năng toggleBorder (). Chức năng toggleBorder (), tốt, bật lại đường viền.
jQuery có một số phương pháp để thao tác lớp của một phần tử:
-
addClass () gán một lớp cho phần tử.
-
removeClass () loại bỏ một định nghĩa lớp học từ một phần tử.
-
toggleClass () chuyển đổi lớp (thêm nó nếu nó không được đính kèm hoặc loại bỏ nó bằng cách khác).
-
