上一节:
下一节:

  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手册
上一节:
下一节: