简介
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