webstorm例子专题 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-初始jQuery</title>

 <style>
    *{
      margin: 0;
      padding: 0;
    }
   div{
     width: 100px;
     height: 100px;
     border: 1px solid #000;
   }
 </style>
  <script src="../js/jquery-1.12.4.js"></script>

  <script>
      window.onload=function (ev) {
        //1.利用原生JS查找DOM元素
        var div1=document.getElementsByTagName("div")[0];
        var div2=document.getElementsByClassName("box1")[0];
        var div3=document.getElementById("box2");
       /* console.log(div1);
        console.log(div2);
        console.log(div3);*/
       /*div1.style.backgroundColor="red";
       div2.style.backgroundColor="blue";
       div3.style.backgroundColor="yellow";*/
      }
    //2.  利用jQuery
    $(function () {
      var $div1=$("div");
      var $div2=$(".box1");
      var $div3=$("#box2");
     /* console.log($div1);
      console.log($div2);
      console.log($div3);*/
     $div1.css({
       background: "red",
       width:"200px",
       height:"200px"
     });
      $div2.css({
        background: "blue"
      });
      $div3.css({
        background: "yellow"
      });
    });
  </script>

</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>
</body>
</html>
posted @ 2020-02-29 20:19  动起来mygod  阅读(501)  评论(0)    收藏  举报