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.

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:

Bài viết này được đăng tại [free tuts .net]

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

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.

$('*').addClass('selected');

$('.freetuts').addClass('selected');

$('a').addClass('selected');

$('#freetuts').addClass('selected');

$('#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.

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.

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

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:

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.

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

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.

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

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

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

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

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

$('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ì.

$('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 title là freetuts.

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

$("#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:

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