jQuery捕獲-獲取DOM元素內容和屬性


一、獲取內容

 

  1.text()-設置或返回所選元素的文本內容

 

 

  2.html()-設置或返回所選元素的內容(包括HTML標記)

  3.val()-設置或 返回表單字段的值

 1 $(document).ready(function(){
 2   $("#btn1").click(function(){
 3     alert("Text: " + $("#test").text());
 4   });
 5   $("#btn2").click(function(){
 6     alert("HTML: " + $("#test").html());
 7   });
 8     $("#btn3").click(function(){
 9     alert("值為: " + $("#test").val());
10   });
11 });
12 </script>
13 </head>
14 
15 <body>
16 <p id="test">這是段落中的 <b>粗體</b> 文本。</p>
17 <p>名稱: <input type="text" id="test" value="val測試值"></p>
18 <button id="btn3">val顯示值</button>
19 <button id="btn1">顯示文本</button>
20 <button id="btn2">顯示 HTML</button> 

    第一個按鈕顯示:val測試值

  第二個按鈕顯示:這是段落中的粗體文本

  第三個按鈕顯示:這是段落中的 <b>粗體</b> 文本

  上面的三個 jQuery 方法:text()、html() 以及 val(),如果向里面傳遞一個值,則是表示把被選元素的值設置為傳進去的參數。

  上面的三個 jQuery 方法:text()、html() 以及 val(),可以傳遞一個回調函數。回調函數有兩個參數:1.被選元素列表中當前元素的下標,2.原始(舊的)值。然后函數返回你經過處理的字符串。

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        //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>
</head>

<body>
<p id="test1">舊段落1。</p>
<p id="test2">舊段落2。</p>
<button id="btn1">顯示 新/舊 文本</button>
<button id="btn2">顯示 新/舊 HTML</button>
</body>

 

  4.獲取屬性 - attr()

  

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

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

  按鈕顯示:www.baidu.com

  同樣的,attr()也可以傳進去參數設置值。但是與text()它們三個不同的是,attr()需要傳遞兩個參數,第一個參數為要設置的屬性名,第二個參數為要設置的值。

  attr也是可以傳遞一個回調函數的,在attr()的第二個參數位傳遞一個回調函數。第一個參數為要設置的屬性名,第二個參數為要設置的值。

 $("#runoob").attr({
      "href" : "http://www.baidu.com",
      "title" : "attr使用"
    });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM