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

下面的这三种方法比较常用：

• text() 获取或设置指定元素的文本内容
• html() 获取或设置指定元素的内容（这里指元素标签内的内容）
• val() 获取或设置指定表单元素的值

案例1：text()和html()演示

$("#btn1").click(function(){
    $("#test1").text("反清复明，抢劫吴三桂！");
});
$("#btn2").click(function(){
    $("#test2").html("<b>反清复明</b>，抢劫吴三桂！");
});
$("#btn3").click(function(){
    $("#test3").val("jQuery老仙");
});

运行一下

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

上述三种方法都可以设置callback回调函数。以text()方法为例：

text()回调函数的语法：

text( function(i, oldText){ return "newText"; } );

上述回调函数有2个参数，i为当前元素在选择器选择的元素列表中属于第几个被选中的元素，因为有时一个jQuery选择器会选中不只一个目标元素；oldText参数指代当前目标元素的文本内容是什么；而该回调函数return回去的值“newText”，即把该目标元素的文本内容设置成“newText”。html()方法、val()方法的回调函数，类似。

$("#btn1").click(function(){
    $(".test1").text(function(i, oldText){
        return "以前的文本是[" + oldText + "](i=" + i + ")";
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i, oldText){
        return "以前的元素内容是[" + oldText + "](i=" + i + ")";
    });
});

运行一下

设置属性 - attr()

jQuery中的attr()不仅能获得指定元素的指定属性，还可以给指定元素设置是定属性。如下所示，设置元素的href属性为某个值。

$("button").click(function(){
    $("#zhuanfou").attr("href", "https://sand-box.cn");
});

运行一下

如若同时设置目标元素不只一个属性值，可直接传入一个字典类型的变量。如下所示：

$("button").click(function(){
    $("#zhuanfou").attr({ 
        "href": "https://sand-box.cn",
        "target": "_blank" 
    });
});

运行一下

attr()的回调函数

jQuery中的attr()方式也可以设置callback回调函数。

attr()回调函数的语法：

attr( property, function(i, oldValue){ return "newValue"; } );

property为元素的指定属性；回调函数有2个参数，i为当前元素在选择器选择的元素列表中属于第几个被选中的元素，因为有时一个jQuery选择器会选中不只一个目标元素；oldValue参数指代当前目标元素的指定属性在进行设置前的取值；而该回调函数return回去的值“newValue”，即把该目标元素的指定属性设置成“newValue”。

$("button").click(function(){
    $("#zhuanfou").attr("href", function(i, oldValue){
        return "https://sand-box.cn"; 
    });
});

运行一下