什么是库

从函数的学习中，我们可以发现，函数最大的好处或者说作用就在于“代码的复用”。随着学习的深入会有一些常用的函数可以将其整理在一起，形成自己的库，比如在 DOM 阶段封装的 tools.js，或者是使用别人已经封装好的一系列函数库比如 lodash，在明确函数三要素后，可以直接调用。

简介

jQuery 是 2006 年推出的 js 库，是高效、精简并且功能丰富的 JavaScript 工具库，不是用来替代原生 js 的，只是在原生的基础上进行了封装，简化 js 的书写，用于 DOM 部分文档的遍历、操作、事件的处理、动画、AJAX 等，提高开发效率。

关联

  1. 官网 中文文档
  2. CDN
    1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    对比原生以及核心方法

    获取元素：
// 假设当前存在 <div id="box"></div>
let div = document.getElementById('box');

// jquery
$('#box');// 以 id 获取
$('.box');// 以 class 获取
$('ul>li');// 以关系获取

// 当然了，在 HTML5 以后有了 querySelector() 使得原生 js 对于元素节点的获取也非常方便了

假设当前存在需求：将所有 li 的 color 变成红色：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<script>
  // 原生语法
    const lis = document.querySelectorAll('li');// 获取所有li
  for(let item of lis){
    item.style.color = 'red';
  }

  // jquery 语法
    $('li').css('color', 'red');
</script>

一个 查看 jquery 选择器 的链接

特点

  1. 轻量级，作为一个较为完整的工具库，文件体积较小
  2. 强大的选择器
  3. 出色的 DOM 操作的封装
  4. 兼容性强，在 1.X 版本依旧在兼容低版本 IE8-，在 2.X 和 3.X 版本不再考虑 IE 低版本
  5. 链式操作
  6. 丰富的插件支持且开源，基于 jq 开发的插件，可以使用更多功能的扩充插件
  7. 完善的 Ajax
  8. 可靠的事件处理机制
  9. 开源

    核心方法

    更多核心方法请查阅官方文档，这里只提及部分。

jQuery() 等价于 $()，获取某个节点元素

let div = document.getElementById('box'); // 原生
$('#box') // jquery 对象

两种获取元素的方法，使用方法不可混用，就好比

// 该节点通过 jquer 方式获取到属于 jquery 对象，就只能使用 jquery 的方法
$('#box').css('color', 'red'); 

// 原生的元素节点，混用了 jquery 的方法
div.css('color', 'red'); 

// 同样，jquery 对象也不能使用原生的方法，比如原生的 .innerHTML = ''
div.innerHTML = '<p>123</p>'; // 原生
$('#box').html('<p>123</p>'); // jquery

jquery 对象转为 DOM 对象（比较少用）

使用 get() 方法

$('#box').get(0); // 转为原生 DOM 对象后就可以使用原生方法了
$('#box').get(0).innerHTML = '<p>123</p>';
$('#box')[0].innerHTML = '<p>123</p>';

其他内容请查阅官方文档。