BASIC
EFFECTS
DOM
ADVANCED
JQUERY CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về selector trong jQuery, qua đó bạn sẽ hiểu khái niệm selector là gì? Cách sử dụng jQuery selector như thế nào?

Chắc hẳn bạn đã nghe qua CSS selector rồi phải không nào? Thực ra jQuery cũng vậy, nó sử dụng cú pháp của CSS để truy vấn đến các đối tượng DOM trong file HTML. Ngoài ra, jQuery hỗ trợ thêm một số cú pháp riêng giúp bạn sàn lọc các thẻ HTML một cách dễ dàng hơn.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. jQuery selector là gì?

jQuery selector là một module cho phép chọn các phần tử HTML thông qua cơ chế DOM của Javascript. Hay nói cách khác, jQuery selector được dùng để chọn một hoặc nhiều phần tử HTML. Khi một phần tử được chọn thì chúng ta có thể thực hiện các thao tác trên phần tử đó, bởi vì bản thân các phần tử đó là một DOM node.

Để các bạn dễ hiểu thì mình có một ví dụ như sau: Giả sử mình có một đoạn mã HTML như bên dưới:

<div id="container">
    <h1 id="title"></h1>
    <p class="description">

    </p>
</div>

Yêu cầu hãy truy vấn đến thẻ h1id="title".

Nếu sử dụng Javascript thì ta sẽ làm như sau:

var h1 = document.getElementById('title');

Nhưng nếu sử dụng jQuery thì đơn giản hơn nhiều:

var h1 = $('#title');

Như vậy, cú pháp selector của jQuery rất giống với CSS selector.

var element = $('CSS_SELECTOR');

Một ví dụ khác: Tìm tất cả các thẻ HTML có class="desc".

var elements = $('.desc');

jQuery selector được chia thành nhiều nhóm khác nhau, mỗi nhóm sẽ có những tính chất chung giúp cho việc học dễ dàng hơn.

2. Nhóm jQuery selector thông dụng nhất

Đây là những selector được sử dụng thường xuyên nhất, bằng cách thông qua ID, class, tagname, và các thuộc tính của thẻ HTML.

Dưới đây là danh sách tất cả những selector được sử dụng thường xuyên nhất.

STT Cú pháp Ý nghĩa
1 $('*') Chọn tất cả các thẻ HTML
2 $('.class-name') Chọn thẻ HTML có class class-name
3 $('element') Chọn tất cả thẻ có tên là element, ví dụ $('a') tức là chọn tất cả thẻ a
4 $('#id-name') Chọn thẻ có id là id-name
5 $('#id-name, .class-name') Chọn thẻ có id là id-name hoặc có class là class-name. Đây là truy vấn dựa vào nhiều dâu hiệu cách nhau bởi dấu phẩy
All Selector (“*”) RUN
$('*').addClass('selected');
Class Selector (“.class”) RUN
$('.freetuts').addClass('selected');
Element Selector (“element”) RUN
$('a').addClass('selected');
ID Selector (“#id”) RUN
$('#freetuts').addClass('selected');
Multiple Selector RUN
$('#freetuts, .freetuts').addClass('selected');

3. Nhóm jQuery Basic Filter Selector

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. Nhưng bạn muốn lọc tiếp với điều kiện 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 )" ).

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

4. Nhóm jQuery Child Filter Selector

Child Filter selector có chức năng giống như Basic Filter. Nhóm Child Filter liên quan đến vấn đề lọc các thẻ con của thẻ cha. Điều này cũng tương tự như một số filters mà mình đã nói ở trên.

Sau đây là danh sách các Child Filter trong jQuery mà chúng ta nên biết.

Cú pháp Ý nghĩa
$("selector:first-child") Lấy thẻ con đầu tiên của thẻ cha. DEMO
$("selector:first-of-type") Chọn thẻ HTML con đầu tiên theo tag name. DEMO
$("selector:last-child") Lấy thẻ con cuối cùng của thẻ cha. DEMO
$("selector:last-of-type") Chọn thẻ HTML con cuối cùng theo tag name. DEMO
$("selector:nth-child( index )") Chọn thẻ HTML con thứ index. DEMO
$("selector:nth-last-child( index )") Chọn thẻ HTML con thứ index tính từ dưới lên. DEMO
$("selector:nth-last-of-type( index )") Chọn thẻ HTML con thứ index tính từ dưới lên theo tag name. DEMO
$("selector:nth-of-type( index )") Chọn thẻ HTML con thứ index tính từ trên xuống theo tag name. DEMO
$("selector:only-child") Chọn thẻ HTML là con duy nhất của thẻ cha. DEMO
$("selector:only-of-type") Chọn thẻ HTML là con duy nhất của thẻ cha theo tag name. DEMO

