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($testDiv.html());// 打印结果:a<p> b</p> c
console.info($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(这是第一个表单元素的值)
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值嘛。
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值