# Pandora.js

#### 专为新手优化的 JavaScript 插件，拥有前端较为常用的功能，属性丰富。

## 基础方法

```javascript
//提示框
window.alert(`文本内容`);
//确认框
window.confirm(`文本内容`).then(确认回调).catch(取消回调);
window.confirm({
  //文本内容(类型：字符串)
  content: `提示内容`,
  //是否显示确认按钮(类型：布尔)
  showConfirm:true,
  //确认按钮文本(类型：字符串)
  confirmText: `确认`,
  //是否显示取消按钮(类型：布尔)
  showCancel:true,
  //取消按钮文本(类型：字符串)
  cancelText: `取消`,
  //点击确定(类型：方法)
  success() {},
  //点击取消(类型：方法)
  fail() {},
});
```

> 重置后的alert和confirm可修改样式（建议放置于样式表最顶部）
```css
:root{
    //alert背景色
    --alertTheme: white;
    //alert遮罩颜色
    --alertBg: inherit;
    //alert字体大小
    --alertFontSize: 1.2rem;
    //alert字体颜色
    --alertColor: #000;
    //confirm背景色
    --confirmTheme: white;
    //confirm遮罩颜色
    --confirmBg: inherit;
    //confirm字体大小
    --confirmFontSize: 1.2rem;
    //confirm字体颜色
    --confirmColor: #000;
    //confirm按钮颜色
    --confirmBtnBg: #8477b6;
    //confirm按钮字体颜色
    --confirmBtnColor: #fff;
}
```

```javascript
//显示加载蒙层
window.showLoading();
window.showLoading(`可传入数字作为进度显示`);
//隐藏加载蒙层
window.hideLoading();
```

> 必须在 \$ 关键字未被占用情况下使用否则请使用 new Pandora
> 示例：new Pandora(`元素`).css(`width`);

## DOM 操作

```javascript
//获取原生dom元素
$(`元素`).get;
//遍历元素
$(`元素`).each((current, index) => {});
//选择父级元素
$(`元素`).parent();
//选择子级元素
$(`元素`).child(`p`);
//选择指定下标元素
$(`元素`).eq(0);
//选择其他同级元素
$(`元素`).siblings(`元素`);
//选择上一个同级元素
$(`元素`).prev();
//选择下一个同级元素
$(`元素`).next();
//选择第一个同级元素
$(`元素`).first();
//选择最后一个同级元素
$(`元素`).last();
```

```javascript
//获取样式
$(`元素`).css(`width`);
//设置样式
$(`元素`).css({ `width`: `200px`});
//获取宽度
$(`元素`).width();
//设置宽度
$(`元素`).width(`200px`);
//获取高度
$(`元素`).height();
//设置高度
$(`元素`).height(`200px`);
//获取布局信息
$(`元素`).offset();
```

```javascript
//获取文本内容
$(`元素`).text();
//修改文本内容
$(`元素`).text(`文字`);
```

```javascript
//获取值
$(`元素`).val();
//修改值
$(`元素`).val(`值`);
```

```javascript
//获取页面结构
$(`元素`).html();
//插入页面结构
$(`元素`).html(`插入的内容`);
```

```javascript
//在...之前插入结构
$(`元素`).prepend(`<dfn>在...之前插入的dfn标签</dfn>`);
//在...之后插入结构
$(`元素`).append(`<i>在...之后插入的i标签</i>`);
```

```javascript
//清空容器
$(`元素`).empty();
//移除元素
$(`要移除的元素`).remove();
```

```javascript
//是否含有class（返回true或false）
$(`元素`).hasClass(`class名`);
//添加class
$(`元素`).addClass(`class名`);
//移除class
$(`元素`).removeClass(`class名`);
```

```javascript
//获取属性
$(`元素`).attr(`属性名`);
//添加属性
$(`元素`).attr(`属性名`, `属性值`);
//添加多条属性
$(`元素`).attr({`属性名1`: `属性值1`,`属性名2`: `属性值2`});
//移除属性
$(`元素`).removeAttr(`属性名`);
```

```javascript
//显示
$(`元素`).show(callback);
//隐藏
$(`元素`).hide(callback);
//淡入
$(`元素`).fadeIn("fast",callback);
//淡出
$(`元素`).fadeOut("slow",callback);
```

## 数据交互

```javascript
//ajax
//以下所有参数值均为默认值
$().ajax({
    //接口地址(类型：字符串)
    url: null,
    //请求类型(类型：字符串)
    type: "get",
    //是否异步请求(类型：布尔)
    async: false,
    //设置请求头(类型：JSON)
    headers: { "Content-Type": "application/json" },
    //发送数据类型(类型：字符串；可选参数：json、form)
    dataType: "json",
    //发送数据(类型：json或form；格式必须和发送数据类型保持一致)
    data: null,
    //请求中回调方法(类型：方法；返回类型：数字)
    progress: null,
    //成功回调方法(类型：方法；返回类型：对象)
    success: null,
    //失败回调方法(类型：方法)
    error: null
});
```

```javascript
//fetch
//以下所有参数值均为默认值
$().fetch({
    //接口地址(类型：字符串)
    url: null,
    //请求类型(类型：字符串)
    type: "get",
    //设置请求头(类型：JSON)
    headers: { "Content-Type": "application/json" },
    //发送数据(类型：JSON)
    data: null,
    //返回数据格式化(类型：方法)
    returnData:function(res) {
        return res.json();
    },
    //成功回调方法(类型：方法；返回类型：对象)
    success: null,
    //失败回调方法(类型：方法)
    error: null
});
```

```javascript
//表单序列化
$(`表单`).serialize();

//获取url参数并转换成对象
$().getParams();
```

## 事件交互

```javascript
//点击事件
$(`元素`).click(callback);
//长按事件
$(`元素`).taping(callback);
//事件绑定
$("元素").bind("事件名", callback, 是否捕获);
//事件解绑
$("元素").unbind("事件名");

// 打乱数组
$([0,1,2]).Array.Random();  //[1,2,0]
//是否存在重复
$([0,1,1]).Array.hasRepeat();  //true
// 数组求和
$([1,1,1]).Array.Sum(); //3
```

## 全局修改

```javascript
//是否开启插件跟踪统计（默认开启）
window.enableTrack = true;
//是否启用内置alert（默认开启）
window.resetAlert  = true;
//是否启用内置confirm（默认开启）
window.resetConfirm  = true;

//tips:大多数函数均支持链式写法，包括构造函数和拓展函数
```