套装内容- 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的链接属性:
该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";
});
});
试一试» 自测练习用!
jQuery的HTML参考
对于所有的jQuery HTML方法的完整概述,请访问我们的jQuery HTML / CSS参考 。