码农教程 - 一技在手,衣食无忧! tools

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()

jQueryattr()方法还用于设置/更改属性值。

以下示例演示如何更改（设置）链接中 href 属性的值：

示例

$("button").click(function(){
  $("#w3s").attr("href", "https://www.91xjr.com/jquery/");
});
亲自试一试 »

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

以下示例演示如何同时设置 href 和 title 属性：

示例

$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.91xjr.com/jquery/",
    "title" : "91xjr jQuery Tutorial"
  });
});
亲自试一试 »

attr() 的回调函数

jQuery 方法attr()，还带有​​回调函数。回调函数有两个参数：所选元素列表中当前元素的索引和原始（旧）属性值。然后，您从函数返回要用作新属性值的字符串。

下面的例子演示了attr()带有回调函数：

示例

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

jQuery 练习

通过练习测试一下

练习:

使用 jQuery 方法改变<div> 元素的文本到 "Hello World"。

$("div").("");

开始练习

jQuery HTML 参考

有关所有 jQuery HTML 方法的完整概述，请访问我们的jQuery HTML/CSS 参考。


❮ 上一节 下一节 ❯