Thứ Sáu, 7 tháng 3, 2014
jQuery Events
«Trở lại
Chương tiếp theo »
jQuery là thích hợp thực hiện để đối phó với các sự kiện trong một trang HTML.
Sự kiện là gì?
Tất cả các hành động của khách truy cập khác nhau mà một trang web có thể đáp ứng được gọi là sự kiện.
Một sự kiện đại diện cho thời điểm chính xác khi một cái gì đó sẽ xảy ra.
Ví dụ:
- di chuyển chuột trên một phần tử
- lựa chọn một nút radio
- nhấp vào một yếu tố
Thuật ngữ "cháy" thường được sử dụng với các sự kiện. Ví dụ: "Sự kiện bấm phím bắn thời điểm bạn nhấn một phím".
Dưới đây là một số sự kiện DOM chung:
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery Cú pháp Đối với phương pháp tổ chức sự kiện
Trong jQuery, hầu hết các sự kiện DOM có một phương pháp tương đương jQuery.
Để gán một sự kiện click vào tất cả các đoạn văn trên một trang, bạn có thể làm điều này:
$("p").click();
Bước tiếp theo là xác định những gì sẽ xảy ra khi sự kiện cháy. Bạn phải vượt qua một chức năng để sự kiện này:
$("p").click(function(){
// action goes here!!
});
// action goes here!!
});
Thường sử dụng phương pháp jQuery sự kiện
$ (Document). Ready ()
$ (Document). Ready () phương pháp cho phép chúng ta thực hiện một chức năng khi tài liệu được nạp đầy đủ. Sự kiện này đã được giải thích trong jQuery cú pháp chương.
click ()
Phương pháp nhấp chuột () gắn một chức năng xử lý sự kiện cho một phần tử HTML.
Chức năng được thực hiện khi người dùng nhấp chuột vào phần tử HTML.
Ví dụ sau đây cho biết: Khi một nhấp chuột sự kiện cháy trên một yếu tố <p>; ẩn <p> hiện tại:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Thử nó cho mình »
dblclick ()
Phương pháp dblclick () gắn một chức năng xử lý sự kiện cho một phần tử HTML.
Chức năng được thực hiện khi người dùng click đúp chuột vào phần tử HTML:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Thử nó cho mình »
mouseenter ()
Phương pháp mouseenter () gắn một chức năng xử lý sự kiện cho một phần tử HTML.
Chức năng được thực hiện khi con trỏ chuột vào các phần tử HTML:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
Thử nó cho mình »
mouseleave ()
Phương pháp mouseleave () gắn một chức năng xử lý sự kiện cho một phần tử HTML.
Chức năng được thực hiện khi con trỏ chuột rời khỏi phần tử HTML:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
Thử nó cho mình »
mouseDown ()
Phương pháp mouseDown () gắn một chức năng xử lý sự kiện cho một phần tử HTML.
Chức năng được thực thi, khi nút chuột trái được nhấn xuống, trong khi con chuột là trên các phần tử HTML:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
Thử nó cho mình »
mouseup ()
Phương pháp mouseup () gắn một chức năng xử lý sự kiện cho một phần tử HTML.
Chức năng được thực thi, khi nút chuột trái được phát hành, trong khi con chuột là trên các phần tử HTML:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
Thử nó cho mình »
hover ()
Phương pháp di chuột () có hai chức năng, là sự kết hợp của mouseenter () và () phương pháp mouseleave.
Chức năng đầu tiên được thực hiện khi con chuột vào các phần tử HTML, và chức năng thứ hai được thực hiện khi chuột rời khỏi phần tử HTML:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
Thử nó cho mình »
focus()
Phương pháp tập trung () gắn một chức năng xử lý sự kiện cho một trường mẫu HTML.
Chức năng được thực thi khi trường mẫu được chú ý:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
Thử nó cho mình »
blur ()
Phương pháp blur () gắn một chức năng xử lý sự kiện cho một trường mẫu HTML.
Chức năng được thực thi khi trường mẫu mất tập trung:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
Thử nó cho mình »
«Trở lại
Chương tiếp theo »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét