jQuery - Đặt nội dung và thuộc tính
Đặt Nội dung - văn bản(), html() và val()
Chúng tôi sẽ sử dụng ba phương pháp tương tự từ trang trước để đặt nội dung :
-
text()
- Đặt hoặc trả về nội dung văn bản của các thành phần được chọn -
html()
- Đặt hoặc trả về nội dung của các phần tử đã chọn (bao gồm cả đánh dấu HTML) -
val()
- Đặt hoặc trả về giá trị của các trường biểu mẫu
Ví dụ sau đây minh họa cách đặt nội dung bằng các phương thức jQuery text()
, html()
và val()
:
Ví dụ
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Hãy tự mình thử »Hàm gọi lại cho text(), html() và val()
Tất cả ba phương thức jQuery ở trên: text()
, html()
và val()
, cũng đi kèm với hàm gọi lại. Hàm gọi lại có hai tham số: chỉ mục của phần tử hiện tại trong danh sách các phần tử được chọn và giá trị gốc (cũ). Sau đó, bạn trả về chuỗi bạn muốn sử dụng làm giá trị mới từ hàm.
Ví dụ sau minh họa text()
và html()
với hàm gọi lại:
Ví dụ
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Hãy tự mình thử » Đặt thuộc tính - attr()
Phương thức jQuery attr()
cũng được sử dụng để đặt/thay đổi giá trị thuộc tính.
Ví dụ sau đây minh họa cách thay đổi (đặt) giá trị của thuộc tính href trong một liên kết:
Ví dụ
$("button").click(function(){
$("#w3s").attr("href", "https://www.example.com.vn/jquery/");
});
Hãy tự mình thử » Phương thức attr()
cũng cho phép bạn đặt nhiều thuộc tính cùng một lúc.
Ví dụ sau đây minh họa cách đặt cả thuộc tính href và title cùng một lúc:
Ví dụ
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.example.com.vn/jquery/",
"title" : "Example.com.vn jQuery Tutorial"
});
});
Hãy tự mình thử »Hàm gọi lại cho attr()
Phương thức jQuery attr()
cũng đi kèm với hàm gọi lại. Hàm gọi lại có hai tham số: chỉ mục của phần tử hiện tại trong danh sách các phần tử được chọn và giá trị thuộc tính gốc (cũ). Sau đó, bạn trả về chuỗi bạn muốn sử dụng làm giá trị thuộc tính mới từ hàm.
Ví dụ sau minh họa attr()
với hàm gọi lại:
Ví dụ
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Hãy tự mình thử »bài tập jQuery
Tài liệu tham khảo HTML của jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các phương thức HTML của jQuery, vui lòng truy cập Tài liệu tham khảo HTML/CSS jQuery của chúng tôi.