Thứ Sáu, 7 tháng 3, 2014
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 »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét