最新的Web开发教程
 

jQuery - 设置内容和属性


套装内容- 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.w3ii.com/jquery");
});
试一试»

attr()方法也可以让你在同一时间设置多个属性。

下面的例子演示了如何设置两个href和标题在同一时间属性:

$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.w3ii.com/jquery",
        "title" : "w3ii jQuery Tutorial"
    });
});
试一试»

回调函数的attr()

jQuery的方法attr()还配备了一个回调函数。 回调函数有两个参数:当前元素中选择的元素列表和原(旧)的索引属性值。 然后,返回你希望从功能的新属性值的字符串。

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

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

自测练习用!

练习1» 练习2» 练习3» 练习4» 练习5»


jQuery的HTML参考

对于所有的jQuery HTML方法的完整概述,请访问我们的jQuery HTML / CSS参考