JQuery入口函数与JS的区别

Arce

例子，比如下面的代码是一个典型的错误例子

<%@ 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>

[jQuery] JQuery入口函数与JS的区别

相关帖子

0x00000024蓝屏代码修复方法

域名解析错误连不上网解决方法

未能恢复iphone 发生未知错误3194解决方法

502错误原因修复

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

uniapp & vue 父子、子父、兄弟组件之间的传值

文件对比工具/Beyond Compare

php实现超简的分页功能

PHP版贪吃蛇小游戏

Arce LV4