jQuery來了--text(),html()，val()，attr()，捕獲内容/屬性，設定内容/屬性，回調函數

捕獲

獲得内容–text(),html()和val()

三個用于DOM操作的jQuery方法：

• text()：設定或傳回所選元素的文本内容
• html()：設定或傳回所選元素的内容（包括HTML标記）
• val()：設定或傳回表單字段的值

例1.

通過text()和html()方法獲得内容：

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
<p id="test">這是段落中的 <b>粗體</b> 文本。</p>
<button id="btn1">顯示文本</button>
<button id="btn2">顯示 HTML</button>
           

例2.

通過val()方法獲得輸入字段的值：

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值為: " + $("#test").val());
  });
});
</script>

<p>名稱: <input type="text" id="test" value="菜鳥教程"</p>
<button>顯示值</button>
           

擷取屬性–attr()

作用：用于擷取屬性值

例.

如何獲得連結中href屬性的值：

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>

<p><a href="http://www.runoob.com" id="runoob">菜鳥教程</a></p>
<button>顯示 href 屬性的值</button>
           

設定

設定内容–text(),html()和val()

• text()：設定或傳回所選元素的文本内容
• html()：設定或傳回所選元素的内容（包括HTML标記）
• val()：設定或傳回表單字段的值

例.

<script>
   $(document).ready(function(){
      $("#btn1").click(function(){
         $("#test1").text("Hello Nico");
      });
      $("#btn2").click(function(){
         $("#test2").html("<h1>Hello Nico</h1>");
      });
      $("#btn3").click(function(){
         $("#test3").val("Haha");
      });
   });
</script>

<p id="test1">這是一個段落。</p>
<p id="test2">這是另外一個段落。</p>
<p>輸入框: <input type="text" id="test3"></p>
<button id="btn1">設定文本</button>
<button id="btn2">設定 HTML</button>
<button id="btn3">設定值</button>
           

text()、html() 和 val() 的回調函數

回調函數有兩個參數：被選元素清單中目前元素的下标，以及原始（舊的）值。然後以函數新值傳回您希望使用的字元串

例.

<script>
$(document).ready(function(){
  $("#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 <b>world!</b> (index: " + i + ")"; 
    });
  });
});
</script>

<p id="test1">gg</p>
<p id="test2">hh</p>
<button id="btn1">顯示 新/舊 文本</button>
<button id="btn2">顯示 新/舊 HTML</button>
           

設定屬性 - attr()

作用：設定/改變屬性值

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
     $("#th").attr("name"," Nico");
      alert($("#th").attr("name"));
  });
});
</script>

<p><a href="#" id="th" name="hh">Hello</a></p>
<button>修改 href 值</button>
           

attr() 方法也允許您同時設定多個屬性

例.

設定多個屬性：

<script>
 $(document).ready(function(){
     $("button").click(function(){
        $("#ha").attr({
        "name":"Nico",    //修改屬性name
        "title":"qq"      //設定屬性title
        });
     $("#ha").text($("#ha").attr("title"));// 通過修改的 title 值來修改連結名稱
     });
  });
</script>

<p><a href="#" id="ha">Hello Nico</a></p>
<button>change</button>
           

attr() 的回調函數

例.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#ha").attr("href", function(i, origValue){
            return origValue + "/ditu";
            /*或return "http://www.sohu.com";*/
        });
        /*$("#ha").attr("href","http://www.baidu.com");*/
    });
});
</script>

<p><a href="http://www.baidu.com" id="ha">Hello Nico</a></p>

<button>修改 href 值</button>