​​问题回顾​​

​​JS的入口函数​​

​​JQuery的入口函数​​

​​JQuery入口函数与JS的区别​​

​​书写简洁​​

​​JS入口函数的定义多次只能生效一次​​

​​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>
        var myid = document.getElementById("myid");
        console.log(myid);
        myid.innerHTML = "改变你的内容";
    </script>

</head>
<body>
    <div id="myid">
        入口函数例子
    </div>

</body>
</html>


访问

JQuery入口函数与JS的区别_JQuery



报错是因为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入口函数与JS的区别_区别_02



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的区别_html_03



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>


访问，发现只有最后一次定义生效，因为最后的总会把前面的覆盖

JQuery入口函数与JS的区别_JQuery_04



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>


访问，定义了2次，2次都生效

JQuery入口函数与JS的区别_入口函数_05