区别表
| jQuery方法 | 对应的JS属性 | 描述 | 对应代码 | jQuery代码浏览器输出 |
|---|---|---|---|---|
| text() | innerText | 获取所匹配元素的文本内容，包括子标签的文本内容，当不包括子标签本身。 | jQuery代码 |  |
| html() | innerHTML | 获取所匹配元素的内容，包括子标签的文本内容和子标签本身。 | jQuery代码 |  |
| val() | value | 获取所匹配元素的当前值，是标签中value属性的值，多用于表单input元素。 | jQuery代码 |  |
text()示例
jQuery代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div">DIV的文本内容</div>
<p><span>span元素</span>文本</p>
<input id="input" type="text" value="这是一个输入文本框">
<button id="button" value="按钮">点我</button>
<script type="text/javascript">
console.log($('#div').text());
console.log($('p').text());
console.log($('p span').text());
console.log($('#input').text());
console.log($('#button').text());
</script>
</body>
</html>
浏览器输出结果
总结
text()只获取标签的文本内容，即标签中间的那部分内容，如果标签里包含子标签，那么也将获取子标签的文本内容当不包括子标签本身。input类标签text()获取为空。与JavaScript的innerText属性功能相同。
原生JS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div">DIV的文本内容</div>
<p><span>span元素</span>文本</p>
<input id="input" type="text" value="这是一个输入文本框">
<button id="button" value="按钮">点我</button>
<script type="text/javascript">
console.log(document.getElementById("div").innerText);
console.log(document.getElementsByTagName("p")[0].innerText);
console.log(document.querySelector("p span").innerText);
console.log(document.getElementById("input").innerText);
console.log(document.getElementById("button").innerText);
</script>
</body>
</html>
html()示例
jQuery代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div">DIV的文本内容</div>
<p><span>span元素</span>文本</p>
<input id="input" type="text" value="这是一个输入文本框">
<button id="button" value="按钮">点我</button>
<script type="text/javascript">
console.log($('#div').html());
console.log($('p').html());
console.log($('p span').html());
console.log($('#input').html());
console.log($('#button').html());
</script>
</body>
</html>
浏览器输出效果
总结
html()被选元素的内容（包括标签），即如果标签里包含子标签，那么也将获取子标签本身和子标签中的内容。input类标签html()获取为空。与JavaScript的innerHTML属性功能相同。
原生JS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div">DIV的文本内容</div>
<p><span>span元素</span>文本</p>
<input id="input" type="text" value="这是一个输入文本框">
<button id="button" value="按钮">点我</button>
<script type="text/javascript">
console.log(document.getElementById("div").innerHTML);
console.log(document.getElementsByTagName("p")[0].innerHTML);
console.log(document.querySelector("p span").innerHTML);
console.log(document.getElementById("input").innerHTML);
console.log(document.getElementById("button").innerHTML);
</script>
</body>
</html>
val()示例
jQuery代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div">DIV的文本内容</div>
<p><span>span元素</span>文本</p>
<input id="input" type="text" value="这是一个输入文本框">
<button id="button" value="按钮">点我</button>
<script type="text/javascript">
console.log($('#div').val());
console.log($('p').val());
console.log($('p span').val());
console.log($('#input').val());
console.log($('#button').val());
</script>
</body>
</html>
浏览器输出结果
总结
val()返回或设置被选元素的值。元素的值是通过 value 属性设置的。因此该方法大多用于 input 元素，相当于JS的value属性。
原生JS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div">DIV的文本内容</div>
<p><span>span元素</span>文本</p>
<input id="input" type="text" value="这是一个输入文本框">
<button id="button" value="按钮">点我</button>
<script type="text/javascript">
console.log(document.getElementById("div").value);
console.log(document.getElementsByTagName("p")[0].value);
console.log(document.querySelector("p span").value);
console.log(document.getElementById("input").value);
console.log(document.getElementById("button").value);
</script>
</body>
</html>
浏览器输出略微有所不同
