jQuery selector là gì?

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.

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ẻ h1 có id="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.

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

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.

$( "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ử đó.

$( "selector:even" )

Tìm thẻ HTML đứng vị trí số lẽ trong kết quả trả về của selector.

$( "selector:odd" )

Tìm thẻ HTML đứng vị trí số chẵn trong kết quả trả về của selector.

$( "selector:first" )

Tìm thẻ HTML đứng vị trí đầu tiên trong kết quả trả về của selector.

$( "selector:focus" )

Tìm thẻ HTML đang focus, nghĩa là con trỏ đang thao tác tại thẻ đó.

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

$( "selector:header" )

Tìm thẻ HTML là header (h1, h2, h3, h4, h5, h6).

$( "selector:lang( value )" )

Tìm thẻ HTML có thuộc tính lang và giá trị của nó bằng với value.

$( "selector:last" )

Tìm thẻ HTML đứng vị trí cuối cùng trong kết quả trả về của selector.

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

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

$( "selector:root" )

Tìm thẻ HTML là có cấp cao nhất trong kết quả trả về.

Nhóm jQuery Child Filter Selector

Cú pháp
Ý nghĩa

$("selector:first-child")

Lấy thẻ con đầu tiên của thẻ cha.

$("selector:first-of-type")

Chọn thẻ HTML con đầu tiên theo tag name.

$("selector:last-child")

Lấy thẻ con cuối cùng của thẻ cha.

$("selector:last-of-type")

Chọn thẻ HTML con cuối cùng theo tag name.

$("selector:nth-child( index )")

Chọn thẻ HTML con thứ index.

$("selector:nth-last-child( index )")

Chọn thẻ HTML con thứ index tính từ dưới lên.

$("selector:nth-last-of-type( index )")

Chọn thẻ HTML con thứ index tính từ dưới lên theo tag name.

$("selector:nth-of-type( index )")

Chọn thẻ HTML con thứ index tính từ trên xuống theo tag name.

$("selector:only-child")

Chọn thẻ HTML là con duy nhất của thẻ cha.

$("selector:only-of-type")

Chọn thẻ HTML là con duy nhất của thẻ cha theo tag name.

Đố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, ...

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.

$( "selector:empty" )

Lấy thẻ HTML có nội dung rỗng.

$( "selector:has(element)" )

Lấy thẻ HTML mà nội dung bên trong có chứa thẻ element.

$( "selector:parent" )

Lấy thẻ cha đầu tiên của những thẻ không rỗng.

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();

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" và 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

PreviousjQuery là gì? Cách viết jQuery cho người mới bắt đầuNextSự kiện trong jQuery

Last updated