一、什么是 sidelifter？
sidelifter 是一款可以帮助前端开发者在不引入 jQuery 等库的情况下实现 DOM 操作的 npm 包。它提供了一组轻量级的 API，可以用来选取 DOM 元素、修改元素属性、绑定事件等操作。
二、如何安装 sidelifter？
首先，你需要确保已经安装了 Node.js，然后使用 npm 命令安装 sidelifter：
npm install sidelifter --save
三、如何使用 sidelifter？
1. 选取元素
使用 $() 函数来选取元素，该函数接受元素的 ID、class、标签名等作为参数，返回相应的元素对象。例如：
const element = $('div'); // 选取第一个 div 元素
const elementList = $('.class'); // 选取所有 class 为 class 的元素2. 修改属性
可以使用 attr() 函数来修改元素的属性。该函数接受两个参数，第一个为要修改的属性名，第二个为要修改的属性值。例如：
$('img').attr('src', 'newSrc.png'); // 修改所有 img 标签的 src 属性为 newSrc.png3. 绑定事件
使用 on() 函数来绑定事件。该函数接受两个参数，第一个为要绑定的事件名，第二个为事件处理函数。例如：
$('button').on('click', () => {
console.log('按钮被点击了');
});4. 链式调用
sidelifter 的 API 可以进行链式调用，例如：
$('div')
.attr('class', 'newClass')
.on('click', () => {
console.log('div 元素被点击了');
});四、示例代码
下面是一个使用 sidelifter 的示例代码，该代码选取了所有 class 为 menu 的元素，为它们添加了鼠标悬停事件，并在鼠标经过时修改元素的背景色和字体颜色：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------------- ----------
-------
----- -
----------------- -----
------ -----
-------- -----
------- ---- --
-------------- ----
-
--------
-------
------
-------------- -------
---- ---------------- -------
---- ---------------- -------
---- ---------------- -------
------- --------------------------------------------------------------
--------
----------
---------------- -------- -- -
-------------
------------------- -------
------ -------
------- ----------
---
--
--------------- -------- -- -
-------------
------------------- -------
------ -------
---
---
---------
-------
-------五、总结
通过本文的学习，我们了解了 sidelifter 的基本用法，并实现了一个简单的示例。sidelifter 的 API 虽然比较简单，但在一些简单的应用场景下却是非常实用的。同时，学习 sidelifter 还可以帮助我们更深入地理解 jQuery 等库的实现原理，提高我们的前端开发技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb713b5cbfe1ea061171f