jquery----text()、html() 以及 val()

本篇介绍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>

修改成功!