前言
在前端开发中，经常需要操作 DOM 元素，在没有第三方库的帮助下，代码一般非常冗长。而 domquery 是一个可以帮助我们简化 DOM 操作的 npm 包。本文将介绍如何使用 domquery。
安装
在命令行中安装 domquery：
npm install domquery
快速使用
使用 domquery 前需要先引入：
import { $ } from 'domquery';然后就可以通过 $() 方法选取元素：
const element = $('#example');选择器
domquery 支持大部分 CSS 选择器，包括以下常见的选择器：
| 选择器 | 示例 | 选择的元素 |
|---|---|---|
| id | $('#example') |
id 为 example 的元素 |
| class | $('.example') |
类名为 example 的元素集合 |
| 标签名 | $('div') 或者 $('p') |
标签名对应的元素集合 |
| 属性选择器 | $('[name="example"]') |
拥有 name 属性且值为 example 的元素集合 |
注意，返回的是一个节点集合，而不是单个节点，如果只需选取单个节点，则需要使用下标：
const element = $('#example')[0];方法
domquery 对节点集合进行了扩展，支持以下方法：
addClass(className: string)
为所有元素添加类名。
$('.example').addClass('foo');removeClass(className: string)
为所有元素移除类名。
$('.example').removeClass('foo');toggleClass(className: string)
添加或者移除类名。
$('.example').toggleClass('foo');text(value: string)
设置元素的文本内容。
$('.example').text('Hello World');html(value: string)
设置元素的 HTML 内容。
$('.example').html('<p>Hello World</p>');attr(name: string, value: string)
设置元素的属性值。
$('.example').attr('src', 'example.png');css(property: string, value: string)
设置元素的 CSS 样式。
$('.example').css('background-color', '#fff');事件
domquery 支持大部分事件，包括以下常见的事件：
| 事件 | 示例 | 触发条件 |
|---|---|---|
| click | $('.example').on('click', handleClick) |
当用户点击元素时触发 |
| mouseover | $('.example').on('mouseover', handleMouseover) |
当用户将鼠标移动到元素上时触发 |
| submit | $('#form-example').on('submit', handleSubmit) |
当用户提交表单时触发 |
| load | $(window).on('load', handleLoad) |
当页面加载完成时触发 |
具体用法如下：
$('.example').on('click', handleClick);
function handleClick(event) {
// 处理点击事件
}示例代码
以下示例代码演示如何使用 domquery。
<div id="example"> <p class="foo">Hello World</p> <p class="foo">From domquery</p> </div>
-- -------------------- ---- ------- ------ - - - ---- ----------- ----- ------- - ----------------- ----- ---------- - ---------- --------------------------- ------------------------------- -------- ----------------------- ------------- -------- ------------------ - ----- ----- - -------------- ------------------------- -
总结
domquery 是一个非常适合前端开发者使用的 npm 包，可以帮助我们简化 DOM 操作。通过本教程，你已经学会了如何使用 domquery 进行元素选择、类名、文本内容、CSS 样式、属性值等操作，以及绑定事件。愿你在以后的前端项目中能够使用 domquery 开发出更加高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/113108