jQuery thiết lập nội dung và thuộc tính

Thiết lập nội dung - text(), html() và val()

Chúng ta sẽ sử dụng ba phương thức giống nhau trong chương trước để thiết lập nội dung:

  • text() - Thiết lập hoặc trả về nội dung văn bản của phần tử được chọn
  • html() - Thiết lập hoặc trả về nội dung của phần tử được chọn (bao gồm các thẻ HTML)
  • val() - Thiết lập hoặc trả về giá trị của trường biểu mẫu

Dưới đây là ví dụ minh họa cách thiết lập nội dung thông qua các phương thức 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");
});

Thử nghiệm ngay

Hàm hồi lại của text(), html() và val()

Ba phương thức jQuery sau: text(), html() và val() cũng có hàm hồi lại. Hàm hồi lại có hai tham số: chỉ số của phần tử hiện tại trong danh sách phần tử được chọn và giá trị ban đầu (cũ). Sau đó, hàm hồi lại trả về chuỗi mà bạn muốn sử dụng.

Dưới đây là ví dụ minh họa về phương thức text() và html() có chứa hàm callback:

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 + ")";
  });
});

Thử nghiệm ngay

Thiết lập thuộc tính - attr()

Phương thức attr() của jQuery cũng được sử dụng để thiết lập hoặc thay đổi giá trị thuộc tính.

Dưới đây là ví dụ minh họa về cách thay đổi (thiết lập) giá trị của thuộc tính href trong liên kết:

Ví dụ

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

Thử nghiệm ngay

Phương thức attr() cũng cho phép bạn thiết lập nhiều thuộc tính cùng một lúc.

Dưới đây là ví dụ minh họa về cách đồng thời thiết lập thuộc tính href và title:

Ví dụ

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery Hướng dẫn"
  });
});

Thử nghiệm ngay

Hàm callback của attr()

Phương thức attr() của jQuery cũng cung cấp hàm callback. Hàm callback có hai tham số: chỉ số của phần tử hiện tại trong danh sách 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 bằng cách cách hàm mới.

Dưới đây là ví dụ minh họa về phương thức attr() có chứa hàm callback:

Ví dụ

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

Thử nghiệm ngay

Tài liệu tham khảo jQuery HTML

Để biết thêm thông tin chi tiết về các phương thức HTML của jQuery, vui lòng truy cập vào tài liệu tham khảo sau: