JQuery中text(),html()和val()有何差別？

本篇文章帶給大家的內容是關於JQuery中text(),html()和val()有何差別？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

定義和用法

text() 方法方法設定或傳回被選元素的文字內容

程式碼如下
##

nbsp;html>


<meta>
<meta>
<meta>
<script></script>
<title>Document</title>


<div>div有文本内容</div>
<div>
    div2内的文本
    <span>span内有文本内容</span>
</div>
<input>
<input>
<button></button>
<script>
    console.log($("#div1").text());
    console.log($("#div2").text());
    console.log($("#div2 span").text()) ;
    console.log($("#input1").text());
    console.log($("#input2").text());
    console.log($("#button1").text());
</script>

console列印的結果

可以看出text()只輸出標籤內的文字內容，和js的innerText方法一樣

定義和用法

html( ) 方法傳回或設定被選元素的內容(inner HTML)，包括標籤。

如果方法未設定參數，則傳回被選元素的目前內容。

<div>div有文本内容</div>
<div>
    div2内的文本
    <span>span内有文本内容</span>
</div>
<input>
<input>
<button></button>
<script>
    console.log($("#div1").html());
    console.log($("#div2").html());
    console.log($("#div2 span").html());
    console.log($("#input1").html());
    console.log($("#input2").html());
    console.log($("#button1").html());
</script>

透過console的列印的結果

#列印目前標籤內的文字內容，如果有子標籤，則把子標籤本身和子標籤內的文字一起列印

這個和js的innerHTML差不多

定義和用法

#val() 方法回傳或設定被選元素的值。

元素的值是透過 value 屬性設定的。此方法大多用於 input 元素。

方法主要用於取得表單元素的值

如果該方法未設定參數，則傳回被選元素的目前值。

<div>div有文本内容</div>
<div>
    div2内的文本
    <span>span内有文本内容</span>
</div>
<input>
<input>
<button></button>
<script>
    console.log($("#div1").val());
    console.log($("#div2").val());
    console.log($("#div2 span").val());
    console.log($("#input1").val());
    console.log($("#input2").val());
    console.log($("#button1").val());
</script>

透過控制台列印結果

val()是用來輸出表單內的數據，可以看出p和span標籤內的文字並沒有被輸出，我還測試了H5新標籤placeholder

同樣也沒有被輸出，所以這個val應該是只針對標籤的value屬性的

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的

jquery影片教學專欄！

#

以上是JQuery中text(),html()和val()有何差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！