jQuery中text() val()和html()的區別實例詳解

2019-11-20 09:35:13

字體：大中小

來源：轉載

供稿：網友

簡單的說：html()和text()的區別主要在于是否包含標簽。而val()針對的是表單元素。

但是有時還是不是那么太清晰。

html(),val(),text()都分為有參和無參。

舉例說明它們的不同之處：

html()在沒有參數的情況下，取得第一個匹配元素的內容。必須要注意的是，即使匹配多個，也只能取得匹配的第一個元素。
如：

<body><p>你選中這段文字后，看看它們的文本顏色和背景色，就能明白::selection的作用。</p><h3>選中下面的文字，看看它的顏色</h3><h3>選中下面的文字，看看它的顏色</h3><h3>選中下面的文字，看看它的顏色</h3><input type="text" value="aaa"></body></html><script src="../js/jquery-1.11.2.min.js"></script><script>var con = $("p").nextAll("h3");console.log(con.html());</script>

此處的con匹配的3個h3元素，但是只會打印出第一個h3的內容。

如果我們此處換成text();那么會打印出三個h3的內容。

如果帶參數的話，con.html(“aaa”);和con.text(“aaa”);效果一樣，都能改變3個h3的內容。

不過如果con.html("<span>'aaa'</span>")和con.text("<span>'aaa'</span>");使用html會將span解析為標簽，而text,則會將作為字符串插入。

<body><p>你選中這段文字后，看看它們的文本顏色和背景色，就能明白::selection的作用。</p><h3><span>選中下面的文字，看看它的顏色</span></h3><h3><span>選中下面的文字，看看它的顏色</span></h3><input type="text" value="aaa"></body></html><script src="../js/jquery-1.11.2.min.js"></script><script>var con = $("p").nextAll("h3");console.log(con.html());console.log(con.text());</script>

這里寫圖片描述

html()會將標簽也取出，但是text()只會獲取文本部分。

再看val();

<body><input type="text" value="aaa"/><input type="button" value="按鈕"/>選擇性別：<input type="radio" name="sex" checked value="男"><label>男</label><input type="radio" name="sex" value="女"><label>女</label><br><br>選擇地區：<select style="width: 150px"><option value="1">上海</option><option value="2">杭州</option><option value="3">南京</option><option value="4">麗江</option></select></body></html><script src="../js/jquery-1.11.2.min.js"></script><script>$(function () {console.log($("input:text").val());console.log($("input:button").val());console.log($("input[name='sex']:checked").val());console.log($("select option:selected").text());});</script>

這里寫圖片描述