<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$("input#btn1").click(function(){
alert("点击了按钮");
})
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮"/>
</body>
</html>如上代码，发现点击按钮却不会弹框，于是在网上查找了资料，发现了原因。
一个网页（.html）,是从上到下加载的，如果<script>标签对放在<body>标签对前面，当加载到<script>标签对里面的代码时，<body>标签对里的内容还未加载，$("input#btn1")就不能找到其对应的元素。
解决方法：
1.将<script>标签对放在<body>标签对后面。
2.将代码写到$(document).ready(function)里面，将函数绑定到文档的就绪事件（当文档完成加载时）。
如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("input#btn1").click(function(){
alert("点击了按钮");
})
})
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮"/>
</body>
</html>这样的话，$("input#btn1")就能找到其对应的元素，因为写到$(document).ready(function)里面的代码，会在整个网页加载完毕后才会执行。比如这个例子，就能弹框了。
