jQuery Selectors - Basic Filter - jQuery căn bản

Selector Filter tức là lọc các thẻ HTML dựa vào một điều kiện lọc. Ví dụ bạn sử dụng cú pháp $('a') để lấy danh sách tất cả các thẻ a và đương nhiên nó sẽ trả về một mảng chứa các thẻ a. Tuy nhiên bạn muốn lọc tiếp là chỉ lấy thẻ a thứ hai nằm trong danh sách đó thì bạn sẽ sử dụng bộ lọc  $( "selector:eq( index )" ) mà jQuery đã hỗ trợ. Và trong bài này mình sẽ giới thiệu một số bộ lọc Filter căn bản hay sử dụng nhất.

1. Danh sách các jQuery Basic Filter

Sau đây là danh sách các Selector Basic Filter thường dùng trong jQuery.

2. Ví dụ về jQuery Basic Filter 

Sau đây là các ví dụ để các bạn thực hành.

:animated Selector

Thêm class colored vào the div đang có hiệu ứng animate.

$("div:animated").addClass("colored");

:eq Selector

Thêm color red vào thẻ td có vị trí số 2. Tuy nhiên vì phần tử bắt đầu bằng 0 nên vị trí số hai chính là phần tử thứ 3 trong danh sách.

$("td:eq( 2 )").css("color", "red");

:even Selector

Thêm background màu xám cho row lẻ trong table.

$("tr:even").css("background-color", "gray");

:first Selector

Thêm màu xanh cho row đầu tiên trong table

$("tr:first").css("color", "blue");

:focus Selector

Lấy giá trị của các ô input khi được focus.

alert($('input:focus').val());

:gt Selector

Thiết lập background màu đỏ cho các ô thứ 4 trở đi trong table (tức kể tử ô thứ 5).

Vì số thứ tự đánh dấu từ số 0 nên ô thứ 4 sẽ có số thứ tự là 3.

$("td:gt(3)").css("background", "yellow");

:header Selector

Thiết lập background màu xám cho tất cả các thẻ từ h1 -> h6.

$(":header").css('background', 'red');

:lang Selector

Thiết lập background màu đỏ cho thẻ có lang là tiếng Anh và màu vàng cho thẻ có lang là tiếng Việt.

$("div:lang(en-us)").css('background', 'red');
$("div:lang(vi-vn)").css('background', 'yellow');

:last Selector

Thiết lập chữ màu đỏ cho ô cuối cùng trong table.

$("tr td:last").css('color', 'red');

:lt Selector

Thiết lập chữ màu vàng cho ô thứ nhất đến thứ 3 trong table.

Vì số thứ tự bắt đầu tư 0 nên ô thứ nhất đên thú ba sẽ là 0 - 2, vì vậy số ta chọn sẽ là số 3.

$("td:lt(3)").css("color", "yellow");

:not Selector

Thiết lập chữ vàng cho các thẻ span không chứa class active.

$("span:not(.active)").css("color", "yellow");

:odd Selector

Thiết lập nền đỏ cho ô chẵn trong table.

$("tr:odd").css("background-color", "red");

:root Selector

In ra thẻ cha cao nhất của tài liệu HTML.

document.write($(":root").prop('tagName'));

3. Lời kết

Trên là danh sách tất cả các Basic Filter Selector trong jQuery, hy vọng qua các ví dụ trong bài này bạn sẽ vận dụng được vào thực tế. Tuy nhiên khi đọc bài này bạn không cần phải học thuộc hết mà hãy đọc qua rồi thực hành theo và hiểu là được, khi nào cần thì quay lại bài này để xem.