JS - Attribute Selector

by My Love

26/04/2019, 8:33 AM   |    26/04/2019, 9:08 AM   |    697   |    0

      Nhóm Attribute Selector giúp lấy các thẻ thông qua thuộc tính và giá trị thuộc tính của các thẻ HTML đó. Có 9 cách lấy Attribute Selector ta tìm hiểu ở bảng dưới đây.
Danh sách Attribute Selector trong jQuery
Cú pháp Ý nghĩa
$('[name|="value"]') Lấy các thẻ có thuộc tính name và giá trị của name phải bằng chuỗi value hoặc theo sau là dấu gạch ngang (-)
$('[name*="value"]') Lấy các thẻ có thuộc tính name và giá trị của name có tồn tại chuỗi value
Ví dụ :Cho 2 thẻ có thuộc tính lần lượt là name="chelseafc" và name="chelsea champion"
$('[name*="chelsea"]') sẽ lấy được cả hai thẻ này
$('[name~="value"]') Lấy các thẻ có thuộc tính name và giá trị của name có tồn tại một từ value riêng biệt.
Ví dụ :Cho 2 thẻ có thuộc tính lần lượt là name="chelseafc" và name="chelsea champion"
$('[name~="chelsea"]') sẽ lấy được thẻ thứ 2 mà không lấy được thẻ đầu tiên
$('[name$="value"]') Lấy các thẻ có thuộc tính name và giá trị của name kết thúc bằng chuỗi value
$('[name="value"]') Lấy các thẻ có thuộc tính name và giá trị của name bằng bằng chuỗi value
$('[name!="value"]') Lấy các thẻ có thuộc tính name và giá trị của name khác chuỗi value
$('[name]') Lấy các thẻ mà chỉ cần có thuộc tính name không quan tâm đến giá trị
$('[name^="value"]') Lấy các thẻ mà có thuộc tính name bắt đầu bằng chuỗi value
$('[name1="value1"][name2="value2"]') Lấy các thẻ theo nhiều thuộc tính khác nhau

Một số ví dụ
Lấy các thẻ có thuộc tính name và giá trị của name phải bằng chuỗi value hoặc theo sau là dấu gạch ngang (-)
<html>
    <head>
        <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>       
        <script language="javascript">
            $(document).ready(function(){
            
            	$( "input[name|='chelsea']" ).val( "OK!" );
            
            });
        </script>
    </head>
    <body>
        <input name="chelsea">
        <input name="chelseafc">
        <input name="chelsea champion">
        <input name="chelsea-fc">
    </body>
</html>
Kết hợp nhiều thuộc tính
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
       
        <script language="javascript">
            $(document).ready(function(){
              
            	$( "input[id='01'][name^='chelsea']" ).val( "OK!" );
              
            });
        </script>
    </head>
    <body>
        <input name="chelsea">
        <input name="chelseafc">
        <input id="01" name="chelsea champion">
        <input name="chelsea-fc"><br/>
     
    </body>
</html>
      Các ví dụ khác khá đơn giản các bạn có thể tự code nhé, bạn có thể xem chi tiết ví dụ tại https://api.jquery.com