在前端应用开发中，我们经常会使用各种 npm 包来实现某些功能，如图形可视化、动画效果、表单操作等。其中一个非常实用的 npm 包是 canela（https://npmjs.com/package/canela），它是一个轻量级的函数库，专门用于操作 DOM 元素。
在本文中，我们将介绍 canela 的常见用法和示例代码，帮助大家快速学习和掌握该库的使用方法。
安装 canela
在使用 canela 之前，需要先安装它。我们可以通过 npm 或 yarn 进行安装，命令如下：
npm install canela # 或者 yarn add canela
安装完成后，我们就可以在项目中导入 canela：
import { $, addClass, removeClass } from 'canela';常见用法
canela 提供了一系列操作 DOM 元素的函数，可以帮助我们快速完成各种页面交互效果。下面是一些常见的用法：
1. 选择元素
可以用 $ 函数选择元素。它的使用方法与 jQuery 中的 $ 函数类似。
const elem = $('.className');
// 选择多个元素
const elems = $('.className, .otherClass');2. 添加或删除类名
可以使用 addClass 函数添加类名、使用 removeClass 函数删除类名。
addClass(elem, 'active'); removeClass(elem, 'active');
3. 显示或隐藏元素
可以使用 show 函数显示元素、使用 hide 函数隐藏元素。
show(elem); hide(elem);
4. 获取或设置属性
可以使用 attr 函数获取或设置元素属性的值。
// 获取属性值 const value = attr(elem, 'data-value'); // 设置属性值 attr(elem, 'data-value', '123');
5. 监听事件
可以使用 on 函数监听元素事件。
on(elem, 'click', () => {
console.log('clicked');
});示例代码
下面是一个示例代码，展示了 canela 的一些用法。在这个示例代码中，当用户点击按钮时，页面中的元素会被添加或删除类名，实现页面交互效果。
<!-- HTML 结构 --> <button id="btn">Toggle class</button> <div class="box">Hello World</div>
-- -------------------- ---- -------
-- -- --
------ - -- --------- ------------ -- - ---- ---------
----- --- - ----------
----- --- - ----------
-- --------
------- -------- -- -- -
-- -------------- ---------- -
---------------- ----------
- ---- -
------------- ----------
-
---结论
通过本文，我们详细介绍了 canela 的常见用法和示例代码，希望对大家有所帮助。canela 是一个非常实用的轻量级函数库，可以帮助我们快速完成页面交互效果。在实际开发中，我们可以灵活运用 canela 提供的函数，实现自己想要的页面效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c92ccdc64669dde5a0b