Bên cạnh các bộ lọc đã được phân loại trên, jQuery còn hỗ trợ nhiều bộ lọc khác rất hữu ích như bảng sau:

Selector Mô tả
:animated Chọn các phần tử đang có hiệu ứng động.
:header Chọn một trong các phần tử từ h1 đến h6.
:hidden Chọn các phần tử đang ẩn.
:lang(language) Chọn các phần tử ở một ngôn ngữ nào đó.
:not(selector) Phủ định một selector.
:root Chọn phần tử gốc của tài liệu.
:target Chọn phần tử đích được chỉ ra bởi URI của tài liệu.
:visible Chọn các phần tử có thể nhìn thấy.

Ví dụ 1: cho đoạn mã HTML sau:

<button class="btn1">Thay đổi màu hiệu ứng động</button>
<div style="background:blue;">Div 1</div>
<div style="background:green;">Div 2</div>
<div style="background:yellow;">Div 3</div>

Tập tin MyjQuery.js chứa đoạn mã sau:

function aniDiv(){
   // dùng phương thức animate tạo hiệu ứng động cho Div 1
   $("div:eq(0)").animate({width: "50%"}, "slow");
   $("div:eq(0)").animate({width: "100%"}, "slow", aniDiv);
}
aniDiv();
$(".btn1").click(function(){
   // thay đổi màu khi nhấn button bằng :animated
   $(":animated").css("background-color", "red");
});

Kết quả

Ví dụ 2: cho đoạn mã HTML sau:

<h1> tiêu đề cấp 1 </h1>
<h2> tiêu đề cấp 2 </h2>
<h3> tiêu đề cấp 3 </h3>
<p> Đoạn văn bản thứ nhất </p>
<p> Đoạn văn bản thứ hai </p>

Tập tin MyjQuery.js chứa đoạn mã sau:

$(":header").css("background-color", "yellow");

Kết quả

Ví dụ 3: cho đoạn mã HTML sau:


<p>Đoạn văn bản thứ nhất.</p>

<p>Đoạn văn bản thứ hai.</p>

<p style="display:none;">Đoạn văn bản ẩn.</p>

<div style="display:none;">Phần tử div ẩn.</div>

Tập tin MyjQuery.js dùng phương thức show() để hiển thị các phần tử bị ẩn:


$(":hidden").show(2000);

Kết quả

Ví dụ 4: cho đoạn mã HTML sau:


<p>Tôi là người Việt Nam.</p>

<p lang="vi">Xin chào!</p>

Tập tin MyjQuery.js với đoạn mã chọn phần tử có thuộc tính lang (chỉ ngôn ngữ):

$("p:lang(vi)").css("background-color", "yellow");

Kết quả

Ví dụ 5: cho đoạn mã HTML sau:

<p>Đoạn văn bản thứ nhất.</p>
<p>Đoạn văn bản thứ hai.</p>
<p class="intro"> Đoạn văn bản thứ ba.</p>

Tập tin MyjQuery.js với đoạn mã chọn tất cả phần tử p ngoại trừ phần tử p có class là intro:

$("p:not(.intro)").css("background-color", "yellow");

Kết quả

Ví dụ 6: đoạn mã jQuery sau sẽ gán màu nền của trang là màu vàng

$(":root").css("background-color", "yellow");

Kết quả

Ví dụ 7: cho đoạn mã HTML sau:

<p>Đoạn văn bản thứ nhất.</p>
<p>Đoạn văn bản thứ hai.</p>
<p style="display:none;">Đoạn văn bản ẩn.</p>

Tập tin MyjQuery.js với đoạn mã chọn tất cả phần tử p ngoại trừ phần tử p bị ẩn:

$("p:visible").css("background-color", "yellow");

Kết quả

< Học jQuery