简介
q6 是一个可爱的 JS 工具库，其能够帮助开发者快速实现元素的样式，动画和事件。q6 中集成了丰富的 DOM 操作 API，使得开发者可以更加简单快捷地处理 DOM，并且支持单元测试。
安装 q6
安装 q6 的方式十分简单，只需在命令行输入以下命令：
npm install q6
即可安装最新版本的 q6
q6 基本使用
q6 主要有以下模块：
event模块
- $on(el, type, fn, context)：给一个 DOM 节点绑定事件
- $off(el, type, fn, context)：解绑一个 DOM 节点绑定的事件
- $once(el, type, fn, context)：给一个 DOM 节点绑定只触发一次的事件
- $emit(el, event, data = {})：派发事件
dom模块
- $$(selector, context = document)：选择器查询一个元素
- $create(tagName, attrs = {}, children)：创建一个 DOM 元素
- $add(el, target, count)：在 DOM 树中插入一个元素
- $remove(el)：移除一个 DOM 元素
- $attr(el, attr, value)：设置/获取元素属性
- $css(el, props, value)：设置/获取元素样式
- $text(el, text)：设置/获取元素文本
- $html(el, html)：设置/获取元素 html
- $offset(el)：获取元素在文档中的位置
- $position(el)：获取元素相对于其父元素的位置
- $scroll(el, top, left)：设置/获取元素的滚动位置
- $width(el)：获取元素宽度
- $height(el)：获取元素高度
- $hide(el)：隐藏元素
- $show(el)：显示元素
animate模块
- $animate(el, props, duration, ease, delay)：为元素添加动画
- $stopanimate(el)：停止元素动画
- $isanimating(el)：判断元素是否处于动画状态
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
-------
---- -
------ ------
------- ------
----------------- ----
-
--------
-------
------
---- ---------------
------- --------------------------------------------------------------------
--------
--- --- - -----------
--- ------ - -------------
------------- -
---- ---------- - ----
----- ----------- - ----
------ ----
------- ---
-- ----- ---------------
---------
-------
-------指导意义
- q6 可以帮助前端开发者更加快速地处理 DOM，省去了很多不必要的代码。
- 学会使用 q6 可以提高开发效率，快速实现项目要求的效果。
- q6 同时也支持单元测试，可提高开发质量，减少BUG的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055adf81e8991b448d8858