JQuery入口函数与JS的区别
例子，比如下面的代码是一个典型的错误例子<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>入口函数</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var myid = document.getElementById("myid");
console.log(myid);
myid.innerHTML = "改变你的内容";
</script>
</head>
<body>
<div id="myid">
入口函数例子
</div>
</body>
</html>
报错是因为myid对象是null，命名有id为myid的这个div，那为何document.getElementById("myid");得出的结果是null
因为我们的页面是从上往下加载的，而我们的js代码写在了div上面，所以当通过这个di获取div的时候，我们的div还没有存在，所以是空的
JS的入口函数
针对上面出现的问题，那我就想把js代码写在上面，怎么办
JS提供了一个入口函数，就是等页面加载完后才执行的函数，window.onload
我们把代码调整下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>入口函数</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
window.onload = function () {
var myid = document.getElementById("myid");
console.log(myid);
myid.innerHTML = "改变你的内容";
};
</script>
</head>
<body>
<div id="myid">
入口函数例子
</div>
</body>
</html>
JQuery的入口函数
JQuery也提供了入口函数，$(function(){代码})
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>入口函数</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#myid").html("JQuery改变你的内容");
});
</script>
</head>
<body>
<div id="myid">
入口函数例子
</div>
</body>
</html>
JQuery入口函数与JS的区别
书写简洁
这个从上面的例子就已经明了
JS入口函数的定义多次只能生效一次
例子，定义多个JS入口函数
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>入口函数</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
window.onload = function () {
console.log("JS入口函数第1次定义")
}
window.onload = function () {
console.log("JS入口函数第2次定义")
}
</script>
</head>
<body>
<div id="myid">
入口函数例子
</div>
</body>
</html>
JQuerry入口函数的定义多次只能生效多次
例子，定义多个JQuerry入口函数
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>入口函数</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
console.log("JQuery入口函数第1次定义")
});
$(function () {
console.log("JQuery入口函数第2次定义")
});
</script>
</head>
<body>
<div id="myid">
入口函数例子
</div>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_13868384/3060762
页:
[1]