什么是库
从函数的学习中,我们可以发现,函数最大的好处或者说作用就在于“代码的复用”。随着学习的深入会有一些常用的函数可以将其整理在一起,形成自己的库,比如在 DOM 阶段封装的 tools.js,或者是使用别人已经封装好的一系列函数库比如 lodash,在明确函数三要素后,可以直接调用。
简介
jQuery 是 2006 年推出的 js 库,是高效、精简并且功能丰富的 JavaScript 工具库,不是用来替代原生 js 的,只是在原生的基础上进行了封装,简化 js 的书写,用于 DOM 部分文档的遍历、操作、事件的处理、动画、AJAX 等,提高开发效率。
关联
- 官网 中文文档
- CDN
<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 选择器 的链接
特点
- 轻量级,作为一个较为完整的工具库,文件体积较小
- 强大的选择器
- 出色的 DOM 操作的封装
- 兼容性强,在 1.X 版本依旧在兼容低版本 IE8-,在 2.X 和 3.X 版本不再考虑 IE 低版本
- 链式操作
- 丰富的插件支持且开源,基于 jq 开发的插件,可以使用更多功能的扩充插件
- 完善的 Ajax
- 可靠的事件处理机制
- 开源
核心方法
更多核心方法请查阅官方文档,这里只提及部分。
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>';
其他内容请查阅官方文档。