Người Viết : ViKiMi Editor

Phương thức Attr() cho phép thiết lập hoặc lấy về thuộc tính để xây dựng giao diện Web
Chúng ta đã thấy jQuery cho phép thay đổi và thao tác với giá trị của các phần tử HTML và văn bản của các phần tử HTML. Điều này thật thuận tiện, vậy chúng ta còn những điều khác nữa để làm việc cùng jQuery? Điều này chắc chắn là có. Để có một giao diện Website hoàn hảo chúng ta cần nhiều hơn nữa và thư viện jQuery đã mang lại một lợi thế khác nữa!
Thư viện jQuery cho phép chúng ta thay đổi và thao tác với các thuộc tính của các phần tử HTML.
+ Phần tử HTML luôn có các thuộc tính như width, height, href, src, color, background-color …
+ Thư viện jQuery cho phép chúng ta có thể thiết lập hoặc lấy về các giá trị thuộc tính. JQuery làm điều này với phương thức attr() . Dựa vào điều này sẽ cho phép thiết kế các giao diện có thể thay đổi cách linh hoạt. Vì sẽ luôn có thể thay đổi các thuộc tính của phần tử HTML
PHƯƠNG THỨC jQuery ATTR() :
Phương thức này sử dụng để thiết lập hoặc trả về các thuộc tính và các giá trị của các phần tử được chọn
Sử dụng như sau :
+ Để lấy về giá trị thuộc tính / to return attribute value : Phương thức này trả về giá trị thuộc tính của phần tử đầu tiên được so khớp
+ Để thiết lập giá trị thuộc tính / to set attribute value : Phương thức này dùng để thiết lập một hoặc nhiều cặp ( thuộc tính / giá trị ) của tập các phần tử so khớp
Tại sao có thể thiết lập một hoặc nhiều cặp ( thuộc tính / giá trị ) cho tập các phần tử so khớp?
Nguyên nhân là nhiều phần tử HTML có thể chung nhau một class. Do đó mà jQuery sẽ thiết lập cho tập các phần tử mà nó tìm được.
CÚ PHÁP ATTR() :
+ Nhận về giá trị thuộc tính :
$(selector). attr ( attribute )
+ Thiết lập một cặp thuộc tính / giá trị
$(selector). attr( attribute, value )
+ Thiết lập một cặp thuộc tính / giá trị sử dụng Function
$(selector). attr( attribute, function( index, currentvalue ))
+ Thiết lập nhiều cặp thuộc tính / giá trị ( To set multiple attributes / values )
$(selector). attr( { attribute : value, attribute : value,… })
Các tham số sử dụng :
+ Attribute : Tham số xác định tên thuộc tính
+ Value : Tham số xác định giá trị thuộc tính
+ index : Tham số sử dụng để nhận về vị trí index của phần tử trong tập hợp
+ currentvalue : Tham số được sử dụng để cung cấp giá trị thuộc tính hiện tại của các phần tử được chọn. Và khi bạn sử dụng Function thì điều này sẽ hữu ích để bạn có thể đưa ra các xử lý phù hợp.
EXAMPLE :
Thay đổi thuộc tính src của hình ảnh sử dụng jQuery Attr() Method
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr( "src", "nyc.jpg" );
});
});
</script>
</head>
<body>
<img src="chicago.jpg" alt=""width="284" height="213"><br>
<button> Change image src attribute </button>
</body>
</html>
EXAMPLE :
Thay đổi thuộc tính Alt của nhiều hình ảnh sử dụng jQuery Attr() Method
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("img").attr( "alt", function( index, currentvalue ){
return "image "+ index;
});
$("img").each(function (index) {
$("#demo").append("<p> <span style ='color : green; font-weight : bold;'> Hình "+ index + " </span> có Alt : "+ $(this).attr( "alt" ) +"</p>");
});
});
});
</script>
</head>
<body>
<img src="one.jpg" alt="" style="width:200px; height:200px;" />
<img src="two.jpg" alt="" style="width:200px; height:200px;" />
<img src="three.jpg" alt="" style="width:200px; height:200px;" /> <br/>
<button id= "btn"> Click Để Thay Đổi Alt </button>
<div id = "demo"/>
</body>
</html>
OUTPUT :::

Bạn có thể thấy sử dụng phương thức Attr() của jQuery rất đơn giản. Nó cho phép bạn thao tác trên tất cả các thuộc tính của các phần tử HTML. Đồng thời nó cũng cho phép bạn thao tác với tất cả các giá trị thuộc tính hiện tại của phần tử HTML, nhờ vậy bạn có thể thay đổi chúng một cách linh hoạt. Dường như nó làm cho Website linh hoạt hơn nhiều.
+ Phương thức Attr() là một phương tiện khá linh hoạt