js jquery的加载问题

来源：互联网发布：labelview条形码软件编辑：程序博客网时间：2024/05/12 17:06

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

示例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文本加载完之后才进行加载。

0 0