npm 包 nanoquery 使用教程

简介

nanoquery 是一个小巧、快速的 JavaScript 库，用于在浏览器中查询和操作 DOM 元素。它具有类似 jQuery 的语法，并提供了一些简单易用的 API，使得开发者可以轻松地在项目中使用。

安装

你可以使用 npm 在你的项目中安装 nanoquery：

npm install nanoquery

使用

选择元素

使用 $ 函数来选择元素。它接受一个字符串参数，该参数为 CSS 选择器：

const $element = $('#my-element');

你也可以传递一个 DOM 元素或一个包含 DOM 元素的数组：

const $elements = $('input[type="text"]');

操作元素

nanoquery 提供了一些方法来操作选定的元素。例如，你可以使用 addClass 和 removeClass 方法来添加或删除类：

$element.addClass('active');
$element.removeClass('active');

获取和设置属性

你可以使用 attr 方法来获取或设置元素的属性：

const value = $element.attr('value');
$element.attr('value', 'new value');

同样，你还可以使用 prop 方法来获取或设置元素的属性：

const checked = $checkbox.prop('checked');
$checkbox.prop('checked', true);

处理事件

使用 on 方法来添加事件处理程序：

$element.on('click', () => {
  console.log('clicked');
});

你也可以使用 off 方法来删除事件处理程序：

$element.off('click');

链式操作

nanoquery 支持链式操作。例如，你可以在一行中选择一个元素、添加类并添加点击事件处理程序：

$('#my-element').addClass('active').on('click', () => {
  console.log('clicked');
});

总结

nanoquery 是一个灵活而强大的 JavaScript 库，可用于在浏览器中查询和操作 DOM 元素。通过熟悉其语法和 API，你可以轻松地开始使用它，并将其集成到你的项目中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48403