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