.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> b</…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(
t
e
s
t
.
v
a
l
(
)
)
;
/
/
打
印
结
果
:
1
(
这
是
第
一
个
表
单
元
素
的
值
)
<
b
r
>
c
o
n
s
o
l
e
.
i
n
f
o
(
test.val());// 打印结果:1(这是第一个表单元素的值)<br> 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值嘛。
js中html,text,val 比较
最新推荐文章于 2024-07-18 09:50:22 发布