npm 包 pureye 使用教程

简介

pureye 是一个基于原生 JavaScript 开发的前端工具库，可以用于实现 DOM 操作、事件绑定、Ajax 请求、动画效果等常用功能。pureye 很小巧轻便，API 使用简单，可以极大地提高前端开发效率。

安装

pureye 可以通过 npm 安装，命令如下：

npm install pureye --save

也可以直接下载 pureye.js 文件并引入。

使用

接下来，我们来看一些 pureye 常用的 API。

DOM 操作

获取元素

// 通过 CSS 选择器获取元素
const element = p('#id');

// 通过 ID 获取元素
const element = pt('p');

设置元素属性

const element = pt('div');
element.attr('class', 'box');
element.attr('style', 'color: white');

获取/设置元素内容

const element = pt('p');
element.html('Hello, World!');
console.log(element.html());

添加子元素

const parent = pt('div');
const child = p('p');
parent.append(child);

删除元素

const element = p('#id');
element.remove();

事件绑定

const element = p('#button');
element.on('click', () => {
  console.log('Clicked');
});

Ajax 请求

Ajax.get('https://api.example.com').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

动画效果

const element = p('#box');
Animation.fadeIn(element, 1000);

示例

创建一个带有动画效果的按钮：

<button id="button">Click Me</button>

const button = p('#button');
button.on('click', () => {
  Animation.fadeOut(button, 1000, () => {
    button.hide();
  });
});

总结

本文介绍了 npm 包 pureye 的使用方法，包括 DOM 操作、事件绑定、Ajax 请求和动画效果等常用功能，希望可以对前端开发工作有所帮助。

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