BASIC
EFFECTS
DOM
ADVANCED
JQUERY CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 03: jQuery Attributes - attr() - prop()

Trong javascript để truy xuất giá trị của một thuộc tính nào đó thì ta phải dùng cú pháp DOM ElementDOM HTML. Nhưng trong jQuery thì rất đơn giản, ta chỉ cần sử dụng một trong hai hàm attr()prop(). Hai hàm attr() va prop() trong jquery dùng để xử lý lấy hoặc gán giá trị cho các thuộc tính của thẻ HTML. 

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

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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

<input type="text" name="name" value="" data-url="freetuts.net" />

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.

Ví dụ: XEM DEMO

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

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

Ví dụ: XEM DEMO

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

3. Lời kết

Cả hai hàm attr()prop() đều có một mục đích là xử lý lấy và gán giá trị cho các thuộc tính trong thẻ HTML. Tuy nhiên ở hàm prop() thì hơi khác một xíu đó là nó sẽ trả về true hoặc false cho những thuộc tính có kiểu true/false như checked, selected. Các bạn chú ý điểm này để sư dụng để khỏi nhầm lẫn nhé.

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

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, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Top