返回宝典

jQuery 设置

上一节 下一节

设置内容 - 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"; 
    });
});

运行一下


jQuery 设置

上一节 下一节