Phương thức attr() trong jQuery

1) Phương thức attr() trong jQuery

- Phương thức attr() được dùng để:

• Thiết lập một hoặc nhiều thuộc tính cho phần tử.
• Hoặc lấy giá trị của một thuộc tính nào đó của phần tử.

- Lưu ý: Thuộc tính ở đây không phải là thuộc tính định dạng CSS, mà là thuộc tính của phần tử, ví dụ như: src, href, style, width, height, ....

2) Cách sử dụng phương thức attr() trong jQuery

- Đối với phương thức attr(), chúng ta có bốn trường hợp sử dụng tương ứng với bốn loại cú pháp:

2.1) Lấy giá trị của một thuộc tính nào đó

- Để lấy giá trị của một thuộc tính nào đó của phần tử thì ta dùng cú pháp như sau:

$(selector).attr(attribute);

- Trong đó: Tham số attribute là tên của thuộc tính mà bạn muốn lấy giá trị, tham số attribute phải được viết bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.

- Lưu ý: Nếu bộ chọn selector tìm được nhiều phần tử trùng khớp thì giá trị trả về sẽ là giá trị của phần tử trùng khớp được tìm thấy đầu tiên.

2.2) Thiết lập một thuộc tính nào đó cho phần tử

- Để thiết lập một thuộc tính nào đó cho phần tử thì ta dùng cú pháp như sau:

$(selector).attr(attribute,value);

- Trong đó:

• Tham số attribute là tên của thuộc tính mà bạn muốn thiết lập cho phần tử.
• Tham số value là giá trị của thuộc tính mà bạn muốn thiết lập.

- Lưu ý: Đối với cú pháp này, tham số attribute bắt buộc phải được đặt bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn. Còn đối với tham số value thì tùy thuộc vào loại giá trị của nó mà có cần phải đặt hay không, tuy nhiên để đảm bảo an toàn thì bạn cần phải đặt nó bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.

2.3) Thiết lập nhiều thuộc tính cho phần tử

- Để thiết lập nhiều thuộc tính cho phần tử thì ta dùng cú pháp như sau:

$(selector).attr({
    attribute:value, 
    attribute:value, 
    attribute:value,
    ....
});

- Ý nghĩa của hai tham số attribute & value trong cú pháp này giống với cú pháp trong phần 2.2

- Tuy nhiên, đối với cú pháp này thì tham số attribute không bắt buộc phải đặt bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.

2.4) Thiết lập một thuộc tính nào đó cho phần tử (sử dụng hàm)

- Dưới đây là cú pháp thiết lập một thuộc tính nào đó cho phần tử bằng cách sử dụng hàm:

$(selector).attr(attribute,function(index,currentvalue){
    return value;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

- Lưu ý: Cú pháp này thường được sử dụng trong trường hợp bộ chọn của bạn tìm ra được nhiều phần tử trùng khớp.

3) Một số ví dụ

<script>
    $(document).ready(function(){
        $("button").click(function(){
            var value = $("img").attr("src");
            alert(value);
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("img").attr("width","500");
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("img").attr("src","../image/natural.jpg");
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("img").attr({
                width:"500",
                height:"100"
            });
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("img").attr("width",function(a,b){
                if(a==0){return b;}
                if(a==1){return 200;}
                if(a==2){return b*2;}
            });
        });
    });
</script>