v-query 是一个基于 jQuery 的轻量级 DOM 操作库，它提供了方便易用的 API，可以减少我们在前端开发中的代码量和重复劳动，使我们能够更快地实现页面的交互效果。
安装
在使用 npm 包 v-query 之前，我们需要先进行安装。在终端中执行以下命令即可安装 v-query：
--- ------- -------
使用
安装完成后，在我们的项目中引入 v-query：
------ ------ ---- ----------
或者使用全局变量：
------- -------------------------------------
然后就可以愉快地使用 v-query 了：
------------------------------------
API
v-query 的 API 与 jQuery 的 API 类似，下面我们简单介绍一下 v-query 最常用的 API：
$()
$() 函数是 v-query 的入口函数，它返回一个包含指定元素的 v-query 对象。$() 函数接收一个参数 query，query 可以是选择器（CSS 选择器或自定义选择器）、HTML 字符串、DOM 对象或 v-query 对象。
----------------- -- -- -- - ----- ---- ------- -- ------------------- -- -- ----- - ------- ---- ------- -- -------------------------------------- -- ---------- --- --- ------- -- ---------------- ------------ -- -------- ---- --- ------- --
addClass(className)
addClass() 方法可以为指定的元素添加一个或多个类名，多个类名之间用空格分隔。
------------------------------------
removeClass(className)
removeClass() 方法可以从指定的元素中移除一个或多个类名，多个类名之间用空格分隔。
---------------------------------------
hasClass(className)
hasClass() 方法可以检查指定的元素是否包含某个类名，如果包含则返回 true，否则返回 false。
-- ------------------------------------- - ------------------ ----------- ----- -
toggleClass(className)
toggleClass() 方法可以在指定的元素上切换一个或多个类名，如果元素已经包含该类名，则删除该类名；如果元素不包含该类名，则添加该类名。
---------------------------------------
css(propertyName [, value])
css() 方法可以获取或设置指定元素的 CSS 样式。
------------------------ ------- -- -- ----- -- ----------------------------- -- -- --------- --
attr(attributeName [, value])
attr() 方法可以获取或设置指定元素的属性。
------------------------ -------------------------- -- -- ---- -- ------------------------- -- -- ---- --
prop(propertyName [, value])
prop() 方法可以获取或设置指定元素的属性。
------------------------------- ------ -- -- ------- -- -------------------------------- -- -- ------- --
on(eventName, callback)
on() 方法可以为指定元素绑定一个或多个事件处理函数，多个事件之间用空格分隔。
---------------------------- ---------- - ---------------------- ---
off(eventName, callback)
off() 方法可以解除指定元素绑定的一个或多个事件处理函数，多个事件之间用空格分隔。
------------------------------
示例
下面是一个使用 v-query 实现鼠标悬浮提示文字的示例：
--------- -----
------
------
----- ----------------
-------------- ----------
-------
-------- -
-------- -----
--------- ---------
-------- ---
----------- -----
-------- ----
------ -----
----------------- ---------------
-------------- ----
-
--------------- -
-------- ---
--------- ---------
---- -----
----- ----
------------ -----
------ --
------- --
------------- ------
------------- - --- --- ----
------------- ----------- ----------- -------------- ------------
-
--------
-------
------
-- -----------------------------
------- -------------------------------------
--------
-------------------------------------- ----------- -
--- ----------- - ------------------------------------
--- -------------- - ------------ ----------------- - ----------- - ---------
------
----- ------- - -----
---- ------- - ----
--
-------------------------
----------------------- - ---------------
----------------- ----------- -
----------------------- -- ---------------------------------
------ ------------------------
---
---------
-------
-------总结
v-query 是一个非常方便易用的 DOM 操作库，它可以大大减少我们在前端开发中的代码量和重复劳动，使我们能够更快地实现页面的交互效果。在使用 v-query 时，我们可以根据自己的需求选择其提供的 API 进行操作，从而让我们的代码更加优雅和简洁。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005573881e8991b448d42b1