本篇介绍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>
修改成功!