jQuery - Đặt Nội dung và Thuộc tính

Phương thức đặt nội dung text(), html() và val()

Chúng ta sẽ sử dụng ba phương thức tương tự như bài trước để thiết lập nội dung cho phần tử HTML.

text() - Đặt hoặc trả về nội dung văn bản của các phần tử đã 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 minh họa cách đặt nội dung bằng phương thức jQuery text(), html() và val().

Ví dụ

$(document).ready(function(e) {
    $("#btn1").click(function() {
        $("#p1").text("Hello World!");    
    });
    $("#btn2").click(function() {
        $("#p2").html("<b>Hello World!</b>");    
    });
    $("#btn3").click(function() {
        $("#input1").val("Hello World!");    
    });
});

Xem kết quả

Thêm hàm callback cho phương thức text(), html() và val()

Tất cả ba phương thức jQuery ở trên 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 đó, chúng ta trả về chuỗi mà chúng ta muốn sử dụng làm giá trị mới từ hàm text(), html() và val().

Ví dụ sau minh họa phương thức text() và html() với một hàm gọi lại.

Ví dụ

$(document).ready(function(e) {
    $("#btn1").click(function() {
        $("#p1").text(function(index, text) {
           return "Old text: " + text + ". New text: Hello World!, index(" + index + ")";
        });    
    });
    $("#btn2").click(function() {
        $("#p2").html(function(index, text) {
           return "Old text: " + text + ". New text: <b>Hello World!</b>, index(" + index + ")";
        });    
    });
});

Xem kết quả

Phương thức đặ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.

Ví dụ

$(document).ready(function(e) {
    $("#btn1").click(function() {
        $("#a1").attr("href","https://book-code.com.vn/category/jquery");    
    });
});

Xem kết quả

Phương thức attr() này cũng cho phép chúng ta 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.

Ví dụ

$(document).ready(function(e) {
    $("#btn1").click(function() {
        $("#a1").attr({
            "href": "https://book-code.com.vn/category/jquery",    
            "title": "Học jQuery"
        });    
    });
});

Xem kết quả

Thêm hàm callback cho phương thức attr()

Phương thức jQuery attr() ở trên 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 đó, chúng ta trả về chuỗi mà chúng ta muốn sử dụng làm giá trị mới từ hàm attr().

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

Ví dụ

$(document).ready(function(e) {
    $("#btn1").click(function() {
        $("#a1").attr("href",function(index, text) {
            return text + "/category/jquery";
        });
    });
});

Xem kết quả