昨天学习：jquery中ready多种写法，与onload，DOMContentLoaded方法的区别，以及入门

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jq.js"></script>
  <script>
    console.log(jQuery);  //一个对象，里面包含了我们所有用到的属性和方法
    console.log($); //jQuery另一种写法 
    console.log($ === jQuery);
    // $不仅是一个对象，也是一个函数对象，$()相当于执行$函数
    // 重点在传参，传不同的参，$()整体发挥的作用不同
    // $对象上的ready方法作用执行回调函数
    $(document).ready(function(){
    
    
      var wrapper = document.getElementById("wrapper");
      console.log(wrapper);
    })
    // ready方法多种写法
    $().ready(function(){
    
    
      var wrapper = document.getElementById("wrapper");
      console.log(wrapper);
    })

    $(function(){
    
    
      var wrapper = document.getElementById("wrapper");
      console.log(wrapper);
    })

  </script>
  <script>
    function obtainDom(){
    
    
      var wrapper = document.getElementById("wrapper");
      // 此时获取不到dom元素，因为js代码写在html代码之前，此时dom树还没完全形成。
      console.log(wrapper);
    }
    obtainDom()

    // window.onload() 方法用于当 HTML 文档加载渲染完毕后，形成完整dom树，立刻执行某个回调函数。
    window.onload = function newObtainDom(){
    
    
      var wrapper = document.getElementById("wrapper");
      console.log(wrapper);
    }
  </script>
  <script>
    // window.onload必须等待网页全部加载完毕（包括图片资源请求回来了），才执行
    // ready只需要等待dom结构加载完毕就可以执行
    // DOMContentLoaded只需要等待dom结构加载完毕就可以执行,但是因为ready方法dom结构加载完毕后，
    // 又干了一些其他的事，所以就比DOMContentLoaded慢
    $(document).ready(function(){
    
    
      console.log("ready完成了");
    })
    window.onload = function(){
    
    
      console.log("onload完成了")
    }
    document.addEventListener("DOMContentLoaded",function(){
    
    
      console.log("dom内容加载完毕")
    })
    // onload执行次数，只能执行一次，执行第二次时覆盖第一次
    // ready可以多次执行，不会覆盖
    $(document).ready(function(){
    
    
      console.log("新的ready完成了");
    })
    window.onload = function(){
    
    
      console.log("新的onload完成了")
    }
  </script>
</head>
<body>
  <button id="btn">按钮</button>
  <div id="wrapper">wrapper</div>
  <!-- 这张图片请求不回来的，onload会等待图片加载，等了很久，还没请求回来，才会报错，结束请求执行后续流程
        ready不会等待图片加载，所以ready会先执行，onload后执行 -->
  <img src="http://www.google.com/1.jpg" alt="">
  <script>
    // var btn = document.getElementById("btn");
    // var wrapper = document.getElementById("wrapper")
    // btn.onclick = function(){
    
    
    //     var oDiv = document.createElement("div");
    //     oDiv.style.width = "100px";
    //     oDiv.style.height = "100px";
    //     oDiv.style.backgroundColor = "red";
    //     document.body.appendChild(oDiv);
    // }

    // click(fn) === .onclick = function(){}
    // $("div") === 创建div
    // 属性值 === 引用加单位
    // background 不用写成backgroundColor
    // var newBtn = $("#btn");
    // newBtn.onclick = function(){
    
    
    //   const oDiv = $("<div></div>").css({
    
    
    //     width:100,
    //     height:100,
    //     backgroundColor:red,
    //   }).appendTo(document.body);
    // }

    $("#btn").click(function(){
    
    
      $("<div />").css({
    
    
        width:"100px",
        height:"100px",
        background:"red",
      }).appendTo(document.body)
    })
  </script>
</body>
</html>
昨天学习：jquery中ready多种写法，与onload，DOMContentLoaded方法的区别，以及入门

猜你喜欢
