Love beautiful code? We do too.
Đị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.
Unpublished comment
Viết câu trả lời