Chuyên mục
Java - JQuery

JQuery selector với các thuộc tính của thẻ

Hãy tận dụng hỗ trợ đa dạng của JQuery selector với các thuộc tính của thẻ để xử lý hiển thị client đơn giản.

JQuery đã quá quen thuộc với bạn thiết kế web, chúng ta thường xuyên sử tác động đến một thẻ HTML nào đó qua ID hoặc thuộc tính class của nó. Thỉnh thoảng điều này không còn chính xác bởi không có ID hoặc trùng lắp class / css. Hãy tận dụng hỗ trợ đa dạng của JQuery selector.

JQuery selector kết hợp nhiều thuộc tính của thẻ
JQuery selector kết hợp nhiều thuộc tính của thẻ

Việc sử dụng một hoặc nhiều thuộc tính của thẻ bắt đầu cần thiết. Thậm chí, chúng ta có thể cần sử dụng cả việc loại trừ thuộc tính. Các trường hợp có thể ít gặp phải nhưng thật sự quan trọng.

Gọi một thẻ với một attribute bất kỳ

Cú pháp chung: $(‘tagname[attributename=”value”]’)

Chắc chắn các bạn đã từng thực hiện các dòng code JQuery này rồi:

<a href="#" rel="cat">Categories</a><br>
<a href="#" rel="tag">Tags</a>
<div class="result-msg"></div>

<script>
    jQuery(document).ready(function($){
        $('a[rel="cat"]').on('click', function() {
            var $catHtml = $( this ).html();
            $('.result-msg').html( $catHtml );
        });
        
        $('a[rel="tag"]').on('click', function() {
            var $tagHtml = $( this ).html();
            $('.result-msg').html( $tagHtml );
        });
    });
</script>

Tác động đến thẻ bằng nhiều thuộc tính cùng lúc

Cú pháp chung: tagname[attr1=”value1″][attr2=”value2″]

<input type="text" aria-label="search-product" class="search" data-id="1" />

<script>
    jQuery(document).ready(function($){
        $('input[type="text"][aria-label="search-product"][data-id="1"]').val('Nhập từ khóa tìm kiếm');
    });
</script>

JQuery selector kết hợp tên CSS với nhiều thuộc tính khác

Cú pháp: .classname[attr1=”value1″][attr2=”value2″]

Ví dụ sau đây sẽ click vào button có data-id=”100″

<button aria-label="search-product" class="my-button" data-id="100" />

<script>
    jQuery(document).ready(function($){
        $('.my-button[aria-label="search-product"][data-id="100"]').click();
    });
</script>

Select thẻ mà thuộc tính không chứa 1 chuỗi

không bao gồm hoặc loại trừ thẻ với giá trị của thuộc tính. Cú pháp: :not([attr=”value”])

Ví dụ sau đây sẽ chọn những thẻ <a mà không chứa ký tự # trong href, sau đó thêm class “actived”


<a aria-label="menu" class="link" href="#"> Item 1</a><br>
<a aria-label="menu" class="link" href="#"> Item 2</a><br>
<a aria-label="menu" class="link" href="https://vnlink.org"> Item 3</a>

<script>
    jQuery(document).ready(function($){
        $( 'a[class="link"][aria-label="menu"]:not([href="#"])' ).addClass( 'actived' );
    });
</script>

Kết hợp thuộc tính thẻ khác nhau

Đến đây, chúng ta có thể kết hợp nhiều thuộc tính thẻ lại với, bao gồm cả cú pháp loại trừ giá trị một thuộc tính


<a aria-label="menu" class="link" href="#" title="Item 1"> Item 1</a><br>
<a aria-label="menu" class="link" href="#" title="Item 2"> Item 2</a><br>
<a aria-label="menu" class="link disabled" href="https://vnlink.org" title="Item 3"> Item 3</a>
<a aria-label="menu" class="link" href="https://vnlink.org"  title="Cat 1"> Cat 1</a>

<script>
    jQuery(document).ready(function($){
        $( 'a[class="link"][aria-label="menu"]:not([class*="disabled"]):not([href="#"])' ).addClass( 'actived' );
    });
</script>

Lưu ý: dấu * trong :not([class*=”disabled”]), có nghĩa là có chứa “disabled” và có thể có giá trị khác. Nếu không có *, thì có nghĩa là class bằng đúng giá trị “disabled”.

Lời kết

JQuery cung cấp nhiều tiện ích rất đáng để sử dụng, đặc biệt JQuery selector giúp chúng ta xử lý nhanh phần hiển thị client.

Các ví dụ trên đây chưa phải là những trường hợp phức tạp nhất, bạn có thể tham khảo thêm sự hỗ trợ đa dạng của JQuery https://api.jquery.com/

Trả lời