jQuery dom_set

设置内容 - text(), html()和val()

我们将使用与前一页相同的三种方法来设置内容:

text() - 设置或返回选定元素的文本内容
html() - 设置或返回选定元素的内容 (包括 HTML标记)
val() - 设置或返回表单字段的值

下面的示例演示如何使用jQuery的text(), html()和val()方法设置内容:

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

让我试试

text(), html()和val()的回调函数

以上所有的jQuery方法：text(), html()和val()，都有一个回调函数。回调函数有两个参数：选定元素列表中当前元素的索引和原始（旧）值。

然后返回您希望用作函数的新值的字符串。

下面的例子演示了text() 和 html() 的回调函数:

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

让我试试

设置属性 - attr()

jQuery attr() 方法也用于设置/更改属性值。

下面的示例演示如何修改一个链接的href属性值:

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

让我试试

attr() 方法还允许您同时设置多个属性。

下面的示例演示如何同时设置链接的href和标题属性:

$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.2xkt.com/jquery",
        "title" : "享学课堂jQuery 教程"
    });
});

让我试试

attr()的回调函数

jQuery的方法attr()，也有一个回调函数。回调函数有两个参数：选定元素列表中当前元素的索引和原始（旧）属性值。然后返回函数中使用的新属性值的字符串。

下面的示例演示attr()的回调函数:

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

让我试试