Đối với các selector có truyền giá trị index thì ngoài việc truyền số vào thì bạn có thể truyền theo công thức dưới đây:

  • even: Tìm theo số lẻ
  • odd: Tìm theo số chẵn
  • 2n+1: Các số 1, 3, 5, 7, ...
  • 3n + 1: Các số 1, 4, 7, ...
  • 3n: Các số 3, 6, 9, ...
  • ...

5. Nhóm jQuery content filter selector

Content filter là nhóm các selector dùng để xử lý nội dung bên trong thẻ HTML. Ví dụ bạn muốn tìm thẻ HTML nào có nội dung rỗng thì chỉ cần sử dụng cú pháp :empty.

Có tổng cộng 4 loại Content Filter.

Cú pháp Ý nghĩa
$( "selector:contains('value')" ) Lấy thẻ HTML mà nội dung có chứa giá trị value. DEMO
$( "selector:empty" ) Lấy thẻ HTML có nội dung rỗng. DEMO
$( "selector:has(element)" ) Lấy thẻ HTML mà nội dung bên trong có chứa thẻ element. DEMO
$( "selector:parent" ) Lấy thẻ cha đầu tiên của những thẻ không rỗng. DEMO

6. Nhóm jQuery form filter selector

Có tổng cộng 15 form selector. Vì có quá nhiều nên mình sẽ giải thích ngắn gọn và đưa ra một ví dụ tổng hợp để các bạn dễ hiểu hơn.

Danh sách 15 loại Form Selector trong jQuery:

Cú pháp Ý nghĩa
$(':button') Lấy tất cả các thẻ HTML có type là button hoặc thẻ button
$(':checkbox') Lấy tất cả các thẻ HTML có type là checkbox
$(':checked') Lấy tất cả các thẻ HTML có trạng thái là checked hoặc selected
$(':disabled') Lấy tất cả các thẻ HTML có trạng thái là disabled
$(':enabled') Lấy tất cả các thẻ HTML có trạng thái là enabled
$(':file') Lấy tất cả các thẻ HTML có type là file
$(':focus') Lấy thẻ HTML đang được focus (con trỏ chuột đang nằm tại đó)
$(':image') Lấy tất cả các thẻ HTML có type là image
$(':input') Lấy tất cả các thẻ HTML input, textarea, select, button
$(':password') Lấy tất cả các thẻ HTML có type là password
$(':radio') Lấy tất cả các thẻ HTML có type là radio
$(':reset') Lấy tất cả các thẻ HTML có type là reset
$(':selected') Lấy tất cả các thẻ HTML có trạng thái selected (thẻ option)
$(':submit') Lấy tất cả các thẻ HTML có type là submit
$(':text') Lấy tất cả các thẻ HTML có type là text

Với 15 loại form filter này thì bạn có thể sàn lọc rất dễ dàng, nhất là kết hợp với các selector thông thường. Ví dụ bạn muốn lấy thẻ input có class là username thì sử dụng đoạn code sau:

var username_element = $(':input.username')

Hoặc bạn muốn lấy danh sách các checkbox đã được checked và lấy giá trị của chúng thì mình kết hợp với vòng lặp.

var checkbox = $(':checked');
for (var i = 0; i < checkbox.length; i++){
    document.write('Giá trị là' +$(checkbox[i]).val()+ ' <br/>');
}

Để dễ hơn nữa thì mỗi ô input chúng ta nên đặt cho chúng một ID duy nhất:

var username = $('#username').val();
var password = $('#password').val();

Một ví dụ khác về form filter trong jQuery: Thiết lập border có màu sắc khác nhau cho một số thẻ HTML.

Demo RUN
$(':text').css('border', 'solid 2px red');
$(':password').css('border', 'solid 2px blue');
$(':file').css('border', 'solid 2px pink');
$(':selected').parent().css('border', 'solid 2px green');
$(':submit').css('border', 'solid 2px black');
$(':button').css('border', 'solid 2px yellow');

7. Nhóm jQuery attribute selector

Attribute selector là sàn lọc dựa vào tên thuộc tính và giá trị của thuộc tính.

Nếu bạn chưa hiểu thuộc tính của cách thẻ HTML là gì thì bạn xem ví dụ dưới đây:

<input type="text" name="username" value="TheHalfHeart"/>

Trong thẻ input này thì type="text", name="username"value="TheHalfHeart" chính là các thuộc tính của thẻ input.

Và sau đây là danh sách các selector theo thuộc tính trong jQuery.

STT Cú pháp Ý nghĩa
1 $('[title|="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title phải bắt đầu bằng chuỗi value
2 $('[title*="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title tồn tại chuỗi value
3 $('[title~="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title phải xuất hiện chữ value
4 $('[title$="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title kết thúc bằng chuỗi value
5 $('[title="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title phải bằng value
6 $('[title!="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title phải khác value
7 $('[title]') Tìm thẻ HTML chỉ cần có thuộc tính title là được

Ví dụ: Thêm class selected vào thẻ a có thuộc tính title và giá trị của title thõa mãn các điều kiện dưới đây.

Bắt đầu bằng chữ freetuts:

Bất cứ giá trị nào bắt đầu bằng chữ freetuts là được. Ví dụ từ freetuts-ads, freetutsads đều được.

Demo RUN
$('a[title|="freetuts"]').addClass('selected');

Chỉ cần xuất hiện chữ freetuts:

Chỉ cần tồn tại chữ freetuts trong title là được. Ví dụ từ i-love-freetuts, my-blog-freetuts-dot-net đều được.

Demo RUN
$('a[title*="freetuts"]').addClass('selected');

Xuất hiện từ freetuts:

Từc là phải cách nhau bằng khoảng trắng, kể cả từ freetuts-demo cũng không được vì từ đó có thêm chữ -demo.

Demo RUN
$('a[title~="freetuts"]').addClass('selected');

Chuỗi ký tự cuối cùng là freetuts:

Ví dụ chuỗi i-love-freetuts hoặc demofreetuts đều được vì nó có chuỗi cuối cùng là freetuts.

Demo RUN
$('a[title$="freetuts"]').addClass('selected');

Giá trị đúng bằng freetuts:

Đây là so sánh bằng, nghĩa là giá trị bắt buộc phải là freetuts.

Demo RUN
$('a[title="freetuts"]').addClass('selected');

Giá trị không bằng freetuts:

Đây là so sánh không bằng, nghĩa là giá trị khác freetuts là được. Ví dụ freetuts-ads hoặc ilovefreetuts.

Demo RUN
$('a[title!="freetuts"]').addClass('selected');

Chỉ cần có thuộc tính title:

Chỉ cần xuất hiện thuộc tính title trong thẻ HTML là được, không quan trọng giá trị của nó là gì.

Demo RUN
$('a[title]').addClass('selected');

Trường hợp bạn muốn tìm theo nhiều thuộc tính và nhiều điều kiện khác nhau thì hãy bổ sung thêm trong selector.

Ví dụ: Tìm thẻ a có thuộc tính name và có thuộc tính title và giá trị của titlefreetuts.

Demo RUN
$('a[name][title="freetuts"]').addClass('selected');

8. Các selector khác

Ngoài 5 nhóm trên thì chúng ta còn một số loại selector cũng khá thông dụng.

Parent > Child Selector

Trong CSS, đây là cú pháp dùng để chọn tất cả các thẻ con là cấp con đầu tiên của thẻ cha. Vậy thì trong jQuery cũng có tác dụng tương tự.

Ví dụ: Thêm class active cho tất cả các thẻ li nằm bên trong thẻ có id là contain. Lưu ý là chỉ thêm vào thẻ li cấp con đầu tiên.

Demo RUN
$("#contain > li").addClass('active');

Chạy ví dụ lên bạn sẽ thấy chỉ có thẻ li cấp đầu tiên là có tác dụng.

Nested Selector

Selector trong CSS hoạt động theo nguyên tắc phân cấp (nested), điều này cũng có thể sử dụng trong jQuery.

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

<ul id="contain">
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Nested item 1</li>
            <li>Nested item 2</li>
            <li>Nested item 3</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>

Hãy thêm class active vào ba thẻ sau:

<li>Nested item 1</li>
<li>Nested item 2</li>
<li>Nested item 3</li>

Để làm được điều này thì ta sử dụng truy vấn selector trong CSS:

Demo RUN
$("#contain li ul li").addClass('active');

:hidden Selector

Chọn tất cả các thẻ HTML đang ở trạng thái hidden.

Ví dụ: Chọn và hiển thị tất cả các the div đang bị ẩn

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

:visible Selector

Chọn tất cả các thẻ HTML đang ở trạng thái hiển thị.

Ví dụ: Chọn và ẩn tất cả các thẻ có chứa class active và đang ở trạng thái visible.

$(".active:visible").hide();

9. Lời kết

Như vậy là mình đã giới thiệu xong tất cả các kiến thức liên quan đến jQuery selector. Bài này tương đối dài vì mình tổng hợp khá đầy đủ. Để dễ học thì mỗi selector bạn nên xem kỹ phần demo, thay đổi code và chạy xem có gì khác biệt.

Selector rất quan trọng trong jQuery, bạn cần phải nắm bắt thật kỹ để sau này dễ dàng học các kiến thức nâng cao hơn.

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Top