Định nghĩa và sử dụng

  • .attr(): lấy giá trị hoặc thêm thuộc tính (attribute) cho thành phần.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.attr('tên thuộc tính')

Lấy giá trị của thuộc tính.

$('a').attr('href');

.attr('tên thuộc tính','giá trị thuộc tính')

Gán giá trị cho thuộc tính.

$('a').attr('title','Học Web Chuẩn');

.attr({
'tên thuộc tính 1': 'giá trị thuộc tính 1',
'tên thuộc tính 2': 'giá trị thuộc tính 2',
'tên thuộc tính n': 'giá trị thuộc tính n'
})

Gán nhiều giá trị cho nhiều thuộc tính.

$('img').attr({
'src': 'images/bg_hwc.gif',
'alt': 'Học Web Chuẩn'
});
  • Đã được thêm vào từ phiên bản 1.1

.attr('tên thuộc tính',function(index, attr))

Gán giá trị cho thuộc tính.

$('p').attr('class', function (i) {
return 'test' + i;
});

.attr(tên thuộc tính)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var hrefAttr = $('a').attr('href');
    $('.test').html(hrefAttr);
});
</script>
</head>

<body>
<p>Thành phần p có <a href="http://www.hocwebchuan.com">link a</a></p>
<div>Bạn đang xem nội dung tại <span class="test"></span></div>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng .attr('href') ta đã lấy được giá trị thuộc tính href của thẻ a.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p>Thành phần p có <a href="http://www.hocwebchuan.com">link a</a></p>
<div>Bạn đang xem nội dung tại <span class="test"></span></div>

<p>Thành phần p có <a href="http://www.hocwebchuan.com">link a</a></p>
<div>Bạn đang xem nội dung tại <span class="test">http://www.hocwebchuan.com</span></div>
</div>

.attr(tên thuộc tính, giá trị thuộc tính)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('a').attr('href','http://www.hocwebchuan.com');
});
</script>
</head>

<body>
<p>Thành phần p có <a href="http://www.google.com">link a</a></p>
</body>
</html>

Hiển thị trình duyệt:

Ban đầu thuộc tính href có giá trị http://www.google.com, nhưng với cách sử dụng như trên ta đã thay đổi giá trị của thuộc tính href thành http://www.hocwebchuan.com.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p>Thành phần p có <a href="http://www.google.com">link a</a></p>

<p>Thành phần p có <a href="http://www.hocwebchuan.com">link a</a></p>

.attr({ tên thuộc tính 1: giá trị thuộc tính 1, ..., tên thuộc tính n: giá trị thuộc tính n })

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').attr({
        'src': 'images/bg_hwc.gif',
        'alt': 'Học Web Chuẩn'
    });
});
</script>
</head>

<body>
<p><img src="ico_test.gif" alt="" /></p>
</body>
</html>

Hiển thị trình duyệt:

Ban đầu thuộc tính src có giá trị bg_hwc.jpg và thuộc tính alt có giá trị rỗng, nhưng với cách sử dụng như trên ta đã thay đổi giá trị của thuộc tính src thành images/bg_hwc.gif. và giá trị rỗng của alt giờ đây đã đổi thành Học Web Chuẩn.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p><img src="bg_hwc.jpg" alt="" /></p>

<p><img src="images/bg_hwc.gif" alt="Học Web Chuẩn" /></p>

.attr({ tên thuộc tính 1: giá trị thuộc tính 1, ..., tên thuộc tính n: giá trị thuộc tính n })

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
.test0 { color: red; }
.test1 { color: blue; }
.test2 { color: green; }
.test3 { color: yellow; }
</style>
<script>
$(function(){
    $('p').attr('class', function (i) {
        return 'test' + i;
    });
});
</script>
</head>

<body>
<p>Thành phần p 01</p>
<p>Thành phần p 02</p>
<p>Thành phần p 03</p>
<p>Thành phần p 04</p>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng hàm như trên ta đã thêm vào các thành phần p với tên class theo thứ tự tương ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p>Thành phần p 01</p>
<p>Thành phần p 02</p>
<p>Thành phần p 03</p>
<p>Thành phần p 04</p>

<p class="test0">Thành phần p 01</p>
<p class="test1">Thành phần p 02</p>
<p class="test2">Thành phần p 03</p>
<p class="test3">Thành phần p 04</p>