[JQuery] Phần 3: Các hàm chọn jQuery (jQuery Selectors)

Cập nhật lần cuối: 07/04/2017 lúc 14:22:42

jQuery Selector tạm dịch là “hàm chọn jQuery” là 1 thành phần quan trọng nhất trong jQuery. jQuery Selector cho phép lựa chọn và điều khiển các phần tử HTML.

Các jQuery Selector được dùng để “tìm” (hay chọn) phần tử HTML dựa theo tên, id, lớp (class), dạng, thuộc tính, giá trị thuộc tính và nhiều nữa. jQuery Selector dựa trên sự tồn tại của CSS Selector và chứa các lớp chọn riêng tự tạo.

Tất cả các bộ chọn jQuery bắt đầu bằng ký tự đô la và cặp dấu ngoặc tròn đóng/mở: $().

Hàm chọn phần tử
Hàm chọn phần tử jQuery chọn các phần tử dựa theo tên. Bạn có thể chọn tất cả phần tử p trên 1 trang như sau $(“p”). Trong ví dụ sau, khi người dùng nhấn nút, tất cả phần tử p sẽ bị ẩn đi.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>

<h2>Đây là heading h2 --- dammio.com</h2>
<p>Đây là đoạn văn thứ 1</p>
<p>Đây là đoạn văn thứ 2</p>
<button>Nhấn nút để ẩn 2 đoạn văn trên</button>

</body>
</html>

Hàm chọn #id
Hàm chọn jQuery #id sử dụng thuộc tính id của 1 thẻ HTML để tìm phần tử nào đó. Một chỉ số id nên là duy nhất trong 1 trang web, và chỉ nên dùng hàm chọn jQuery khi muốn tìm 1 phần tử đơn, duy nhất. Để tìm 1 phần tử với id cho trước, chỉ cần viết dấu # đằng trước giá trị id đó. Chẳng hạn như $(“#test”) là tìm phần tử có id=”test”.

Trong ví dụ sau đây, khi người dùng nhấn nút, phần tử id=”test” sẽ bị ẩn đi.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
</script>
</head>
<body>

<h2>Đây là tiêu đề --- dammio.com</h2>

<p>Đây là đoạn văn</p>
<p id="test">Đây là đoạn văn 2</p>

<button>Nhấn nút để đoạn văn 2 ẩn đi</button>

</body>
</html>

Hàm chọn .class
Hàm chọn jQuery .class tìm các phần tử trong 1 lớp nào đó. Để tìm các phần tử theo 1 lớp, viết dấu chấm theo sau là tên lớp, chẳng hạn như $(“.test”) là tìm lớp có class=”test”.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});
</script>
</head>
<body>

<h2 class="test">Đây là tiêu đề h2 - dammio.com</h2>

<p class="test">Đây là đoạn văn bản 1 với class="test"</p>
<p>Đây là đoạn văn bản 2</p>

<button>Nút nhấn</button>

</body>
</html>

Một số ví dụ hàm chọn jQuery

$(“*”): chọn tất cả các phần tử
$(this): chọn phần tử hiện tại
$(“p.intro”): chọn phần tử p với class=”intro”
$(“p:first”): chọn phần tử p đầu tiên
$(“ul li:first”): chọn phần tử li đầu tiên trong phần tử ul đầu tiên
$(“ul li:first-child”): chọn phần tử li đầu tiên của mỗi phần tử ul
$(“[href]”): chọn tất cả các phần tử có thuộc tính href
$(“a[target=’_blank’]”): chọn tất cả phần tử a với giá trị target là _blank
$(“a[target!=’_blank’]”): chọn tất cả phần tử a với giá trị target không là _blank
$(“:button”): chọn tất cả phần tử button và phần tử input với type=”button”
$(“tr:even”): chọn phần tử tr ở vị trí chẵn
$(“tr:odd”): chọn phần tử tr ở vị trí lẻ

Liên quan: [JQuery] Phần 1: Giới thiệu về jQuery

Các hàm trong 1 file tách rời
Nếu trang web của bạn chứa nhiều trang web, và bạn muốn dùng các hàm jQuery cho nhiều trang, cách dễ nhất là đặt các hàm jQuery vào 1 tập tin riêng và nhúng vào trang web nào mà bạn muốn. Để thêm jQuery vào trang web, tương tự như thêm file JavaScript, nhúng thông qua thẻ script thông thường phần đầu trang web (head).

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<script src="cac_ham_jquery.js"></script>
</head>

Kết luận: như vậy trong bài này, các bạn đã học được các hàm chọn trong jQuery.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [JQuery] Phần 3: Các hàm chọn jQuery (jQuery Selectors). https://www.dammio.com/2017/04/03/jquery-phan-3-cac-ham-chon-jquery-jquery-selectors.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[JQuery] Phần 3: Các hàm chọn jQuery (jQuery Selectors)}, year = {2017}, url = {https://www.dammio.com/2017/04/03/jquery-phan-3-cac-ham-chon-jquery-jquery-selectors}, urldate = {2024-07-23} }

Kết nối