原生js入口函数
- 1
- 2
- 3
- 1
- 2
- 3
原生js函数入口函数是在文档加载完毕,而且图片资源加载完毕才开始执行
jquery入口函数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
jQuery的入口函数会在文档完毕,图片不加载就开始执行,如果操作图片资源,jquery会等待图片加载完毕执行
js和jquery入口函数的不同
区别一:个数及事件覆盖问题
- Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。
- jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。
区别二:执行时机不同
- Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
- jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>艾它社区</title>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/cids.js"></script>
</head>
<body>
<button id="btn1">点击我</button>
<div>我会变红的哦</div>
<button id="btn2">告警</button>
<button id="btn3">Notice</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>艾它社区</title>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/cids.js"></script>
</head>
<body>
<button id="btn1">点击我</button>
<div>我会变红的哦</div>
<button id="btn2">告警</button>
<button id="btn3">Notice</button>
</body>
</html>
(function($, window, document,undefined) {
function fun1() {
$("div").css("color", "red");
};
$(document).ready(function() {
$("#btn1").click(function() {
fun1();
});
})
})(jQuery, window, document);
function fun1() {
$("div").css("color", "red");
};
$(document).ready(function() {
$("#btn1").click(function() {
fun1();
});
})
})(jQuery, window, document);
$(function () {
function tellMsg() {
alert("Hello, Cids.");
};
$("#btn2").click(function() {
tellMsg();
});
});
function tellMsg() {
alert("Hello, Cids.");
};
$("#btn2").click(function() {
tellMsg();
});
});
$(window).ready(function () {
function tellMsg() {
alert("Hello, Notice.");
};
$("#btn3").click(function() {
tellMsg();
});
})
function tellMsg() {
alert("Hello, Notice.");
};
$("#btn3").click(function() {
tellMsg();
});
})