demo : https://www.lenlop123.com/2020/09/12-jquery-selector-txtname-txtvalue.html

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<style>
    .colorred {
        color: red;
    }

    .colorblue {
        color: blue;
        margin-left: 10px;
    }

    .colorgreen {
        color: green;
        margin-left: 50px;
    }
</style>

<h1>h1</h1>

<input type="text" id="txt_name" value="" /> <br />
<input type="text" class="txt_value" value="" /> <br />
<input type="radio" id="ra_choose" class="ra_choose1" value="123" /><labe class="la_country">vn</labe> <br />
<input type="radio" id="ra_choose" class="ra_choose2" value="456" /> <label class="la_country">us</label><br />
<input type="button" id="but_alert" value="Alert" />

<script>

    // Giống onload html
    $(document).ready(function () {

        $('#but_alert').click(function () {
            // $('*') Chọn tất cả các thẻ HTML
            $('*').addClass('colorred');

            // $('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
            $('h1').addClass('colorred');

            // $('.class-name') Chọn thẻ HTML có class class-name
            $('.txt_value').addClass('.colorred');
            console.log("name :" + $('.txt_value').val());
           
            // $('#id-name') Chọn thẻ có id là id-name
            $('#txt_name').addClass('colorred');
            console.log("name :" + $('#txt_name').val());

            // $('#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
            $('#ra_choose, .ra_choose1').addClass('colorblue');
            $('#ra_choose, .ra_choose2').addClass('colorgreen');

            // $( "selector:eq( index )" ) Tìm thẻ HTML có số thứ tự là index trong kết quả trả về.  
            // $( "selector:gt( index )" ) $( "selector:lt( index )" )
            $('.la_country:eq(1)').addClass('colorblue');

            // $( "selector:first" ), $( "selector:last" ), $( "selector:even" ), $( "selector:odd" ),

            // $( "selector:focus" ) Tìm thẻ HTML đang focus, nghĩa là con trỏ đang thao tác tại thẻ đó.

            // $( "selector:header" ) Tìm thẻ HTML là header (h1, h2, h3, h4, h5, h6)
            // $( "selector:animated" ) Tìm thẻ HTML đang có hiệu ứng animate tại thời điểm kích hoạt
            // $( "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: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ề.
        });



    });



</script>


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:

1
2
3
4
5
6
<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:

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

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

1
var h1 = $('#title');

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

1
var element = $('CSS_SELECTOR');

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

1
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 IDclasstagname, 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.

STTCú 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

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

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

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

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:

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

1
2
3
4
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:

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

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

1
2
3
4
5
6
$(':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:

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

STTCú 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-adsfreetutsads đều được.

1
$('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-freetutsmy-blog-freetuts-dot-net đều được.

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
<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:

1
2
3
<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:

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

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

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