jQuery 中DOM对象与js中DOM对象的区别与联系``````

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    // 入口函数
    jQuery(document).ready(function () {
      var box = document.getElementById('box');
      var classBoxs = document.getElementsByClassName('box');
      var divs = document.getElementsByTagName('div');

      // jQuery获取DOM返回得到永远是一个数组，数组中包含着合原生js中的DOM对象
      var jqBox = $('#box');
      var jqClassBoxs = $('.box');
      var jqDivs = $('div');

      console.log(box);
      console.log(jqBox);
      console.log('----------------------------');
      console.log(classBoxs);
      console.log(jqClassBoxs);
      console.log('----------------------------');
      console.log(divs);
      console.log(jqDivs);

      /*
      <div id="box"></div>
      jQuery.fn.init(1)
      ----------------------------
      HTMLCollection(2)
      jQuery.fn.init(2)
      ----------------------------
      HTMLCollection(4)
      jQuery.fn.init(4)
      */

      // 原生js中没有css()方法，设置css得使用 style对象
      // Uncaught TypeError: divs.css is not a function
      // divs.css({
      //   width: 100,
      //   height: 100,
      //   backgroundColor: 'red',
      //   margin: 10
      // });
      
      // jQuery通过css()设置样式
      // 不写单位默认 px
      // jqDivs.css({
      //   width: 100,
      //   height: 100,
      //   backgroundColor: 'red',
      //   margin: 10
      // });
      // 也可以写成：
      jqDivs.css({
        'width': '3em',
        'height': 100,
        'background-color': '#000',
        'margin': 10
      });
    })
  </script>
</head>
<body>
  <div></div>
  <div class="box"></div>
  <div id="box"></div>
  <div class="box"></div>
  <div"></div">
</body>
</html>