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

夢為湘子發表於2020-09-01
jQuery

一、獲取內容

 

　　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使用"
    });

 

相關文章