Forum

Home » jQuery giới thiệu » xem chi tiết

1
Hình đại diện
admin

Bài học thứ 4 tiếp theo (jQuery Event Methods)

Đăng lúc: 16:51:20 10/04/2017
Cú pháp jQuery của 1 phương thức Event
- Mỗi Event trong DOM đều có một Event trong jQuery tương ứng
- Để định nghĩa 1 Event click chuột trên một đoạn văn bản trong thẻ <p>, ta có thể viết như sau:

$("p").click();
- Để định nghĩa các lệnh sẽ thực hiện khi một Event là fires (Fires - phần trên), chúng được viết như sau:

$("p").click(function(){
// các lệnh cần thực hiện viết ở đây nhé
});

- Một số Event jQuery thường dùng:
+$(document).ready() //phương thức nayf cho phép chúng ta viết các lệnh sẽ được thực thi khi trang web đã được tải hoàn chỉnh từ máy chủ (tham khảo ở các bài học đầu tiên)

+ click()// phương thức này gắn liền với một phần tử html khi mà nó được chuột click trên đó. Đồng thời, nó cho phép chúng ta viết các lệnh khi sự kiện này được fires

=> Một ví dụ cụ thể về click Event được fire khi nhấn chuột trên văn bản trong thẻ <p> và các văn bản này sẽ bị ẩn:
$("p").click(function(){
$(this).hide();
});
+ dblclick()// gắn liền với một phương thức khi nhấp đôi chuột trên 1 phần tử html. Nội dung lệnh được viết như sau:

$("p").dblclick(function(){
$(this).hide();
});
Hình đại diện
admin
Đăng lúc: 17:24:19 10/04/2017
- mouseenter()// Event xảy ra khi con trỏ chuột chạm đến phần tử html
+ Event: Con trỏ chuột chạm đến nội dung thẻ <p1>; Lệnh thực hiện khi fire: ẩn nội dung trong <p1>; CÚ PHÁP VIẾT NHƯ SAU:

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

- mouseleave()
+ Event: Con trỏ chuột RỜI KHỎI đến nội dung thẻ <p1>; Lệnh thực hiện khi fire: hiện cửa sổ chào
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
- mousedown()
+ Event: Con trỏ chuột nhấn xuống (không nhất thiết phải thả lên) nội dung thẻ <p1>; Lệnh thực hiện khi fire: hiện cửa sổ thông báo

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

- mouseup()
+ Event: Con trỏ chuột thả lên (không nhất thiết trước đó phải nhấn xuông) nội dung thẻ <p1>; Lệnh thực hiện khi fire: hiện cửa sổ thông báo

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

- hover()
+ Event: Con chuột không nhấn và trỏ chuột lướt trên nội dung thẻ <p1>; Lệnh thực hiện khi fire ở 2 trường hợp lướt và rời khỏi : hiện cửa sổ thông báo tương ứng

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

- focus()
+ Event: Một ô nhập liệu trong form (thẻ <input>) đã có focus ; Lệnh thực hiện khi fire: đổi màu nền ô nhập liệu

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

- blur()
+ Event: Một ô nhập liệu trong form (thẻ <input>) mất focus; Lệnh thực hiện khi fire: đổi màu nền ô nhập liệu

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

- on()
+ Event: xảy ra khi có nhiều event khác được định nghĩa bên trong nó được xảy ra. Lệnh thực hiện khi xảy ra tương ứng với các events được định nghĩa bên trong
+ Định nghĩa bên trong 1 Event click
$("p").on("click", function(){
$(this).hide();
});
+ Định nghĩa bên trong 3 Event mouseenter, mouseleave, click
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});

353: truy cập - Anynomus: online trang này.
1






VTNSolution ™ là một hệ thống mở, thành viên tự chịu trách nhiệm về nội dung đăng tải do mình đưa lên. Các phần mềm, logo, hình ảnh, thương hiệu... có bản quyền thuộc về chủ nhân sở hữu. Truy cập, sử dụng website này bạn phải chấp nhận Quy định của Diễn đàn
Powered by: VTNSOLUTION Copyright © 2007 - 2020
Thiết kế bởi Cty Giải pháp công nghệ VTN.
Website đang hoạt động thử nghiệm. Chờ giấy phép MXH/TTDT của Bộ TT&TT.
Lên đầu trang
Xuống cuối trang