jQuery Selectors là một bài quan trọng trong các bài học jQuery cơ bản và nâng cao. Bởi vì đòi hỏi độ chính xác khi bạn sử dụng bộ chọn này để truy cập đến các phần tử hoặc nhóm các phần tử có cùng thuộc tính.
jQuery Selectors là gì?
jQuery Selectors là một phần quan trọng trong cú pháp cơ bản của jQueryMà ở đó jQuery Selectors chính là một bộ chọn (tìm kiếm) các phần tử HTML, hoặc nhóm các phần tử HTML dựa trên các thuộc tính như$(selector).action()
id, class, types,attributes,values, và nhiều thuộc tính khác sẽ được nói rõ hơn trong phần tiếp theo của bài học này. jQuery Selector được phát triển dựa vào CSS Selector và tùy chỉnh thêm một số bộ chọn riêng.jQuery Selectors là một trong những tính năng quan trọng, giúp chúng ta dễ dàng lựa chọn truy xuất và làm việc với các phần tử. Đó cũng chính là ưu thế mạnh của jQuery so với javascript thông thường.
Ví dụ:
| jQuery | Javascript | |
|---|---|---|
Lựa chọn các phần tử là <p> |
$("p"); |
document.getElementsByTagName("p"); |
Vậy chúng ta cùng tìm hiểu thêm cách truy xuất đến từng phần tử (nhóm phần tử) cụ thể trong phần tiếp theo dưới đây nhé
Chọn phần tử thông thường - element Selector
jQuery Element Selector dựa trên phần tử như:Chọn tất cả các phần tử là
<p> chúng ta sẽ sử dụng $("p")
Ví dụ: Ẩn tất cả các phần tử
<p> khi click vào button
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Đây là ví dụ về jQuery Element Selector</h2>
<p>Đây là đoạn văn</p>
<p>Đây là một đoạn văn khác</p>
<button>Click để ẩn tất cả các đoạn văn</button>
</body>
</html>
Chọn phần tử theo #ID
#id jQuery Selector tìm phần tử cụ thể duy nhất bằng cách sử dụng thuộc tính id của thẻ HTML. Và phần tử có thuộc tính #id phải là duy nhất trong một trang nhé các bạn.Chọn phần tử có id như sau
id="laixe" chúng ta sẽ sử dụng $("#laixe")
Ví dụ: Ẩn tất phần tử có
id="laixe" khi click vào button
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#laixe").hide();
});
});
</script>
</head>
<body>
<h2>Ví dụ về Bộ chọn jQuery #ID Selector</h2>
<p>Đây là đoạn văn .</p>
<p id="laixe">Đây là đoạn văn có id="laixe"</p>
<button>Click me</button>
</body>
</html>
Chọn phần tử theo #class
#class jQuery Selector tìm nhóm các phần tử có cùng thuộc tính class thẻ HTML. Chọn các phần tử có class như sauclass="lop1" chúng ta sẽ sử dụng $(".lop1")
Ví dụ: Ẩn tất phần tử có
class="lop1" khi click vào button
<!--DOCTYPE html-->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".lop1").hide();
});
});
</script>
</head>
<body>
<h2>Ví dụ về Bộ chọn jQuery Class Selector</h2>
<p>Trần Văn Lợi không thuộc lớp nào cả</p>
<p class="lop1">Nguyễn Văn An là học sinh lop1</p>
<p class="lop2">Nguyễn Văn Bình là học sinh lop2</p>
<p class="lop1">Nguyễn Thị Ngọc là học sinh lop1</p>
<button>Click để ẩn học sinh lop1</button>
</body>
</html>
Chọn Theo Nhiều Phần Tử, Nhóm Phần Tử
Để chọn nhiều phần tử hoặc nhóm phần tử bạn sử dụng cú pháp jQuery sau:$(selector1,selector2,...,selectorN).action()
Ví dụ: Ẩn
class="lop1" và class="lop2" khi bấm button chúng ta sẽ dùng
$(document).ready(function(){
$("button").click(function(){
$(".lop1,.lop2").hide();
});
});
Bảng tổng hợp những cú pháp jQuery Selector
Dựa vào bảng dưới đây, giúp bạn truy vấn, sử dụng bộ chọn jQuery Selector một cách chính xác nhất đến những phần tử HTML.| Selector | Ví dụ | |
|---|---|---|
| * | $("*") |
Tất cả phần tử |
| #id | $("#laixe") |
Phần tử có id="laixe" |
| .class | $(".laixe") |
Tất cả phần tử có class="laixe" |
| .class,.class | $(".intro,.demo") |
Tất cả phần tử có class "intro" hoặc "demo" |
| element | $("p") |
Tất cả phần tử <p> |
| el1,el2,el3 | $("h1,div,p") |
Tất cả phần tử <h1>, <div> và <p> |
| :first | $("p:first") |
Phần tử <p> đầu tiên |
| :last | $("p:last") |
Phần tử <p> cuối cùng |
| :even | $("tr:even") |
Tất cả phần tử even <tr> (dòng lẻ trong table) |
| :odd | $("tr:odd") |
Tất cả phần tử odd <tr> (dòng chẵn trong table) |
| :first-child | $("p:first-child") |
Tất cả phần tử <p> là phần tử con đầu tiên |
| :first-of-type | $("p:first-of-type") |
Tất cả phần tử <p> là phần tử <p> đầu tiên |
| :last-child | $("p:last-child") |
Tất cả phần tử <p> là phần tử con cuối cùng |
| :last-of-type | $("p:last-of-type") |
Tất cả phần tử <p> là phần tử <p> cuối cùng |
| :nth-child(n) | $("p:nth-child(2)") |
Tất cả phần tử <p> là phần tử thứ 2 |
| :nth-last-child(n) | $("p:nth-last-child(2)") |
Tất cả phần tử <p> là phần tử con thứ 2, đếm từ phần tử con cuối cùng |
| :nth-of-type(n) | $("p:nth-of-type(2)") |
Tất cả phần tử <p> là phần tử <p> thứ 2 |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") |
Tất cả phần tử <p> là phần tử <p> thứ 2, đến từ phần tử cuối cùng |
| :only-child | $("p:only-child") |
Tất cả phần tử <p> là phần tử con duy nhất |
| :only-of-type | $("p:only-of-type") |
Tất cả những phần tử <p> là phần tử con duy nhất. Trong đó có thể chứa những phần tử khác <p> |
| parent > child | $("div > p") |
Tất cả phần tử <p> là phần tử con trực tiếp của phần tử <div> |
| parent descendant | $("div p") |
Tất cả phần tử <p> là phần tử con, cháu (descendant có nghĩa là hậu duệ) của phần tử <div> (dễ hiểu là nằm trong thẻ <div>) |
| element + next | $("div + p") |
Tất cả phần tử <p> là phần tử tiếp theo của phần tử <div> |
| element ~ siblings | $("div ~ p") |
Tất cả phần tử <p> cùng cấp và xuất hiện sau phần tử <div> |
| :eq(index) | $("ul li:eq(3)") |
Tất cả phần tử <li> thứ 4 (bởi vì index bắt đầu là bằng 0) |
| :gt(index) | $("ul li:gt(3)") |
Tất cả phần tử <li> có index lớn hơn 3 (tức là phần tử thứ 4 trở lên) |
| :lt(index) | $("ul li:lt(3)") |
Tất cả phần tử <li> có index nhỏ hơn 3, tức là phần tử đầu tiên (index = 0) đến phần tử thứ 3 (index = 2) |
| :not(selector) | $("div:not(.lop)") |
Tất cả phần tử <div> không có class="lop" |
| :header | $(":header") |
Tất cả phần tử header <h1>, <h2> ... |
| :animated | $(":animated") |
Tất cả phần tử đang có hiệu ứng animated |
| :focus | $(":focus") |
Phần tử đang được focus |
| :contains(text) | $(":contains('Hello')") |
Tất cả phần tử có chứa từ "Hello" |
| :has(selector) | $("div:has(p)") |
Tất cả phần tử <div> mà trong đó chỉ cần chứa 1 phần tử <p> là phần tử con |
| :empty | $(":empty") |
Tất cả những phần tử empty |
| :parent | $(":parent") |
Tất cả phần tử là cha mẹ của một phần tử khác |
| :hidden | $("p:hidden") |
Tất cả phần tử <p> bị ẩn (có style Css display: none;) |
| :visible | $("table:visible") |
Tất cả table đang hiẻn thị |
| :root | $(":root") |
Phần tử gốc của tài liệu |
| :lang(language) | $("p:lang(de)") |
Tất cả phần tử <p> có thuộc tính lang="de" |
| [attribute] | $("[href]") |
Tất cả những phần tử có thuộc tính href |
| [attribute=value] | $("[href='default.htm']") |
Tất cả phần tử có thuộc tính href là "default.htm" |
| [attribute!=value] | $("[href!='default.htm']") |
Tất cả phần tử có thuộc tính href không là "default.htm" |
| [attribute$=value] | $("[href$='.jpg']") |
Tất cả phần tử có thuộc tính href có giá trị đuôi là .jpg |
| [attribute|=value] | $("[title|='Tomorrow']") |
Tất cả phần tử có giá trị thuộc tính title='Tomorrow' hoặc bắt đầu
với 'Tomorrow' theo sau là dấu gạch nối title='Tomorrow-' |
| [attribute^=value] | $("[title^='Tom']") |
Tất cả phần tử có giá trị thuộc tính title bắt đầu bằng "Tom" title="Tom And Jerry", title="TomJack" |
| [attribute~=value] | $("[title~='hello']") |
Tất cả phần tử có giá trị thuộc tính chứa từ cụ thể "hello" title="hello", title="hello xinchao" |
| [attribute*=value] | $("[title*='hello']") |
Tất cả phần tử có giá trị thuộc tính chứa từ "hello" title="hello", title="helloxinchao" |
| :input | $(":input") |
Tất cả phần tử input |
| :text | $(":text") |
Tất cả phần tử input có type="text" |
| :password | $(":password") |
Tất cả phần tử input có type="password" |
| :radio | $(":radio") |
Tất cả phần tử input có type="radio" |
| :checkbox | $(":checkbox") |
Tất cả phần tử input có type="checkbox" |
| :submit | $(":submit") |
Tất cả phần tử input có type="submit" |
| :reset | $(":reset") |
Tất cả phần tử input có type="reset" |
| :button | $(":button") |
Tất cả phần tử input có type="button" |
| :image | $(":image") |
Tất cả phần tử input có type="image" |
| :file | $(":file") |
Tất cả phần tử input có type="file" |
| :enabled | $(":enabled") |
Tất cả phần tử input có trạng thái enabled |
| :disabled | $(":disabled") |
Tất cả phần tử input có trạng thái disabled |
| :selected | $(":selected") |
Tất cả các phần tử có trạng thái selected |
| :checked | $(":checked") |
Tất cả các phần tử có trạng thái checked (checkbox) |
