Định nghĩa và sử dụng .attr() trong jQuery

.attr() trong jQuery: Xác định thuộc tính của thành phần.

Cấu trúc .attr() trong jQuery

Đã đượ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="http://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.

.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="http://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:

.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="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').attr({
        'src': 'https://hoclaptrinh.vn/themes/client/img/code-screen.jpg',
        '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:

.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="http://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.

Viết câu trả lời

Drop Images