npm 包 moy-dom 使用教程

阅读时长 4 分钟读完

概述

moy-dom 是一个基于原生 JavaScript 封装的 DOM 操作工具库,可以帮助我们简洁地操作 DOM 元素,提高开发效率。本文主要介绍使用 moy-dom 的相关知识及操作方法。

安装

使用 npm 安装 moy-dom:

使用

在代码中引入 moy-dom:

然后就可以使用其中的方法了。

方法介绍

query

查询 DOM 元素,支持 CSS 选择器。

  • selector:选择器,必需;
  • context:查询上下文,非必需,默认为 document。

queryAll

查询多个 DOM 元素,支持 CSS 选择器。

  • selector:选择器,必需;
  • context:查询上下文,非必需,默认为 document。

attr

获取或设置 DOM 元素的属性值。

  • element:DOM 元素,必需;
  • key:属性名,必需;
  • value:属性值,非必需。

hasClass

判断 DOM 元素是否包含某个类名。

  • element:DOM 元素,必需;
  • className:类名,必需。

addClass

给 DOM 元素添加类名。

  • element:DOM 元素,必需;
  • className:类名,必需。

removeClass

移除 DOM 元素的某个类名。

  • element:DOM 元素,必需;
  • className:类名,必需。

toggleClass

切换 DOM 元素的某个类名。

  • element:DOM 元素,必需;
  • className:类名,必需。

on

给 DOM 元素绑定事件。

  • element:DOM 元素,必需;
  • event:事件名称,必需;
  • handler:事件处理函数,必需;
  • capture:事件捕获或冒泡,非必需,默认为 false。

off

解除 DOM 元素绑定的事件。

  • element:DOM 元素,必需;
  • event:事件名称,必需;
  • handler:事件处理函数,必需。

示例代码

-- -------------------- ---- -------
------ - ------ --------- ------------ --- --- - ---- ----------

----- --- - -------------- -- -- --- --
----- --- - --------------

-- ----
------------- ---------------

-- ----
---------------- -------

-- ----
-------- ------------- -
  -----------------------
-

------- -------- -------------

-- ------
-------- -------- -------------

总结

moy-dom 是一个非常方便实用的 DOM 操作工具库,使用简单,具有一定的深度和指导意义,希望本文对大家有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540fb5

纠错
反馈