<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr和prop方法练习</title>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(function () {
//1.给按钮添加点击事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick=function () {
//2,获取输入框的内容
var input =document.getElementsByTagName("input")[0];
//修改img的src属性节点的值
var text=input.value;
$("img").attr("src",text)
/* $("img").prop("src",text)*/
}
})
</script>
</head>
<body>
<input type="text">
<button>切换图片</button>
<br>
<br>
<br>
<br>
<br>
<img src="https://img.alicdn.com/tfs/TB1ECqoghz1gK0jSZSgXXavwpXa-520-280.jpg_q90_.webp">
</body>
</html>