Bộ chọn jQuery là một trong những phần quan trọng nhất của thư viện jQuery.
Bộ chọn jQuery
Bộ chọn jQuery cho phép bạn chọn và thao tác trên các thành phần HTML.
Bộ chọn jQuery được sử dụng để “tìm kiếm” (hoặc lựa chọn) phần tử HTML dựa trên id, class, kiểu, thuộc tính, giá trị của thuộc tính và nhiều yếu tố khác nữa. Nó dựa trên bộ chọn của CSS, và thêm vào đó có những bộ chọn tùy biến riêng.
Tất cả các bộ chọn trong jQuery bắt đầu với ký hiệu $ và dấu ngoặc đơn: $()
Lựa chọn phần tử theo tên
jQuery lựa chọn thành phần dựa trên tên của phần tử.
Bạn có thể chọn tất cả các thẻ <p> trong trang bằng cách:
$("p")Ví dụ:
Khi người dùng click vào button, tất cả các thẻ <p> sẽ bị ẩn đi:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});Lựa chọn theo id
jQuery có thể sử dụng id của thẻ HTML để tìm ra phần tử cụ thể cần tác động.
Một id phải duy nhất trong trang, vì vậy bạn phải sử dụng #id selector khi bạn muốn tìm kiếm một thành phần duy nhất.
Để tìm phần tử với id cụ thể, viết ký tự thăng (#) theo sau bởi tên id của phần tử HTML: $("#test")
Ví dụ:
Khi người dùng click vào butto, phần tử với id=”test” sẽ bị ẩn đi:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});Lựa chọn theo class
Bộ chọn jQuery theo class tìm phần tử với một class cụ thể.
Để tìm các phần tử với class cụ thể, viết dấu chấm theo sau bởi tên của class:
$(".test")Ví dụ
Khi người dùng click vào button, thành phần với class=”test” sẽ bị ẩn đi:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});Thêm các ví dụ về bộ chọn trong jQuery
| Cú pháp | Mô tả | |
|---|---|---|
| $(“*”) | Chọn tất cả các thành phần | |
| $(this) | Chọn phần tử HTML hiện tại | |
| $(“p.intro”) | Chọn tất cả các thẻ p với class là intro | |
| $(“p:first”) | Chọn thẻ p đầu tiên | |
| $(“ul li:first”) | Chọn thẻ li đầu tiên nằm trong thẻ ul đầu tiên | |
| $(“ul li:first-child”) | Chọn tất cả các thẻ li đầu tiên nằm trong các thẻ ul | |
| $(“[href]”) | Lựa chọn tất cả các thẻ có thuộc tính href | |
| $(“a[target=’_blank’]”) | Lựa chọn tất cả các thẻ a với thuộc tính được chọn có giá trị bằng “_blank” | |
| $(“a[target!=’_blank’]”) | Lựa chọn tất cả các thẻ a với thuộc tính được chọn có giá trị khác “_blank” | |
| $(“:button”) | Lựa chọn tất cả các thẻ <button> và input có type là button (type=”button”) | |
| $(“tr:even”) | Lựa chọ tất cả các thẻ <tr> chẵn | |
| $(“tr:odd”) | Lựa chọn tất cả các thẻ <tr> lẻ |
Chức năng trong một file riêng
Nếu trang web của bạn bao gồm nhiều trang, và bạn muốn chức năng jQuery của bạn vận hành dễ dàng, bạn có thể đưa file jQuery đó vào file .js riêng.Khi chúng tôi thực hành các bài tập liên quan đến jQuery trong các bài hướng dẫn, các chức năng được bổ sung trực tiếp vào bên trong thành phần <head> . Tuy nhiên, đôi khi nó là thích hợp hơn để đặt chúng trong một file riêng biệt, giống như thế này (sử dụng thuộc tính src để liên kết tới các file .js) :
Ví dụ:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>