JS - Attributes trong jQuery

03/05/2019, 8:25 AM | 03/05/2019, 8:25 AM | 1.0K | 047

Bài này giới thiệu một số phương thức giúp thao tác với các thuộc tính attribute của phần tử HTML. Có 10 phương thức cơ bản được thể hiện ở bảng dưới đây.
1. Bảng Attribute trong jQuery

Tên	Ý nghĩa
.addClass()	Thêm class cho phần tử HTML
.removeClass()	Xóa class khỏi phần tử HTML
.hasClass()	Kiểm tra một phần tử nào đó có tồn tại class nào đó hay không. Trả về true hoặc false
.html()	Lấy nội dung bên trong một phần tử HTML nào đó, giống với innerHTML trong javascript. Nội dung này bao gồm cả các đoạn mã html, nếu chỉ muốn lấy văn bản thì nên dùng text(). Nếu selector trả về là một danh sách thì nó sẽ lấy nội dung phần tử đầu tiên.
.attr()	Dùng để gán giá trị hoặc lấy giá trị thuộc tính attributes của một hay nhiều thẻ HTML
.prop()	Dùng để gán giá trị hoặc lấy giá trị thuộc tính properties của một hay nhiều thẻ HTML
.removeAttr()	Dùng để xóa các thuộc tính khỏi các phần tử HTML.
.removeProp()	Dùng để xóa các thuộc tính khỏi các phần tử HTML được thêm bới prop().
.toggleClass()	Thêm hoặc xóa một hay nhiều class khỏi các phần tử
.val()	Lấy giá trị hoặc thay đổi giá trị của phần tử

2. Một số ví dụ
.html() trong jQuery
Khi click vào button, lấy nội dung thẻ div rồi hiển thị trong thẻ span dưới dạng text

Xem DEMO

<script language="javascript">
      $(document).ready(function(){
            
          $('input').click(function(){
                
              var str = $('div').html();
              $('span').text(str);
                
          });
            
       });
</script>

.attr() và prop() trong jQuery
      Hai phương thức này đều có tác dụng lấy và thêm thêm giá trị thuộc tính cho thẻ HTML, tuy vậy vẫn có sự khác nhau :
Thứ nhất :
      - attr() thay đổi giá trị thuộc tính attributes của thẻ HTML.
      - prop() thay đổi giá trị thuộc tính properties của thẻ HTML theo cây DOM tree
Sự khác biệt giữa attributes và properties :
      Các thuộc tính attributes của thẻ HTML là không thay đổi hay là luôn mang giá trị ban đầu, còn thuộc tính properties của thẻ HTML có thể thay đổi được.
Ví dụ trong một ô textbox, khi người dùng chưa nhập gì thì cả thuộc tính attributes và properties đều có giá trị value là giá trị ban đầu. Khi người dùng bắt đầu nhập giá trị vào thì value lúc này sẽ thay đổi - value properties lúc này thay đổi là giá trị người dùng nhập vào, còn attributes value vẫn là giá trị ban đầu.
Ta xét ví dụ sau, dùng attr() và prop() để lấy giá trị value của textbox lúc ban đầu, và khi người dùng bắt đầu nhập vào textbox để thấy sự khác biệt :

Xem DEMO

<!DOCTYPE html>
<html>
    <head>
        <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>       
        <script language="javascript">
            $(document).ready(function(){
            	function SetAttr(){
                    // dùng attr() lấy giá trị value của textbox gán vào span đầu tiên
                	$('span:first').text($('#02').attr('value'));
                }
                function SetProp(){
                    // dùng prop() lấy giá trị value của textbox gán vào span đầu cuối cùng
                	$('span:last').text($('#02').prop('value'));
                }
            	SetAttr();
                SetProp();
                
                $('#02').keyup(function(){
                    // khi người dùng nhập dữ liệu vào textbox
                    // thì gọi lại 2 hàm
                	SetAttr();
                    SetProp();
                
                });
            
            });
        </script>
    </head>
    <body>
      <p>attr() : <span></span></p>
      
      <input type="text" id="02" value="value"/>
      
      <p>prop() : <span></span></p>
    </body>
</html>

Thứ hai :
Những thuộc tính có kiểu boolean như checked , selected thì prop() sẽ trả về true hoặc false
Ví dụ :

Xem DEMO

<html>
    <head>
        <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>       
        <script language="javascript">
            $(document).ready(function(){
            	$( "input" ).change(function() {
                  var $input = $( this );
                  $( "p" ).html(
                    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
                    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
                    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
                }).change();
            
            });
        </script>
    </head>
    <body>
     	<input id="check1" type="checkbox" checked="checked">
        <label for="check1">Check me</label>
        <p></p>
    </body>
</html>