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

清除浏览器默认样式（借鉴CSS Reset，Normalize.css）禁用系统长按菜单（-webkit-touch-callout:none）禁用字体大小自动调整（-webkit-text-size-adjust:none）去掉点击高亮（-webkit-tap-highlight-color:rgba(0, 0, 0, 0)）禁止选择内容（-webkit-user-select:none）清除浮动（.clearfix）加载更多默认样式（.loading_more）

JavaScript Framework

命名空间为 $api ，所有方法如下：

.trim()

描述：去掉字符串首尾空格

用法：trim(str)

参数： str (类型：String)

返回值：去除首尾空格的字符串

示例：

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

.trimAll()

描述：去掉字符串所有空格

用法：trimAll(str)

参数：str (类型：String)

返回值：去除所有空格的字符串

示例：

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

.isArray()

描述：判断对象是否为数组

用法：.isArray(obj)

参数： obj (类型：Object)

返回值：Boolean

示例：

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

.addEvt()

描述：为DOM元素绑定事件

用法：.addEvt(el, name, fn, useCapture)

参数：

el (类型：Element)：DOM元素

name (类型：String)：事件类型

fn (类型：Function)：事件回调

useCapture (类型：Boolean)：事件捕获，默认为 false

示例：

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

.rmEvt()

描述：移除DOM元素绑定的事件

用法：.rmEvt(el, name, fn, useCapture)

参数：

el (类型：Element)：DOM元素

name (类型：String)：事件类型

fn (类型：Function)：事件回调

useCapture (类型：Boolean)：事件捕获，默认为 false

示例：

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

.one()

描述：为DOM元素绑定事件，事件只执行一次

用法：.one(el, name, fn, useCapture)

参数：

el (类型：Element)：DOM元素

name (类型：String)：事件类型

fn (类型：Function)：事件回调

useCapture (类型：Boolean)：事件捕获，默认为 false

示例：

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

.dom()

描述：选择首个匹配的DOM元素

用法：

.dom(el, selector)

从el元素开始查找

参数： el (类型：Element)：DOM元素

selector (类型：Selector)：CSS 选择器

示例：

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

.dom(selector)

从document元素开始查找

参数： selector (类型：Selector)：CSS 选择器

示例：

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

.domAll()

描述：选择所有匹配的DOM元素

用法：

.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()

描述：通过Id选择DOM元素

用法：.byId(id)

参数： id(类型：String)：CSS id 字符串

返回值：返回匹配的DOM元素

示例：

  $api.byId('idStr')

.first()

描述：选择DOM元素的第一个子元素

用法：.first(el, selector)

参数：

el (类型：Element)：DOM元素

selector (类型：Selector)：CSS 选择器

返回值：返回DOM元素的第一个子元素

示例：

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

.first(el)

参数：el (类型：Element)：DOM元素

返回值：返回DOM元素的第一个子元素

示例：

  $api.first(el);

.last()

描述：选择DOM元素的最后一个子元素

用法：.last(el, selector)

参数：

el (类型：Element)：DOM元素

selector (类型：Selector)：CSS 选择器

返回值：返回DOM元素的最后一个子元素

示例：

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

.last(el)

参数： el (类型：Element)：DOM元素

返回值：返回DOM元素的最后一个子元素

示例：

  $api.last(el);

.eq()

描述：选择第几个子元素

用法：.eq(el, index)

参数：

el (类型：Element)：DOM元素

index (类型：String | Number)：索引值

返回值：根据索引值返回子元素

示例：

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

.not()

描述：根据排除选择器选择子元素

用法：.not(el, selector)

参数：

el (类型：Element)：DOM元素

selector (类型：Selector)：CSS 选择器

返回值：返回不匹配选择器的所有子元素

示例：

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

.prev()

描述：选择相邻的前一个元素

用法：.prev(el)

参数：el (类型：Element)：DOM元素

返回值：返回前一个元素

示例：

  $api.prev(el);

.next()

描述：选择相邻的下一个元素

用法：.next(el)

参数：el (类型：Element)：DOM元素

返回值：返回下一个元素

示例：

  $api.next(el);

.contains()

描述：判断某一个元素是否包含目标元素

用法：.contains(parentEl, targetEl)

参数：

parentEl (类型：Element)：DOM元素

targetEl (类型：Element)：DOM元素

返回值：返回布尔值（true 或 false）

示例：

  $api.contains(parentEl, targetEl);

.closest()

描述：根据选择器匹配最近的父元素

用法：.closest(el, selector)

参数：

el (类型：Element)：DOM元素

selector (类型：Selector)：CSS 选择器

返回值：根据选择器匹配最近的父元素

示例：

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

.remove()

描述：移除DOM元素

用法：.remove(el)

参数：el (类型：Element)：DOM元素

示例：

  $api.remove(el);

.attr()

描述：获取或设置DOM元素的属性

用法：.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()

描述：移除DOM元素的属性

用法：.removeAttr(el, name)

参数：

el (类型：Element)：DOM元素

name (类型：String)：属性名

示例：

  $api.removeAttr(el, 'data')

.hasCls()

描述：DOM元素是否含有某个className

用法：.hasCls(el, cls)

参数：

el (类型：Element)：DOM元素

cls (类型：String)：className

返回值：Boolean

示例：

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

.addCls()

描述：为DOM元素增加className

用法：.addCls(el, cls)

参数：

el (类型：Element)：DOM元素

cls (类型：String)：className

返回值：返回当前DOM元素

示例：

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

.removeCls()

描述：移除指定的className

用法：.removeCls(el, cls)

参数：

el (类型：Element)：DOM元素

cls (类型：String)：className

返回值：返回当前DOM元素

