v-query 是一个基于 jQuery 的轻量级 DOM 操作库，它提供了方便易用的 API，可以减少我们在前端开发中的代码量和重复劳动，使我们能够更快地实现页面的交互效果。
安装
在使用 npm 包 v-query 之前，我们需要先进行安装。在终端中执行以下命令即可安装 v-query：
npm install v-query
使用
安装完成后，在我们的项目中引入 v-query：
import vquery from 'v-query';
或者使用全局变量：
<script src="path/to/vquery.min.js"></script>
然后就可以愉快地使用 v-query 了：
vquery('p').addClass('text-danger');API
v-query 的 API 与 jQuery 的 API 类似，下面我们简单介绍一下 v-query 最常用的 API：
$()
$() 函数是 v-query 的入口函数，它返回一个包含指定元素的 v-query 对象。$() 函数接收一个参数 query，query 可以是选择器（CSS 选择器或自定义选择器）、HTML 字符串、DOM 对象或 v-query 对象。
vquery('#myDiv'); // 返回 id 为 myDiv 的元素的 v-query 对象
vquery('.myClass'); // 返回 class 为 myClass 的元素的 v-query 对象
vquery(document.createElement('div')); // 返回一个包含新创建的 div 元素的 v-query 对象
vquery('<p>hello world</p>'); // 返回一个包含指定 HTML 内容的 v-query 对象addClass(className)
addClass() 方法可以为指定的元素添加一个或多个类名，多个类名之间用空格分隔。
vquery('p').addClass('text-danger');removeClass(className)
removeClass() 方法可以从指定的元素中移除一个或多个类名，多个类名之间用空格分隔。
vquery('p').removeClass('text-danger');hasClass(className)
hasClass() 方法可以检查指定的元素是否包含某个类名，如果包含则返回 true，否则返回 false。
if (vquery('p').hasClass('text-danger')) {
console.log('该元素包含 text-danger 类名');
}toggleClass(className)
toggleClass() 方法可以在指定的元素上切换一个或多个类名，如果元素已经包含该类名，则删除该类名；如果元素不包含该类名，则添加该类名。
vquery('p').toggleClass('text-danger');css(propertyName [, value])
css() 方法可以获取或设置指定元素的 CSS 样式。
vquery('p').css('color', 'red'); // 设置 color 样式
vquery('p').css('font-size'); // 获取 font-size 样式attr(attributeName [, value])
attr() 方法可以获取或设置指定元素的属性。
vquery('a').attr('href', 'https://www.baidu.com/'); // 设置 href 属性
vquery('a').attr('href'); // 获取 href 属性prop(propertyName [, value])
prop() 方法可以获取或设置指定元素的属性。
vquery('input').prop('checked', true); // 设置 checked 属性
vquery('input').prop('checked'); // 获取 checked 属性on(eventName, callback)
on() 方法可以为指定元素绑定一个或多个事件处理函数，多个事件之间用空格分隔。
vquery('button').on('click', function() {
console.log('你点击了按钮');
});off(eventName, callback)
off() 方法可以解除指定元素绑定的一个或多个事件处理函数，多个事件之间用空格分隔。
vquery('button').off('click');示例
下面是一个使用 v-query 实现鼠标悬浮提示文字的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------
-------
-------- -
-------- -----
--------- ---------
-------- ---
----------- -----
-------- ----
------ -----
----------------- ---------------
-------------- ----
-
--------------- -
-------- ---
--------- ---------
---- -----
----- ----
------------ -----
------ --
------- --
------------- ------
------------- - --- --- ----
------------- ----------- ----------- -------------- ------------
-
--------
-------
------
-- -----------------------------
------- -------------------------------------
--------
-------------------------------------- ----------- -
--- ----------- - ------------------------------------
--- -------------- - ------------ ----------------- - ----------- - ---------
------
----- ------- - -----
---- ------- - ----
--
-------------------------
----------------------- - ---------------
----------------- ----------- -
----------------------- -- ---------------------------------
------ ------------------------
---
---------
-------
-------总结
v-query 是一个非常方便易用的 DOM 操作库，它可以大大减少我们在前端开发中的代码量和重复劳动，使我们能够更快地实现页面的交互效果。在使用 v-query 时，我们可以根据自己的需求选择其提供的 API 进行操作，从而让我们的代码更加优雅和简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005573881e8991b448d42b1