背景
在前端开发中，我们经常需要通过 JavaScript 操作 DOM 元素，进行诸如查询元素，修改元素属性，监听事件等常见操作。为了方便开发者进行这些操作，我们可以利用一个开源工具包，即 npm 包 win-query-utils。
win-query-utils 简介
win-query-utils 是一个小而美的工具包，提供了小清新的 DOM 操作 API，并关注了性能和可用性。你可以在 Web 开发中使用它来实现代码的高复用性和低耦合度，也可以用它来进行对 DOM 的高效操作。
安装
你可以通过 npm 来安装 win-query-utils。
--- ------- --------------- ------
使用方法
- 导入模块
------ -------- ---- ------------------
- 静态方法
win-query-utils 把所有的静态方法挂载在一个对象上（
winQuery），也就是前面我们导入的win-query-utils模块中。下面就来介绍其中一些常用的静态方法。
1. .qs
qs(selector: string, startNode?: HTMLElement | Document | null | undefined)
用于通过 CSS 选择器查找单个元素。
参数说明：
selector：需要查找的元素的 CSS 选择器startNode：开始查找的节点，支持传入指定节点，如果不传则从document开始查找
示例代码：
----- --- - ---------------------
2. .qsa
qsa(selector: string, startNode?: HTMLElement | Document | null | undefined)
用于通过 CSS 选择器查找多个元素。
参数说明：
selector：需要查找的元素的 CSS 选择器startNode：开始查找的节点，支持传入指定节点，如果不传则从document开始查找
示例代码：
----- ---- - -------------------
3. .on
on(el: HTMLElement | Document | Window | string, type: string | string[], handler: EventListenerOrEventListenerObject, useCapture?: boolean)
用于给指定元素添加事件监听器。
参数说明：
el：需要添加监听器的元素，支持传入指定节点type：需要添加的事件类型，可以传入单个或多个事件类型handler：事件处理函数，可以是函数或函数列表useCapture：是否开启捕获模式
示例代码：
-------------------- -------- --- -- -
----------------------
---4. .off
off(el: HTMLElement | Document | Window | string, type: string | string[], handler: EventListenerOrEventListenerObject, useCapture?: boolean)
用于移除指定元素的事件监听器。
参数说明：
el：需要移除监听器的元素，支持传入指定节点type：需要移除的事件类型，可以传入单个或多个事件类型handler：需要移除的事件处理函数，可以是函数或函数列表useCapture：是否开启捕获模式
示例代码：
----- -- - -- -- - ----------------------- -- -------------------- -------- ---- --------------------- -------- ----
5. .addClass
addClass(el: HTMLElement | HTMLElement[], className: string)
用于给指定元素添加 class。
参数说明：
el：需要添加 class 的元素，支持传入 DOM 节点或节点数组className：待添加的 class 名称
示例代码：
---------------------- ----------
6. .removeClass
removeClass(el: HTMLElement | HTMLElement[], className: string)
用于从指定元素中移除 class。
参数说明：
el：需要移除 class 的元素，支持传入 DOM 节点或节点数组className：待移除的 class 名称
示例代码：
------------------------- ----------
7. .hasClass
hasClass(el: HTMLElement, className: string)
用于判断指定元素是否包含指定的 class。
参数说明：
el：需要判断的元素className：待判断的 class 名称
示例代码：
---------------------- ----------
8. .toggleClass
toggleClass(el: HTMLElement, className: string)
用于给指定元素切换 class。
参数说明：
el：需要切换 class 的元素className：待切换的 class 名称
示例代码：
------------------------- ----------
总结
以上就是 win-query-utils 的基本用法和相关 API 的介绍，包括 qs，qsa，on，off，addClass，removeClass，hasClass 和 toggleClass 等常用方法。使用工具包可以提高开发的效率和质量，同时也可以让我们的代码更加简洁、清晰和易于维护。感谢大家阅读本篇文章，希望对大家有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005523d81e8991b448cfc5b