一、attr、val、prop方法示例代码(可以直接测试)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试val、attr、prop</title>
</head>
<body>
昵称:<input type="text" id="userName" value="德玛西亚">
<br>
<input type="button" value="注册" id="btn">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script>
$('#btn').click(function () {
let attr = $('#userName').attr("value");
let prop = $('#userName').prop("value");
let val = $('#userName').val();
console.log("输出attr="+attr);
console.log("输出prop="+prop);
console.log("输出val="+val);
})
</script>
</body>
</html>
1.直接运行上述代码
- 当我们直接运行时,浏览器控制台什么都没有输出,因为我们还没有点击注册按钮,没有触发点击事件。
- 页面图示
- 从上图中可以看出:昵称的value值默认的出现在文本输入框中。该功能可以出现在当用户修改昵称时,可以将之前的昵称值出现在文本输入框中,增加用户体验
2.点击注册按钮
- 我们将昵称中输入框值改变,填写为“滑板鞋”,打开浏览器控制台,看输出情况
- 页面图示
3.将value="德玛西亚"删除,点击注册按钮
- 跟上面一样,唯一不同的是将代码中的value="德玛西亚"给删除,再次运行
- 页面图示
- 刷新页面时,可以看到输入框中的默认值没有了
- 我们现在什么都不输入,点击注册按钮,浏览器控制台输出图示
- 可以发现attr输出为undefined,其他两个什么都没有输出为:空白
- 我们在输入框输入“滑板鞋”,浏览器控制台图示
- 可以看到:attr输出为undefined,prop和val输出为滑板鞋
4.总结
- prop()和val()都能获取到文本框的实际value值,而attr()获取的则始终为文档结构中的value的属性值,与文本框实际输入值无关,并不会变化
- val()方法一般用在input标签上,有些人写input标签,不写value属性,但都会有输入框
手机:<input type="text" id="phone">
二、html方法示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试html</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn">改变 p 元素的内容</button>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script>
$('.btn').click(function () {
$('p').html("Hello <span style=\"color: red\">你好</span>")
})
</script>
</body>
</html>
1.执行上诉代码
- 页面显示
- 点击按钮时显示的页面
2.总结
- html() 方法返回或设置被选元素的内容 (inner HTML)。inner HTML指的是html里面的代码
- 如果该方法未设置参数,则返回被选元素的当前内容(p标签元素里面的内容)。
$('p').html();
如果对你有帮助,不如点个赞,也算是支持一下0.0
若有不正之处,请多多谅解并欢迎批评指正,不甚感激