jquery----text()、html() 以及 val()
阿新 • • 發佈:2018-11-09
本篇介紹text()、html() 以及 val()的用法和區別
- text() - 設定或返回所選元素的文字內容
- html() - 設定或返回所選元素的內容(包括 HTML 標記)
- val() - 設定或返回表單欄位的值
先說三個函式無參獲取內容用法
用白話說3者的區別是:
- html獲取內容時如果有子元素就會以文字把<xx>也輸出
- text會跳過內容中的子元素等標籤,只提取其中的內容
- val是屬性,只有有該屬性的物件才能呼叫(表單元素)
<script src="jquery.js"></script> <div id="div1"> div1的文字內容 <span>div中的span內容</span> </div> <input type="text" id="input1" value="這是一個input標籤"> <script> console.log($("#div1").text()); console.log($("#div1").html()); console.log($("#input1").val()); </script>
可以看到html和text都會獲取孩子(孩子的孩子的孩子....)中的內容,
其中text會忽略標籤只獲取文字,
html則把元素中所有的內容當作文字即使時標籤
再說三個函式來設定內容
設定內容的時候我總感覺是和獲取的時候相反,
獲取時html不識別標籤, text識別並跳過, 而設定時是html識別標籤可以增加標籤, text不識別會被當作文字
- html就是你可以新增像<a></a>、<p></p>等標記
- text只能寫文字如果寫了上面的標記則會以文字形式輸出
- val是屬性,只有有該屬性的物件才能呼叫(表單元素)
<script src="jquery.js"></script>
<div id="div1">
</div>
<script>
$("#div1").html("<span>我是span的文字</span>");
</script>
可以看到上邊html()成功添加了一個span子元素,我們再試試text能不能成功
<script src="jquery.js"></script> <div id="div1"> </div> <script> $("#div1").text("<span>我是span的文字</span>"); </script>
可以看到<span>標籤被當作文字了, 右圖的<span>是黑色的, 不是子元素
再試試設定val
<script src="jquery.js"></script>
<input type="text" id="input1" value="這是一個input標籤">
<script>
$("#input1").val("我是value");
</script>
修改成功!