示例：

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

.toggleCls()

描述：切换指定的className

用法：.toggleCls(el, cls)

参数：

el (类型：Element)：DOM元素

cls (类型：String)：className

返回值：返回当前DOM元素

示例：

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

.val()

描述：获取或设置常用 Form 表单元素的 value 值

用法：.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()

描述：在DOM元素内部，首个子元素前插入HTML字符串

用法：.prepend(el, html)

参数：

el (类型：Element)：DOM元素

html (类型：htmlString)：HTML字符串

返回值：返回当前DOM元素

示例：

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

.append()

描述：在DOM元素内部，最后一个子元素后面插入HTML字符串

用法：.append(el, html)

参数：

el (类型：Element)：DOM元素

html (类型：htmlString)：HTML字符串

返回值：返回当前DOM元素

示例：

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

.before()

描述：在DOM元素前面插入HTML字符串

用法：.before(el, html)

参数：

el (类型：Element)：DOM元素

html (类型：htmlString)：HTML字符串

返回值：返回当前DOM元素

示例：

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

.after()

描述：在DOM元素后面插入HTML字符串

用法：.after(el, html)

参数：

el (类型：Element)：DOM元素

html (类型：htmlString)：HTML字符串

返回值：返回当前DOM元素

示例：

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

.html()

描述：获取或设置DOM元素的innerHTML

用法：.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()

描述：设置或者获取元素的文本内容

用法：. text (el, txt)

参数：

el(类型：Element)：DOM元素

txt(类型：String)：字符串

返回值：当前DOM元素

示例：

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

. text (el)

参数：el(类型：Element)：DOM元素

返回值：DOM元素的文本内容

示例：

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

.offset()

描述：获取元素在页面中的位置与宽高，(此为距离页面左侧及顶端的位置，并非距离窗口的位置)

用法：. offset (el)

参数：el(类型：Element)：DOM元素

返回值：该元素的位置（left,top）及宽高（width,height）,返回值是json类型的，包括l,t,w,h属性

示例：

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

.css()

描述：设置所传入的DOM元素的样式，可传入多条样式

用法：.css (el, css)

参数：

el(类型：Element)：DOM元素

css(类型：String)：想要设置的CSS样式

示例：

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

.cssVal()

描述：获取指定DOM元素的指定属性的完整的值，如800px

用法：. cssVal (el, prop)

参数：

el(类型：Element)：DOM元素

prop(类型：String)：CSS属性

返回值：完整的CSS属性值

示例：

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

.jsonToStr()

描述：将标准的JSON 对象转换成字符串格式

用法：. jsonToStr (json)

参数：json(类型：JSON)

返回值：转换后的字符串

示例：

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

. strToJson ()

描述：将JSON字符串转换成JSON对象

用法：. strToJson (str)

参数：str(类型：String)：JSON字符串

返回值：JSON对象

示例：

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

.setStorage()

描述：设置localStorage数据

用法：. setStorage (key,value)

参数：

key(类型：String)：键名

value(类型：任意类型)：值

示例：

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

.getStorage()

描述：获取localStorage数据，必须与$api.setStorage()配套使用

用法：. getStorage(key)

参数：key(类型：String)：键名

返回值：localStorage中与键名对应的值

示例：

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

.rmStorage()

描述：清除localStorage中与键名对应的值

用法：. rmStorage(key)

参数：key(类型：String)：键名

示例：

  $api.rmStorage('name')

.clearStorage ()

描述：清除localStorage的所有数据，慎用

用法：. clearStorage ()

示例：

  $api.clearStorage ();

.fixIos7Bar()

描述：适配iOS7+系统状态栏，为传入的DOM元素增加20px的上内边距

用法：.fixIos7Bar(el)

参数：el (类型：Element) ： DOM元素

备注：自动识别iOS7+，避免应用与状态栏重叠，无法跟config.xml里面的 <preference name="iOS7StatusBarAppearance" value="false" /> 一起使用。

示例：

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

.fixStatusBar()

描述：适配iOS7+、Android4.4+系统状态栏，为传入的DOM元素增加适当的上内边距，避免header与状态栏重叠

用法：.fixStatusBar(el)

参数：el (类型：Element) ： DOM元素

备注：自动识别iOS7+，避免应用与状态栏重叠，无法跟config.xml里面的 <preference name="statusBarAppearance" value="false" /> 一起使用。

示例：

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

.toast()

描述：延时提示框

用法：.toast(title,text,time)

参数：

title (类型：String) ：标题(可选参数)

text(类型：String)：内容(可选参数)

time(类型：Number)：延时的时间(可选参数),单位为毫秒，默认值为500

示例：

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

.get()

描述：api.ajax()方法的get方式简写

用法：.get(url,fnSuc,dataType)

参数：

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()

描述：api.ajax()方法的post方式简写

用法：.post(url,data,fnSuc,dataType)

参数：

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 前端框架

概述

CSS Framework

JavaScript Framework

命名空间为 $api ，所有方法如下：

.trim()

.trimAll()

.isArray()

.addEvt()

.rmEvt()

.one()

.dom()

.domAll()

.byId()

.first()

.last()

.eq()

.not()

.prev()

.next()

.contains()

.closest()

.remove()

.attr()

.removeAttr()

.hasCls()

.addCls()

.removeCls()

.toggleCls()

.val()

.prepend()

.append()

.before()

.after()

.html()

.text()

.offset()

.css()

.cssVal()

.jsonToStr()

. strToJson ()

.setStorage()

.getStorage()

.rmStorage()

.clearStorage ()

.fixIos7Bar()

.fixStatusBar()

.toast()

.get()

.post()

推荐文章

推荐教程

推荐课程