.attr()

Đị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.
Ngoài việc sử dụng .attr() để lấy giá trị như id, class, chúng ta còn có thể lấy title, type, hay bất cứ attr nào khác.

Cấu trúc

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');

Bài học chỉ muốn cho bạn hiểu cách sử dụng .attr(), muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.

.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:

Làm thử!

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:

Làm thử!

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>

.appendTo()

.html()