js jquery的加载问题

最新推荐文章于 2020-11-19 18:27:23 发布

treemer

最新推荐文章于 2020-11-19 18:27:23 发布

阅读量383

点赞数

文章标签：脚本

本文链接：https://blog.csdn.net/treemer/article/details/49491093

版权

今天遇到一个关于脚本加载的问题。

示例1：

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Test for JQ on function</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
<span style="background-color: rgb(0, 204, 204);">$(document).ready(function() {
    $("#testButton").click(function(){
        alert("button clicked");
    });
});    </span>
</script>
</head>
<body>
    <input type="button" id="testButton" value="test"/>
</body>
</html>

解释：

网页加载的时候是从上到下进行加载的，$(document).ready(function() 的时候，会去先加载网页内容，最后在加载ready function里面的js脚本。

示例2：

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Test for JQ on function</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
<span style="background-color: rgb(0, 204, 204);">$(document).ready(function() {
	
});	
$("#testButton").click(function(){
        alert("button clicked");
});</span>
</script>
</head>
<body>
	<input type="button" id="testButton" value="test"/>
</body>
</html>

解释：

这次因为click 方法病没有放在ready function里面，所以按照从上到下原则，click方法将在网页元素加载好之前加载，所以并不会绑定上，所以click事件无效。

示例3：

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Test for JQ on function</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>

</head>
<body>
	<input type="button" id="testButton" value="test"/>
<script>
<span style="background-color: rgb(0, 204, 204);">$(document).ready(function() {
});	
$("#testButton").click(function(){
	alert("button clicked");
});</span>
</script>
</body>
</html>

解释：

这次js代码片段在html文本之后，所以按照从上到下的加载原则，相当于htnl文本加载完之后在加载js，所以click事件有效。

总结：

ready function相当于强制要求，在其之中的代码要等到页面加载完之后在进行加载和事件绑定，但是如果将脚本放在html文本后面则相当于等到html文本加载完之后才进行加载。

treemer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js jquery的加载问题

今天遇到一个关于脚本加载的问题。示例1：Test for JQ on function$(document).ready(function() { $("#testButton").click(function(){ alert("button clicked"); });}); 解释：网页加载的时候
复制链接

扫一扫