jQuery 设置元素 - 蝴蝶教程

jQuery 设置内容和属性

我们将使用上一页中相同的三种方法来设置内容：

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括HTML标记）
val() 设置或返回表单字段的值

以下示例演示如何使用jQuery text()，html()和val()方法设置内容：

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
          $("#btn1").click(function(){
            $("#test1").text("Hello world!");
          });
          $("#btn2").click(function(){
            $("#test2").html(" <b>Hello world! </b>");
          });
          $("#btn3").click(function(){
            $("#test3").val("Dolly Duck");
          });
          </script>
      </head>

尝试一下

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

上面的所有三个jQuery方法：text(),html()和val()，也带有回调函数。回调函数有两个参数：所选元素列表中当前元素的索引和原始（旧）值。然后，您将要使用的字符串作为函数的新值。

以下示例演示带有回调函数的text()和html()：

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
          $("#btn1").click(function(){
            $("#test1").text(function(i, origText){
              return "旧文本: " + origText + "新文本: Hello world!
              (index: " + i + ")"; 
            });
          });
          
          $("#btn2").click(function(){
            $("#test2").html(function(i, origText){
              return "旧 html: " + origText + "新 html: Hello world!
              (index: " + i + ")"; 
            });
          });
          </script>
      </head>

尝试一下

设置属性 attr()

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

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

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
          $("button").click(function(){
            $("#jc2182").attr("href", "https://www.jc2182.com/");
          });
          </script>
      </head>

尝试一下

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

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

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
          $("button").click(function(){
            $("#jc2182").attr({
              "href" : "https://www.jc2182.com/",
              "title" : "蝴蝶jQuery教程"
            });
          });
          </script>
      </head>

尝试一下

attr()的回调函数

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

以下示例演示带有回调函数的attr()：

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
          $("button").click(function(){
            $("#jc2182").attr("href", function(i, origValue){
              return origValue + "/jquery/"; 
            });
          });
          </script>
      </head>

尝试一下

有关所有jQuery HTML方法的完整概述，请转到我们的jQuery HTML/CSS手册