Đị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','giá trị thuộc tính')
Gán giá trị cho thuộc tính.
$('a').attr('title','Học Web Chuẩ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> |
<p>Thành phần p có <a href="http://www.hocwebchuan.com">link a</a></p> |
.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 class="test0">Thành phần p 01</p> |