<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.0.0自测htmlvaltext区别</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>
function btnClick(){
console.log("1:" + $(\'#htmlId1\').html())//成功取值
console.log("2:" + $(\'#htmlId1\').val())//无法取值
console.log("3:" + $(\'#htmlId1\').text())//成功取值
/* $(\'#htmlId2\').html(\'htmlId2\')//成功赋值
$(\'#htmlId3\').val(\'htmlId3\')//无法赋值 ok
$(\'#htmlId4\').text(\'htmlId4\')//成功赋值*/
//div元素使用html或text取值赋值均可，使用val无法取值和赋值
console.log("4:" + $(\'#input1\').html())//无法取值
console.log("5:" + $(\'#input1\').val())//成功取值
console.log("6:" + $(\'#input1\').text())//无法取值
/* $(\'#input2\').html(\'input2\')//无法赋值
$(\'#input3\').val(\'input3\')//成功赋值 ok
$(\'#input4\').text(\'input4\')//无法赋值*/
//input元素使用val取值赋值均可，无法使用html或text取值赋值
console.log("7:" + $(\'p\').html())//返回第一个p
console.log("8:" + $(\'p\').val())//返回空
console.log("9:" + $(\'p\').text())//返回如下：所有
// $(\'p\').html(\'p4\')//三个p均赋值为p4
// $(\'p\').val(\'p4\')//三个p均没有赋值为p4
// $(\'p\').text(\'p4\')//三个p均赋值为p4
// p元素，html和text均把所有的p赋值，val无法给p赋值
}
//p1
//p2
//p3
//p元素，html返回第一个p的值，val返回空，text返回所有p元素的值
// $(\'p\').html(\'p4\')//三个p均赋值为p4
// $(\'p\').val(\'p4\')//三个p均没有赋值为p4
// $(\'p\').text(\'p4\')//三个p均赋值为p4
//p元素，html和text均把所有的p赋值，val无法给p赋值
</script>
</head>
<body>
<div>
<div id="htmlId1">htmlId1</div>
<div id="htmlId2"></div>
<div id="htmlId3"></div>
<div id="htmlId4"></div>
<input id="input1" value="input1"/>
<input id="input2"/>
<input id="input3"/>
<input id="input4"/>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<button onclick="btnClick()"></button>
</div>
</body>
</html>
关于三者的区别
1. .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。