Tự học JQuery - HTML - Bài 2 -jQuery – Thiết lập nội dung và các thuộc tính

Xem Mục lục lập trình JQuery

Thiết lập nội dung với các hàm - text(), html(), và val()

Chúng ta sẽ sử dụng 03 phương thức trong bài 1 để 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 các phần tử đã chọn.
• html() - Thiết lập hoặc trả về nội dung của các phần tử đã chọn( bao gồm cả thẻ html)
• val() - Thiết lập hoặc trả về giá trị của các phần tử trong form.
  

Ví dụ sau mô tả cách thiết lập nội dung sử dụng 03 hàm: text(), html(), và val()

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

01 hàm Callback cho text(), html(), và val()

Cả 03 phương thức jQuery sau: text(), html(), và val(), đều có hàm callback.

Hàm callback có 02 tham số: vị trí của phần tử hiện hành trong danh sách các phần tử đã chọn và giá trị gốc (cũ) .

Sau đó hàm sẽ return về 01 chuỗi string.

Ví dụ sau mô tả hàm text() và html() với 01 hàm callback:

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

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

Phương thức jQuery attr() cũng được dùng để thiết lập/ thay đổi giá trị các thuộc tính.

Ví dụ sau mô tả cách thay đổi (thiêt lập) giá trị của thuộc tính href trong 01 liên kết:

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

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

Ví dụ sau mô tả cách thiết lập cả 02 thuộc tính href và title cùng lúc:

$("button").click(function(){
    $("#lienket").attr({
        "href" : "http://www.lophocvitinh.com",
        "title" : "Lớp học vi tính.COM"
    });
});

01 hàm Callback cho attr()

Phương thức jQuery attr(), cũng có 01 hàm callback.

Hàm callback có 02 phương thức: vị trí của phần tử hiện hành trong danh sách các phần tử đã chọn và giá trị thuộc tính gốc (cũ).

Hàm callback sau đó trả về chuỗi string như 01 giá trị thuộc tính mới.

Ví dụ sau mô tả phương thức attr() với 01 hàm callback:

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

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM