APICloud前端框架

概述

APICloud 前端框架，包括 api.js 和 api.css。 api.css 处理不同平台浏览器的默认样式。 api.js是一个 JavaScript 库。是APICloud为混合移动开发定制的轻量JavaScript库。具有小巧高效的特性。很容易学习和使用。使用APICloud前端框架需引入api.js和api.css文件。api.js、api.css 在创建APICloud 项目时自动创建。 https://github.com/apicloudcom/apicloud-js-framework

CSS Framework

-
JavaScript Framework
命名空间为 $api ，所有方法如下：
.trim()
示例：

$api.trim('   abc  123   ');  // => "abc  123"

.trimAll()

示例：

$api.trimAll('  abc 123  ');  // => "abc123"

.isArray()

示例：

$api.isArray([1,2,3]);  // => true$api.isArray('123')  // => false

.addEvt()

参数： el (类型：Element)：DOM元素 name (类型：String)：事件类型 fn (类型：Function)：事件回调 useCapture (类型：Boolean)：事件捕获，默认为 false
示例：

$api.addEvt(element, 'click', function(){//do something});

.rmEvt()

参数： el (类型：Element)：DOM元素 name (类型：String)：事件类型 fn (类型：Function)：事件回调 useCapture (类型：Boolean)：事件捕获，默认为 false
示例：

$api.rmEvt(element, 'click', function(){//do something});

.one()

参数： el (类型：Element)：DOM元素 name (类型：String)：事件类型 fn (类型：Function)：事件回调 useCapture (类型：Boolean)：事件捕获，默认为 false
示例：

$api.one(element, 'click', function(){//do something});

.dom()

用法： .dom(el, selector) 从el元素开始查找
el (类型：Element)：DOM元素 selector (类型：Selector)：CSS 选择器
返回值：返回首个匹配的DOM元素
示例：

$api.dom(el, '#id');$api.dom(el, '.list[type="text"]');

.dom(selector) 从document元素开始查找

参数： selector (类型：Selector)：CSS 选择器
返回值：返回首个匹配的DOM元素
示例：

$api.dom('#id');$api.dom('.list[type="text"]');

.domAll()

用法： .domAll(el, selector) 从el元素开始查找
参数： el (类型：Element)：DOM元素 selector (类型：Selector)：CSS 选择器
返回值：返回所有匹配的DOM元素
示例：

$api.domAll(el, '.class');$api.domAll(el, '.list:fist-child');

.domAll(selector) 从document元素开始查找

参数： selector (类型：Selector)：CSS 选择器
返回值：返回所有匹配的DOM元素
示例：

$api.domAll('.class');$api.domAll('.list:fist-child');

.byId()

示例：

$api.byId('idStr')

.first()

参数： el (类型：Element)：DOM元素 selector (类型：Selector)：CSS 选择器
返回值：返回DOM元素的第一个子元素
示例：

$api.first(el,'li');

.first(el)

示例：

$api.first(el);

.last()

参数： el (类型：Element)：DOM元素 selector (类型：Selector)：CSS 选择器
返回值：返回DOM元素的最后一个子元素
示例：

$api.last(el,'li');

.last(el)

示例：

$api.last(el);

.eq()

参数： el (类型：Element)：DOM元素 index (类型：String | Number)：索引值
返回值：根据索引值返回子元素
示例：

$api.eq(el, 2);$api.eq(el, '2');

.not()

参数： el (类型：Element)：DOM元素 selector (类型：Selector)：CSS 选择器
返回值：返回不匹配选择器的所有子元素
示例：

$api.not(el, '.active');

.prev()

示例：

$api.prev(el);

.next()

示例：

$api.next(el);

.contains()

参数： parentEl (类型：Element)：DOM元素 targetEl (类型：Element)：DOM元素
返回值：返回布尔值（true 或 false）
示例：

$api.contains(parentEl, targetEl);

.closest()

参数： el (类型：Element)：DOM元素 selector (类型：Selector)：CSS 选择器
返回值：根据选择器匹配最近的父元素
示例：

$api.closest(el, '.parent');

.remove()

示例：

$api.remove(el);

.attr()

用法：.attr(el, name, value) 设置属性值
参数： el (类型：Element)：DOM元素 name (类型：String)：属性名 value (类型：String)：属性值
返回值：返回当前DOM元素
示例：

$api.attr(el,'data','123');

.attr(el, name) 获取属性值

参数： el (类型：Element)：DOM元素 name (类型：String)：属性名
返回值：返回属性值
示例：

$api.attr(el,'data');

.removeAttr()

参数： el (类型：Element)：DOM元素 name (类型：String)：属性名
示例：

$api.removeAttr(el, 'data')

.hasCls()

参数： el (类型：Element)：DOM元素 cls (类型：String)：className
返回值：Boolean
示例：

$api.hasCls(el, 'classname'); // => true

.addCls()

参数： el (类型：Element)：DOM元素 cls (类型：String)：className
返回值：返回当前DOM元素
示例：

$api.addCls(el, 'newclass');

.removeCls()

参数： el (类型：Element)：DOM元素 cls (类型：String)：className
返回值：返回当前DOM元素
示例：

$api.removeCls(el, 'newclass');

.toggleCls()

参数： el (类型：Element)：DOM元素 cls (类型：String)：className
返回值：返回当前DOM元素
示例：

$api.toggleCls(el, 'display');

.val()

用法：.val(el, val) 设置表单元素value值
参数： el (类型：Element)：DOM元素 val (类型：String)：想设置的value值
返回值：返回当前DOM元素
示例：

$api.val(el,'123');

.val(el) 获取表单元素value值

参数：el (类型：Element)：DOM元素
返回值：返回表单元素的value值
示例：

$api.val(el);

.prepend()

参数： el (类型：Element)：DOM元素 html (类型：htmlString)：HTML字符串
返回值：返回当前DOM元素
示例：

$api.prepend(el,'<li>hello</li>');

.append()

参数： el (类型：Element)：DOM元素 html (类型：htmlString)：HTML字符串
返回值：返回当前DOM元素
示例：

$api.append(el,'<li>hello</li>');

.before()

参数： el (类型：Element)：DOM元素 html (类型：htmlString)：HTML字符串
返回值：返回当前DOM元素
示例：

$api.before(el,'<h1>world</h1>');

.after()

参数： el (类型：Element)：DOM元素 html (类型：htmlString)：HTML字符串
返回值：返回当前DOM元素
示例：

$api.after(el,'<h1>world</h1>');

.html()

用法：.html(el, html) 设置innerHTML
参数： el (类型：Element)：DOM元素 html (类型：htmlString)：HTML字符串
返回值：返回当前DOM元素
示例：

$api.html(el,'<h1>world</h1>');

.html(el) 获取innerHTML

参数：el (类型：Element)：DOM元素
返回值：返回当前DOM元素的innerHTML
示例：

$api.html(el);

.text()

参数： el(类型：Element)：DOM元素 txt(类型：String)：字符串
返回值：当前DOM元素
示例：

var a = document.getElementById('a');$api.text(a, 'text'); // => <a id=''a''>text</a>

. text (el)

示例：

<a id='a'>text</a>var a = document.getElementById('a');$api.text(a); // => text

.offset()

示例：

var offset = $api.offset(el);var left = offset.l;var top = offset.t;var width = offset.w;var height = offset.h;

.css()

参数： el(类型：Element)：DOM元素 css(类型：String)：想要设置的CSS样式
示例：

$api.css(el,'width:800px;border:1px solid red');

.cssVal()

参数： el(类型：Element)：DOM元素 prop(类型：String)：CSS属性
返回值：完整的CSS属性值
示例：

$api.cssVal(el,'width'); // => 800px

.jsonToStr()

示例：

var json = {a:111, b:222};$api.jsonToStr(json); // => "{"a":111,"b":222}"

. strToJson ()

示例：

var a = '{"a":"111", "b":"222"}';$api.strToJson(a); // => Object {a: "111", b: "222"}

.setStorage()

参数： key(类型：String)：键名 value(类型：任意类型)：值
示例：

$api.setStorage('name','Tom');

.getStorage()

必须与$api.setStorage()配套使用
示例：

$api.getStorage('name'); // => "Tom"

.rmStorage()

示例：

$api.rmStorage('name')

.clearStorage ()

示例：

$api.clearStorage ();

.fixIos7Bar()

无法跟config.xml里面的。
示例：

var header = document.querySelector('#header');$api.fixIos7Bar(header);

.fixStatusBar()

无法跟config.xml里面的。
示例：

var header = document.querySelector('#header');$api.fixStatusBar(header);

.toast()

参数： title (类型：String) ：标题(可选参数) text(类型：String)：内容(可选参数) time(类型：Number)：延时的时间(可选参数),单位为毫秒，默认值为500
示例：

$api.toast('你好啊');$api.toast(2000);$api.toast('你好啊',2000);$api.toast('你好啊','hello');$api.toast('演示','延时提示框',1000);

.get()

参数： url (类型：String) : url(必传参数) fnSuc (类型：Function)：成功回调函数(可选参数) dataType(类型：String)：返回值的类型(可选参数)，有text与json两种类型，默认为json
返回值：根据dataType在成功回调函数里返回相应数据
示例：

$api.get('http://www.pm25.in/api/querys/pm2_5.json?city=beijing&token=5j1znBVAsnSf5xQyNQyq',function(ret){  alert(ret);},'text');

.post()

参数： url (类型：String) ：url(必传参数) data(类型：JSON): 可以有body：请求体（字符串类型）values：post参数（JSON对象） files：post文件（JSON对象）等参数(可选参数) fnSuc (类型：Function)：成功回调函数(可选参数) dataType(类型：String)：返回值的类型(可选参数)，有text与json两种类型，默认为json
返回值：向url地址发送ajax请求，并发送数据data，根据dataType在成功回调函数返回相应数据
示例：

$api.post('http://192.168.1.233:4321/getString',{  body: 'String'},function(ret){  alert(ret);},'text');

前端框架 - APICloud前端框架