今天遇到一个关于脚本加载的问题。
示例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文本加载完之后才进行加载。