在前端开发中，我们经常需要使用某个元素的属性或者文本内容，为了获取这些信息，我们通常会使用一些 DOM API，比如 document.getElementById、querySelector 等。但是这些 API 的使用比较繁琐，需要大量的代码来实现，而且如果我们需要获取多个元素的属性或者文本内容，就需要写很多重复的代码，这显然不是一种高效的方式。
为了解决这个问题，我们可以使用一些现成的工具库，比如 jQuery、Lodash 等。这些工具库大大简化了我们的开发工作，提高了开发效率。不过，这些库的体积比较大，有时候我们仅仅只是需要一个小小的功能，使用这些库就显得有点大材小用了。
为了解决这个问题，我们可以使用一个轻量级的 npm 包，叫做 query-once。在本篇文章中，我们将介绍 query-once 的使用方法，帮助大家更好地利用这个工具包来提高开发效率。
简介
query-once 是一个实用工具库，主要用于简化 DOM 操作。它的设计思路是采用链式调用的方式，便于多个操作的组合和链式调用。它的主要特点包括：
- 基于 jQuery Selector 的元素查询功能，支持绝大多数的 jQuery Selector；
- 支持链式调用，可以连续多个操作；
- 获取到的元素支持事件监听、属性获取、文字内容获取等操作。
安装
要安装 query-once，我们可以使用 npm 安装命令：
npm install query-once --save
如果我们想要手动安装，可以先从 query-once 的 GitHub 页面 下载源码，然后引用 dist/query-once.min.js 文件即可。
使用
引入
要使用 query-once，我们需要先引入它。我们可以从 npm 包中引入：
import $ from 'query-once';
也可以从文件中引入：
<script src="path/to/query-once.min.js"></script>
基本语法
使用 query-once 的语法和 jQuery 非常相似。我们可以使用 $ (Dollar Sign) 来表示 query-once 对象，然后使用链式调用方式来执行操作。
下面是一个简单的示例，演示如何获取 id 为 my-element 的元素的文本内容：
$('#my-element').text();
在这个例子中，我们首先使用 $ 函数获取到了 id 为 my-element 的元素，然后使用 text 方法获取到了这个元素的文本内容。
如果我们需要获取多个元素的文本内容，可以将多个选择器通过 , 分隔，放在 $() 中，例如：
$('.my-class, #my-element').text();
这样就可以获取到所有 class 为 my-class 或 id 为 my-element 的元素的文本内容了。
选择器
query-once 支持大部分的 jQuery 选择器，我们可以灵活地选择想要获取的元素。下面是一些示例：
$('#my-element'); // 根据 id 查询元素 $('.my-class'); // 根据 class 查询元素 $('a[href="#"]'); // 查询指定 href 属性的元素 $('input[type="checkbox"]'); // 查询指定 type 属性的元素 $('li:first-child'); // 查询第一个 li 元素 $('li:last-child'); // 查询最后一个 li 元素 $('ul li:eq(2)'); // 查询第三个 li 元素
对于常用的选择器，我们也可以使用 query-once 内置的快捷方式，例如：
$.first('#my-element'); // 查询 id 为 my-element 的第一个元素 $.all('.my-class'); // 查询所有 class 为 my-class 的元素
属性获取和设置
如果我们想要获取元素的属性，可以使用 attr 方法：
$('#my-element').attr('id'); // 获取 id 属性值 $('#my-element').attr('src', 'new.jpg'); // 设置 src 属性为 new.jpg
如果我们想要获取多个元素的某个属性，可以使用 map 方法：
$('.my-class').map(e => e.attr('data-id')); // 获取所有 class 为 my-class 的元素的 data-id 属性值
文本内容获取
如果我们想要获取元素的文本内容，可以使用 text 方法：
$('#my-element').text(); // 获取元素的文本内容 $('.some-class').map(e => e.text().trim()); // 获取所有 class 为 some-class 的元素的文本内容（去除无用空格）
如果我们想要获取元素的 HTML 内容，可以使用 html 方法：
$('#my-element').html(); // 获取元素的 HTML 内容
如果我们想要设置元素的文本内容或者 HTML 内容，可以使用 text 或者 html 方法：
$('#my-element').text('new text'); // 设置元素的文本内容为 new text $('#my-element').html('<b>new text</b>'); // 设置元素的 HTML 内容为 <b>new text</b>
事件监听
如果我们想要监听元素上的某个事件，可以使用 on 方法：
$('#my-element').on('click', () => { // do something });
如果我们想要移除元素上的某个事件监听器，可以使用 off 方法：
$('#my-element').off('click');
链式调用
query-once 支持链式调用，我们可以将多个操作连接起来，以达到更为复杂的操作。例如：
$('#my-element') .text('new text') .attr('src', 'new.jpg') .on('click', () => { console.log('clicked!'); });
在这个例子中，我们先选择了 id 为 my-element 的元素，然后分别设置了它的文本内容和 src 属性，并且添加了一个 click 事件监听器。
小结
query-once 是一个非常实用的工具包，它可以帮助我们更加高效地操作 DOM 元素。通过本篇文章的介绍，相信大家已经了解了 query-once 的基础用法，可以尝试在自己的项目中使用它，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d681e8991b448d20a0
