前言
在 Web 前端开发中，JavaScript 的操作是最为频繁和重要的，而其语法灵活和复杂度不断增加也使得开发变得更为复杂。为了提高开发效率和代码质量，我们常常使用第三方工具包和库。npm 作为目前最为流行的 JavaScript 包管理器，提供了丰富的开源工具和插件，大大方便了前端开发。
其中 un.js 是一个轻量级的 JavaScript 工具库，它提供了一组面向对象的应用程序开发接口和工具函数，可以让你更加便捷地进行 DOM 操作、事件绑定、数据存储等等。
在本文中，我们将详细介绍 un.js 的基础使用方法，希望能为初学者提供一些指导和帮助。
安装 un.js
首先，我们需要通过 npm 安装 un.js。
npm install un.js --save
安装完成后，我们就可以在项目中引入 un.js，并开始使用它提供的 API 和功能了。
使用方法
DOM 操作
un.js 提供了一组常用的 DOM 操作 API，可以方便地获取、设置、添加、删除等等。
获取元素
un.$(id)：根据元素 ID 获取元素。
const elem = un.$('myDiv');un.$$(selector)：根据 CSS 选择器获取元素。
const elems = un.$$('.myClass');设置元素属性
un.attr(elem, name, value)：设置元素指定属性的值。
un.attr(elem, 'class', 'newClass');
un.prop(elem, name, value)：设置元素的指定属性值。
un.prop(elem, 'checked', true);
un.css(elem, name, value)：设置元素的指定 CSS 样式值。
un.css(elem, 'background-color', 'red');
un.html(elem, html)：设置元素的内部HTML。
un.html(elem, '<p>new content</p>');
un.text(elem, text)：设置元素的文本内容。
un.text(elem, 'new content');
添加和移除元素
un.append(targetElem, newElem)：给目标元素追加新的元素。
un.append(elem, newElem);
un.prepend(targetElem, newElem)：在目标元素前插入新的元素。
un.prepend(elem, newElem);
un.before(targetElem, newElem)：在目标元素前插入兄弟元素。
un.before(elem, newElem);
un.after(targetElem, newElem)：在目标元素后插入兄弟元素。
un.after(elem, newElem);
un.remove(elem)：移除指定元素。
un.remove(elem);
事件绑定
un.js 也提供了一组方便的事件绑定 API，可以轻松地添加和删除事件监听器。
un.on(elem, type, handler)：给元素添加事件监听器。
un.on(elem, 'click', handleClick);
un.off(elem, type, handler)：从元素中移除事件监听器。
un.off(elem, 'click', handleClick);
数据存储
un.js 还提供了一个简单的数据存储接口，可以方便地对数据进行增、删、改、查。
const storage = un.storage;
storage.set('name', 'Tom');
storage.get('name'); // 'Tom'
storage.remove('name');示例代码
下面是一个使用 un.js 的示例代码，可以帮助了解其使用方法和效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>un.js Demo</title>
</head>
<body>
<div id="myDiv">
<p class="myClass">Hello, World!</p>
<input type="checkbox" id="myCheckbox" checked>
</div>
<script src="./node_modules/un.js/dist/un.min.js"></script>
<script>
const un = window.un;
const elem = un.$('myDiv');
const elems = un.$$('.myClass');
const checkbox = un.$('myCheckbox');
un.attr(elem, 'class', 'newClass');
un.prop(checkbox, 'checked', false);
un.css(elem, 'background-color', 'yellow');
un.html(elem, '<p>New content!</p>');
un.text(elem, 'New text!');
un.append(elem, '<p>Appended content!</p>');
function handleClick(e) {
console.log('Clicked!');
}
un.on(elem, 'click', handleClick);
un.off(elem, 'click', handleClick);
const storage = un.storage;
storage.set('name', 'Tom');
storage.get('name'); // 'Tom'
storage.remove('name');
</script>
</body>
</html>总结
un.js 是一个小巧但功能强大的 JavaScript 工具库，可以帮助我们更加便捷地进行 DOM 操作、事件绑定、数据存储等等。在实际开发中，我们可以通过使用 un.js 提供的 API 和工具函数，提高开发效率和代码质量。希望本文对于初学者能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/60067381890c4f72775842a6