[JQuery] Phần 7: Thiết lập nội dung và các thuộc tính trong jQuery

Thiết lập nội dung – text(), html() và val()
Chúng ta sẽ dùng 3 phương thức từ phần trước để thiết lập nội dung:

text() – Thiết lập hay trả về nội dung văn bản của các phần tử được chọn
html() – Thiết lập hay trả về nội dung của các phần tử được chọn (bao gồm HTML)
val() – Thiết lập hay trả về giá trị của các trường dữ liệu

Ví dụ sau mô tả cách thiết lập nội dung các phần tử HTML bằng cách dùng các hàm text(), html() và val().

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("Xin chào dammio.com!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>dammio.com in đậm</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("Dammio Ta");
    });
});
</script>
</head>
<body>

<p id="test1">Đây là đoạn văn bản --- dammio.com</p>
<p id="test2">Đây là đoạn mã HTML</p>

<p>Trường nhập liệu: <input type="text" id="test3" value="Ronaldo Torrest"></p>

<button id="btn1">Thiết lập văn bản</button>
<button id="btn2">Thiết lập HTML</button>
<button id="btn3">Thiết lập giá trị</button>

</body>
</html>

Hàm gọi lại (callback) cho text(), html() và val()
Ba phương thức text(), html() và val() đều có 1 hàm gọi lại. Hàm gọi lại chứa 2 tham số: giá trị index trả về phần tử hiện tại trong danh sách phần tử được chọn và giá trị gốc. Sau đó, chúng ta có thể trả về chuỗi giá trị mong muốn và sử dụng như là giá trị mới từ hàm.

Ví dụ sau đây mô tả text() và html() dùng hàm gọi lại.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text(function(i, origText){
            return "Đoạn văn bản cũ: " + origText + "---Đoạn văn bản mới: Xin chào! (index: " + i + ")"; 
        });
    });

    $("#btn2").click(function(){
        $("#test2").html(function(i, origText){
            return "Đoạn HTML cũ: " + origText + "---Đoạn HTML mới: Xin <b>chào</b> (index: " + i + ")"; 
        });
    });
});
</script>
</head>
<body>

<p id="test1">Đây là đoạn <b>in đậm</b> 1</p>
<p id="test2">Đây là đoạn <b>in đậm</b> 2</p>

<button id="btn1">Hiển thị đoạn văn bản mới/cũ</button>
<button id="btn2">Hiển thị mã HTML mới/cũ</button>

</body>
</html>

Thiết lập các giá trị – attr()
Phương thức attr() được dùng để thay đổi các giá trị thuộc tính. Ví dụ sau mô tả cách thay đổi giá trị thuộc tính href của 1 liên kết.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#dammio").attr("href", "https://www.dammio.com/about");
    });
});
</script>
</head>
<body>

<p><a href="https://www.dammio.com" id="dammio">dammio.com</a></p>

<button>Thay đổi giá trị href</button>

<p>Rê chuột lên đường dẫn để thấy thuộc tính href có giá trị thay đổi.</p>

</body>
</html>

Phương thức attr() cũng cho phép thay đổi nhiều giá trị cùng lúc. Trong ví dụ sau, 2 thuộc tính href và title đều được thay đổi cùng lúc.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#dammio").attr({"href": "https://www.dammio.com/about", "title" : "Thiết kế web"});
		
    });
});
</script>
</head>
<body>

<p><a href="https://www.dammio.com" title="Lập trình web" id="dammio">dammio.com</a></p>

<button>Thay đổi giá trị href</button>

<p>Rê chuột lên đường dẫn đế thấy 2 thuộc tính href và title có giá trị thay đổi.</p>

</body>
</html>

Hàm gọi lại attr()
Phương thức attr() cũng có 1 hàm gọi lại (callback). Tương tự trên, hàm gọi lại cũng chứa 2 tham số: giá trị index trả về phần tử hiện tại trong danh sách phần tử được chọn và giá trị gốc. Sau đó, chúng ta có thể trả về chuỗi giá trị mong muốn và sử dụng như là giá trị mới từ hàm.

Liên quan: [JQuery] Phần 3: Các hàm chọn jQuery (jQuery Selectors)

Ví dụ sau mô tả phương thức attr() với 1 hàm gọi lại.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#dammio").attr("href", function(i, origValue){
            return origValue + "/jquery"; 
        });
    }); 
});
</script>
</head>
<body>

<p><a href="https://www.dammio.com" id="dammio">dammio.com</a></p>

<button>Thay đổi giá trị href</button>

<p>Rê chuột lên đường dẫn để thấy giá trị thuộc tính href thay đổi.</p>

</body>
</html>

Kết luận: bài viết đã hướng dẫn bạn cách thiết lập nội dung và thuộc tính cho các phần tử HTML trong jQuery. Mời bạn theo dõi các phần tiếp theo để nắm bắt nhiều kiến thức hơn về jQuery.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [JQuery] Phần 7: Thiết lập nội dung và các thuộc tính trong jQuery. https://www.dammio.com/2017/04/09/jquery-phan-7-thiet-lap-noi-dung-va-cac-thuoc-tinh-trong-jquery.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[JQuery] Phần 7: Thiết lập nội dung và các thuộc tính trong jQuery}, year = {2017}, url = {https://www.dammio.com/2017/04/09/jquery-phan-7-thiet-lap-noi-dung-va-cac-thuoc-tinh-trong-jquery}, urldate = {2024-09-03} }

Kết nối