03-jQuery和JS入口函数的区别

最新推荐文章于 2019-10-05 19:32:40 发布

原创最新推荐文章于 2019-10-05 19:32:40 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了原生JavaScript与jQuery中入口函数的差异，包括它们的执行时机、获取DOM元素的能力以及处理多个入口函数的方式。揭示了jQuery的$(document).ready()与window.onload的不同之处。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-jQuery和JS入口函数的区别</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script>
   /* window.onload = function () {
      //1.通过原生的JS入口函数可以拿到DOM元素
      var img = document.getElementsByTagName("img")[0];
      //console.log("img");
      //2.通过原生的JS入口函数可以拿到DOM元素的宽高
      var width = window.getComputedStyle(img).width;
      var height = window.getComputedStyle(img).height;
      // console.log(width);
      // console.log(height);
    }*/

    /*原生JS和jQuery入口函数加载模式不同
    原生JS会等到DOM元素加载完毕，并且图片也加载完毕后才会执行
    jQuery会等到DOM元素记载完毕，但图片没有加载完毕就会执行*/

    /*$(document).ready(function(){
      //1.通过jQuery入口函数可以拿到DOM元素
      // var $img = $('img')[0];  //两种写法
      var $img = $("img");
      console.log($img);
      //2.通过jQuery入口函数不可以拿到DOM元素的宽高
      var $width = $img.width();
      var $height = $img.height();
      console.log("jQuery",$width);
      console.log("jQuery",$height);
    });*/

    /* 1.原生JS如果编写多个入口函数，后面编写的会覆盖前面编写的入口函数
    ** 2.jQuery中编写多个入口函数，后面的不会覆盖前面
     */

   /* window.onload = function () {
      alert("woaini1");
    }
   window.onload = function () {
     alert("woaini2");
   }*/
   $(document).ready(function () {
     alert("hello1");
   });
   $(document).ready(function () {
     alert("hello2");
   });
  </script>
</head>
<body>
<img src="http://pic28.photophoto.cn/20130818/0020033143720852_b.jpg" alt="">
</body>
</html>