Hiển thị các bài đăng có nhãn jQuery-Tutorial. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn jQuery-Tutorial. Hiển thị tất cả bài đăng
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 »
jQuery Selectors
«Trở lại
Chương tiếp theo »
jQuery Selectors là một trong những phần quan trọng nhất của thư viện jQuery.
jQuery Selectors
jQuery selectors cho phép bạn chọn và thao tác phần tử HTML (s).
jQuery Selectors được sử dụng để "tìm thấy" (hoặc chọn) các phần tử HTML dựa trên id của họ, các lớp học, các loại, thuộc tính, giá trị của các thuộc tính và nhiều hơn nữa. Nó dựa trên hiện có chọn lọc CSS , và ngoài ra, nó có một số bộ chọn riêng.
Tất cả các bộ chọn trong jQuery bắt đầu với ký hiệu đô la và dấu ngoặc đơn: $ ().
Các yếu tố Selector
Các yếu tố chọn jQuery lựa chọn các yếu tố dựa trên tên nguyên tố.
Bạn có thể chọn tất cả các <p> yếu tố trên một trang như thế này:
$("p")
Ví dụ
Khi người dùng nhấp chuột vào một nút, tất cả các yếu tố <p> sẽ được ẩn:
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(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Thử nó cho mình »
Các # id Selector
JQuery # id chọn sử dụng thuộc tính id của một thẻ HTML để tìm các yếu tố cụ thể.
Id phải là duy nhất trong một trang, vì vậy bạn nên sử dụng bộ chọn # id khi bạn muốn tìm một yếu tố độc đáo duy nhất.
Để tìm một phần tử với một id cụ thể, viết một nhân vật băm, tiếp theo là id của các yếu tố:
$("#test")
Ví dụ
Khi người dùng nhấp chuột vào một nút, các phần tử với id = "test" sẽ được ẩn:
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(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Thử nó cho mình »
Lớp Selector.
JQuery lớp chọn tìm thấy các yếu tố với một lớp cụ thể.
Để tìm các yếu tố với một lớp cụ thể, viết một nhân vật kỳ, tiếp theo là tên của lớp:
$(".test")
Ví dụ
Khi người dùng nhấp chuột vào một nút, các yếu tố với class = "test" sẽ được ẩn:
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(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Thử nó cho mình »
Chức năng trong một tập tin riêng biệt
Nếu trang web của bạn có chứa rất nhiều các trang, và bạn muốn chức năng jQuery của bạn sẽ được dễ dàng để duy trì, bạn có thể đặt các chức năng jQuery của bạn trong một tập tin js. Riêng biệt.
Khi chúng tôi chứng minh jQuery trong hướng dẫn này, các chức năng được bổ sung trực tiếp vào phần <head>. Tuy nhiên, đôi khi nó là thích hợp hơn để đặt chúng trong một tập tin riêng, như thế này (sử dụng thuộc tính src để tham khảo các file js.):
Ví dụ
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
«Trở lại
Chương tiếp theo »
jQuery Syntax
«Trở lại
Chương tiếp theo »
Với jQuery bạn chọn (truy vấn) các phần tử HTML và thực hiện "hành động" trên chúng.
jQuery Cú pháp
Cú pháp jQuery là thiết kế riêng làm cho việc lựa chọn các phần tử HTML và thực hiện một số hành động trên các yếu tố (s).
Cú pháp cơ bản là: $ ( selector ). hành động ()
- A $ dấu hiệu để xác định / truy cập jQuery
- A ( chọn ) để "truy vấn (hoặc tìm)" các phần tử HTML
- Một jQuery hành động () được thực hiện trên các phần tử (s)
Ví dụ:
$ (This) hide () -. Ẩn các yếu tố hiện tại.
$ ("P") ẩn () -. Giấu tất cả các yếu tố <p>.
$ (". Test") hide () -. Giấu tất cả các phần tử với class = "thử nghiệm".
$ ("# Test") hide () -. Giấu các phần tử với id = "test".
 | Là bạn quen với bộ chọn CSS? jQuery sử dụng cú pháp CSS để chọn yếu tố. Bạn sẽ tìm hiểu thêm về cú pháp chọn trong chương kế tiếp của hướng dẫn này. |
|---|
Các tài liệu đã sẵn sàng tổ chức sự kiện
Bạn có thể thấy rằng tất cả các phương pháp jQuery trong ví dụ của chúng tôi, đang ở trong một sự kiện sẵn sàng tài liệu:
$(document).ready(function(){
// jQuery methods go here...
});
// jQuery methods go here...
});
Điều này là để ngăn chặn bất kỳ mã jQuery chạy trước khi tài liệu được hoàn tất tải (sẵn sàng).
Đó là thực hành tốt để chờ đợi cho các tài liệu được nạp đầy đủ và sẵn sàng trước khi làm việc với nó. Điều này cũng cho phép bạn có mã JavaScript của bạn trước khi cơ thể của tài liệu của bạn, trong phần đầu.
Đây là một số ví dụ về các hành động có thể thất bại nếu phương pháp này được chạy trước khi tài liệu được nạp đầy đủ:
- Cố gắng che giấu một yếu tố mà không được tạo ra chưa
- Cố gắng để có được kích thước của một hình ảnh không được tải được nêu ra
Mẹo: Nhóm nghiên cứu jQuery cũng đã tạo ra một phương pháp ngắn hơn cho các sự kiện sẵn sàng tài liệu:
$(function(){
// jQuery methods go here...
});
// jQuery methods go here...
});
Sử dụng cú pháp mà bạn thích. Chúng tôi cho rằng sự kiện đã sẵn sàng tài liệu dễ hiểu khi đọc mã.
«Trở lại
Chương tiếp theo »
Đăng ký:
Bài đăng (Atom)