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