原生js和jQuery的区别

1. 原生JavaScript是一种基于ECMAScript规范的编程语言，而jQuery是基于JavaScript的一个库，它提供了一种更简洁、易用的语法来操作HTML文档、处理事件、执行动画等。

2. 原生JavaScript没有依赖任何外部库，而jQuery依赖于jQuery库。这意味着使用jQuery需要先引入jQuery库。

3. 原生JavaScript的代码通常比jQuery代码更冗长，因为它需要手动编写DOM操作、事件处理等功能。而jQuery代码则可以简化这些操作，使代码更简洁、易读。

4. 原生JavaScript的事件处理方式较为繁琐，需要为每个元素分别绑定事件处理函数。而jQuery提供了一种更简洁的方式来绑定事件处理函数，例如使用`.on()`方法。

5. jQuery提供了许多内置的动画效果，如淡入淡出、滑动等，而原生JavaScript则需要自己实现这些效果。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-jQuery的核心函数和核心对象.html</title>
  <!-- 
    1.jQuery核心函数
    简称:jQuery函数（$/jQuery）
    引入jQuery库以后，直接使用$/jQuery即可
    当函数用:$(params)
    当对象用的时候:$.each()
    2.jQuery核心对象
    简称:jQuery对象 $()
    得到jQuery对象：执行jQuery函数返回的就是jQuery对象
    使用jQuery对象:$obj.xxx()
   -->
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      // jQuery核心函数
      console.log($, typeof $);
      // jQuery核心对象
      console.log($(), $() instanceof Object);
    })
  </script>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-比较原生js和jQuery.html</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
  <!-- 需求 通过原生js和jQuery来获取到三个div 并且修改他们的背景颜色 -->
  <!-- 导入cdn -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <script>
    // JS原生DOM
    window.onload = function () {
      // 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);
      // 2.利用原生JS修改背景颜色
      // div1.style.backgroundColor = 'red'
      // div2.style.backgroundColor = 'yellow'
      // div3.style.backgroundColor = 'blue'
    }
    // jQuery
    $(document).ready(function () {
      // 1.通过jQuery来查找元素
      var $div1 = $('div:first')
      var $div2 = $('.box1')
      var $div3 = $('#box2')
      // console.log($div1);
      // console.log($div2);
      // console.log($div3);
      // 2.利用jQuery来修改背景颜色
      $div1.css({backgroundColor: 'red'})
      $div2.css({
        backgroundColor: 'yellow',
        width: '200px',
        height: '200px'
      })
      $div3.css({backgroundColor: 'blue'})
    })
  </script>
</head>
<body>
  <div></div>
  <div class="box1"></div>
  <div id="box2"></div>
</body>
</html>