npm 包 pure.js 使用教程

在前端开发中，有许多常用的 JavaScript 库和工具，其中一个非常实用的库就是 pure.js。它是一个轻量级、无依赖性的 JavaScript 工具库，可以帮助开发者快速地处理 DOM 操作、事件绑定、Ajax 请求等任务。

本文将详细介绍如何使用 pure.js 库，并提供示例代码，以帮助读者更好地掌握该库的使用方法。

安装和引入

首先，我们需要安装 pure.js。这可以通过 npm 包管理器来完成：

npm install pure-js --save

然后，在项目中引入 pure.js：

import { $, $$, ajax } from 'pure-js';

每个模块的使用方法将在下面的章节中介绍。

DOM 操作

pure.js 提供了一系列方便的 DOM 操作方法，包括获取元素、设置样式、添加/删除类名等。以下是一些常用的 DOM 操作方法：

获取元素

• $：获取单个元素。
• $$：获取符合条件的全部元素。

const element = $('div'); // 获取第一个 div 元素
const elements = $$('div'); // 获取所有 div 元素

设置样式

• addClass：为元素添加类名。
• removeClass：为元素删除类名。
• hasClass：判断元素是否存在某个类名。

$('div').addClass('my-class');
$('div').removeClass('my-class');
const hasClass = $('div').hasClass('my-class');

其他操作

• text：获取/设置元素的文本内容。
• html：获取/设置元素的 HTML 内容。
• attr：获取/设置元素的属性值。
• remove：删除元素。

const text = $('div').text(); // 获取文本内容
$('div').text('hello world'); // 设置文本内容
const html = $('div').html(); // 获取 HTML 内容
$('div').html('<p>hello world</p>'); // 设置 HTML 内容
const attr = $('a').attr('href'); // 获取 href 属性值
$('a').attr('href', 'http://example.com'); // 设置 href 属性值
$('div').remove(); // 删除 div 元素

事件绑定

pure.js 也提供了一些方便的事件绑定方法，包括添加/删除事件监听器、阻止默认行为和事件冒泡等。以下是一些常用的事件绑定方法：

添加事件监听器

• on：给元素添加事件监听器。

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

删除事件监听器

• off：删除元素上指定类型的事件监听器。

const callback = () => {
  console.log('clicked!');
};

$('button').on('click', callback);
$('button').off('click', callback);

阻止默认行为和事件冒泡

• preventDefault：阻止元素的默认行为。
• stopPropagation：阻止事件冒泡。

$('a').on('click', (event) => {
  event.preventDefault();
  event.stopPropagation();
});

Ajax 请求

pure.js 还提供了方便的 Ajax 请求方法，可以帮助开发者在前端发送 HTTP 请求。以下是一些常用的 Ajax 请求方法：

发送 GET 请求

ajax.get('/data.json').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.error(error);
});

发送 POST 请求

ajax.post('/login', { username: 'admin', password: '123456' }).then((response) => {
  console.log(response.data.token);
}).catch((error) => {
  console.error(error);
});

发送 PUT 请求

ajax.put('/

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/35600) ，转载请注明来源
[https://www.javascriptcn.com/post/35600](https://www.javascriptcn.com/post/35600)