03/08/2018, 10:06

jQuery Selectors - Basic Filter

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 ...

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.

Cú pháp Ý nghĩa
$( "selector:animated" ) Tìm thẻ HTML đang có hiệu ứng animate, nghĩa là tại thời điểm selector kích hoạt nếu thẻ HTML đang chạy hiệu ứng animate thì sẽ được chọn. DEMO
$( "selector:eq( index )" ) Tìm thẻ HTML có số thứ tự là index trong kết quả trả về. Ví dụ nếu kết quả selector trả về gồm 10 phần tử và index là số  2 thì kết quả sẽ lấy phần tử thứ hai trong 10 phần tử đó. DEMO
$( "selector:even" ) Tìm thẻ HTML đứng vị trí số lẽ trong kết quả trả về của selector. DEMO
$( "selector:odd" ) Tìm thẻ HTML đứng vị trí số chẵn trong kết quả trả về của selector. DEMO
$( "selector:first" ) Tìm thẻ HTML đứng vị trí đầu tiên trong kết quả trả về của selector. DEMO
$( "selector:focus" ) Tìm thẻ HTML đang focus, nghĩa là con trỏ đang thao tác tại thẻ đó. DEMO
$( "selector:gt( index )" ) Tìm thẻ HTML có số thứ tự lớn hơn số index trong kết quả trả về của selector. DEMO
$( "selector:header" ) Tìm thẻ HTML là header (h1, h2, h3, h4, h5, h6). DEMO
$( "selector:lang( value )" ) Tìm thẻ HTML có thuộc tính lang và giá trị của nó bằng với value. DEMO
$( "selector:last" ) Tìm thẻ HTML đứng vị trí cuối cùng trong kết quả trả về của selector. DEMO
$( "selector:lt( index )" ) Tìm thẻ HTML có số thứ tự bé hơn số index trong kết quả trả về của selector. DEMO
$( "selector:not( filter )" ) Tìm thẻ HTML co đặc điểm không giống với filter trong kết quả trả về của selector. DEMO
$( "selector:root" ) Tìm thẻ HTML là có cấp cao nhất trong kết quả trả về. DEMO

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.

Demo RUN
$("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.

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

:even Selector

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

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

:first Selector

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

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

:focus Selector

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

Demo RUN
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.

Demo RUN
$("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.

Demo RUN
$(":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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

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

:odd Selector

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

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

:root Selector

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

Demo RUN
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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Giới thiệu sơ lược về jQuery Selectors

Như các bạn đã biết, CSS3 giới thiệu những tính năng selectors cho phép chúng ta lựa chọn nhiều phần tử cụ thể trong HTML, tuy nhiên CSS selectors lại không được hỗ trợ nhiều trên các trình duyệt khác nhau. jQuery cũng có bộ selectors riêng và bộ này sẽ là cách thay thế cho những gì mà CSS3 không ...

Trần Trung Dũng viết 3 tuần trước

Viết custom selectors trong JQuery

JQuery rất mạnh trong việc hỗ trợ chúng ta lấy được các element bằng cách dùng cú pháp selector và filter. Chúng ta có thể lấy được các element theo id, class, theo tag hoặc lọc theo nội dung, thuộc tính …. Ví dụ: – $(‘p’): lấy tất cả thẻ p – $(‘#abc’): lấy ...

Hoàng Hải Đăng viết 3 tuần trước

Bài 03: jQuery Selectors

jQuery Selectors là gì? jQuery Selectors là một trong những phần quan trọng nhất của thư viện jQuery. jQuery Selectors được dùng để chọn các phần tử HTML mà bạn muốn thao tác dựa trên id, class, thuộc tính, giá trị thuộc tính, quan hệ giữa các phần tử.... Cú pháp Để chọn một phần tử ...

Bùi Văn Nam viết 10:47 ngày 18/08/2018

jQuery Selectors - Attributes

Ở bài trước chúng ta đã được tìm hiểu về Selector trong jQuery và mình cũng có giới thiệu sơ lược cách truy vấn theo ID và Class rồi, nhưng thực ...

Hoàng Hải Đăng viết 10:12 ngày 03/08/2018

jQuery Selectors - Child Filter

Child Filter Selector cũng có chức năng giống như Basic Filter nhưng jQuery nó chia làm hai nhóm để chúng ta dễ học và dễ tìm kiếm hơn. Nhóm ...

Hoàng Hải Đăng viết 10:12 ngày 03/08/2018
0