Set nội dung - text(), html(), và val()

Chúng ta sẽ sử dụng ba phương thức tương tự bài trước để set nội dung:

• text() - Đặt hoặc trả về nội dung văn bản của phần tử được chọn
• html() - Đặt hoặc trả về nội dung của phần tử được chọn (bao gồm thẻ 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 set nội dung với 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");
});

Hàm Callback 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 chức năng callback. Hàm callback có 2 tham số: index của phần tử hiện tại trong một list các phần tử được chọn và thứ hai là giá trị cũ (the original (old) value). Sau đó, bạn trả về chuỗi bạn muốn sử dụng làm giá trị mới từ hàm callback.

Ví dụ sau đây minh họa text() và html() với 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 + ")";
  });
});

Set giá trị thuộc tính - attr()

Phương thức attr() cũng được sử dụng để set giá trị thuộc tính.

Ví dụ sau đây minh họa cách set giá trị thuộc tính href trong một link:

Ví dụ

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

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

Ví dụ sau minh họa cách set cả hai thuộc tính href và title cùng một lúc:

Ví dụ

$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});

Hàm Callback cho attr()

Phương thức attr() cũng đi kèm với chức năng callback. Hàm callback gồm 2 tham số: index của phần tử hiện tại trong một list các phần tử được chọn và thứ hai là giá trị thuộc tính cũ (the original (old) attribute value). 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 callback.

Ví dụ sau đây cho thấy phương thức attr() với hàm callback:

Ví dụ

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