js中html，text，val 比较

.html()用为读取和修改元素的HTML标签，对应js中的innerHTML

 .html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素



.text()用来读取或修改元素的纯文本内容，对应js中的innerText

text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上

关于html()和text()的区别，试举一例。

e.g.

html部分：

<div id=“testDiv”>a<p> b</p> c</div><!-- b和c前都有一个空格 -->

js部分：

console.info(KaTeX parse error: Expected 'EOF', got '&' at position 26: …ml());// 打印结果：a&̲lt;p&gt; b&lt;/…testDiv.text());// 打印结果：a b c

可见，text()只打印文本内容，而html()把所选标签范围内的所有内容都打印出来了。而且text()和html()都可以把空格捕获。



.val()用来读取或修改表单元素的value值

.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上



所谓“表单元素”，即用于表单提交数据的标签，包括<input>、<select>、<textarea>、<button>、<option>等等。



对于有多个元素情况：

.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元

素的文本内容。

举个例子：

html部分：

<input>

    <input type=“text” class=“test” value=“1”/>

    <input type=“text” class=“test” value=“2”/>

    <input type=“text” class=“test” value=“3”/>

        <option value=“1”>op1</option>

        <option value=“2”>op2</option>

        <option value=“3”>op3</option>
</select>

    <div class=“test”>m</div>

    <div class=“test”>m</div>

</form>

js部分：

console.info($test.val());//打印结果：1（这是第一个表单元素的值）<br>console.info($test.text());// 打印结果：
   // op1
   //        op2
   //        op3
   //    mm

console.info($test.html());// 打印结果：空

.val():打印了第一个表单元素

.text()：打印了所有文本，包括空格、换行

html():没有打印内容。因为它捕获到的是多个对象的第一个元素【<input type=“text” class=“test” value=“1”/>】，但是这个标签没有innerHTML内容，所以打印为空。

如果把下面【<div class=“test”>m</div>】放到form的第一个下级元素，那么html()就可以打印出m了。而这样的话，.val()就会打印不出东西了，因为div里没有value值嘛。