jQuery Attributes - removeAttr() - attr() - prop()

Sử dụng hàm removeAttr() trong jquery

Để các bạn dễ hình dung hơn thì trước tiên các bạn tham khảo ví dụ về hàm attr này đã nhé.

Cú pháp của hàm removeAttr() như sau: $('selector').removeAttr('attr_name'). Sau khi chạy đoạn code này thì đối tượng selector sẽ bị xóa đi thuộc tính attr_name. 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       	<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
      <input type="textbox" id="inputid" value="Giá trị input"/> Ăn <br/>
      
      <input type="button" id="view1" value="Xóa Type"/>
      <input type="button" id="view2" value="Thêm vào thuộc tính type = radio"/>
      
      <script language="javascript">
        
          // Bắt đầu code jquery
          $(document).ready(function(){
            
              // Xóa thuộc tính type khi click vào button 1
              $('#view1').click(function(){
		$('#inputid').removeAttr('value');
              });
            
            
              // Thêm vào thuộc tính type = radio
              $('#view2').click(function(){
		$('#inputid').attr('type', 'radio');
              });
          });
      </script>
    </body>
</html>

jQuery Attributes Attr()

Hàm attr() trong jQuery dùng để lấy giá trị hoặc gán giá trị cho các thuộc tính của một hoặc nhiều thẻ HTML, đây là một hàm rất quan trọng và được sử dụng rất nhiều. Vậy các thuộc tính HTML là gì? Mỗi thẻ HTML sẽ có một số thuộc tính riêng của nó như id, name, src, href. Tuy nhiên ta có thể gán cho nó một thuộc tính bất kỳ vì bản chất HTML là các thẻ XML. Nhưng thuộc tính đó có tác dụng hay không thì phải phụ thuộc vào từng thẻ HTML. Ví dụ với thẻ input thì không thể có thuộc tính href, src.

Ví dụ: gán thuộc tính data-url cho thẻ input như sau:

<input type="text" name="name" value="" data-url="jks.vn" />

Hàm attr có hai cách sử dụng, cách thứ nhất là dùng để lấy giá trị của thuộc tính, cách thứ hai là gán giá trị cho thuộc tính.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
      <h1>Ví dụ 1</h1>
      <strong>Sở thích của bạn là gì? </strong> <br/>
      <input type="checkbox" id="an" name="sothich" value="1"/> Ăn <br/>
       
      <input type="button" id="view1" value="Xem Name và Type"/>
      <input type="button" id="view2" value="Đổi type thành textbox"/>
      <input type="button" id="view3" value="Đổi type thành checkbox"/>
       
      <script language="javascript">
         
          // Bắt đầu code jquery
          $(document).ready(function(){
             
              // Khi click vào button có id = view1
              $('#view1').click(function(){
 
                  // Lấy tên của checkbox có id là an
                  var name = $('#an').attr('name');
 
                  // lấy type của checkbox
                  var type = $('#an').attr('type');
                 
                  alert('Name là ' + name + ' và type là ' + type);
 
              });
             
                 
              // Khi click vào button có id = view2
              $('#view2').click(function(){
                  // Thay đổi kiểu thành textbox
                  $('#an').attr('type', 'textbox');
                 
              });
             
             
              // Khi click vào button có id = view3
              $('#view3').click(function(){
                  // Thay đổi kiểu thành radio
                  $('#an').attr('type', 'radio');
                 
              });
             
          });
         
      </script>
       
    </body>
</html>

jQuery Attributes Prop()

Hàm prop() trong jquery cũng dùng để lấy các thuộc tính của thẻ, tuy nhiên cách trả về kết quả lại khác một xíu. Đối với những thuộc tính có dạng true/false thì thay vì trả về giá trị của thuộc tính như hàm attr() thì nó sẽ trả về true hoặc false.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
      <h1>Ví dụ 2</h1>
      <strong>Sở thích của bạn là gì? </strong> <br/>
      <input type="checkbox" id="an" name="sothich" value="1" checked/> Ăn <br/>
       
      <input type="button" id="view1" value="Xem Name"/>
      <input type="button" id="view2" value="Kiểm tra có check hay không"/>
       
      <script language="javascript">
         
          // Bắt đầu code jquery
          $(document).ready(function(){
             
              // Khi click vào button có id = view1
              $('#view1').click(function(){
                    alert($('#an').prop('name'));
              });
             
             
              $('#view2').click(function(){
                    alert($('#an').prop('checked'));
              });
                 
          });
         
      </script>
       
    </body>
</html>

Các bạn thấy khi click vào button thứ hai thì nó alert() lên true, còn nếu bạn bỏ checked đi thì nó sẽ alert() lên là false.

PreviousjQuery Attributes - hasClass() - addclass() - removeclass()NextGiới thiệu và cấu hình cơ bản

Last updated