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手册