APICloud开发指南之$api

阅读数：13008

遍历

.dom() 描述：选择首个匹配的DOM元素

用法一：.dom(el, selector) 从el元素开始查找

用法二：.dom(selector) 从document元素开始查找参数： el (类型：Element)：DOM元素 selector (类型：Selector)：CSS 选择器

.domAll() 描述：选择所有匹配的DOM元素
.byId() 描述：通过Id选择DOM元素

用法：.byId(id) 参数： id(类型：String)：CSS id 字符串

.first() 描述：选择DOM元素的第一个子元素

用法一：.first(el, selector) 用法二：.first(el)

.last() 描述：选择DOM元素的最后一个子元素

用法一：.last(el, selector) 用法二：.last(el)

.eq() 描述：选择第几个子元素

用法：.eq(el, index) 参数： el (类型：Element)：DOM元素 index (类型：String | Number)：索引值

.not() 描述：根据排除选择器选择子元素用法：.not(el, selector)

.prev() 描述：选择相邻的前一个元素

用法：.prev(el)

.next() 描述：选择相邻的下一个元素

用法：.next(el)

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

用法：.contains(parentEl, targetEl)

.closest() 描述：根据选择器匹配最近的父元素用法：.closest(el, selector)

属性操作[编辑源代码]

.attr()描述：获取或设置DOM元素的属性

用法一：.attr(el, name, value) 设置属性值用法二：.attr(el, name) 获取属性值

.removeAttr() 描述：移除DOM元素的属性

用法：.removeAttr(el, name)

.hasCls() 描述：DOM元素是否含有某个className

用法：.hasCls(el, cls)

.addCls() 描述：为DOM元素增加className

用法：.addCls(el, cls)

.removeCls() 描述：移除指定的className

用法：.removeCls(el, cls)

.toggleCls() 描述：切换指定的className

用法：.toggleCls(el, cls)

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

用法一：.val(el, val) 设置表单元素value值用法二：.val(el) 获取表单元素value值

文档操作[编辑源代码]

.remove() 描述：移除DOM元素

用法：.remove(el)

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

用法：.prepend(el, html)

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

用法：.append(el, html)

.before() 描述：在DOM元素前面插入HTML字符串

用法：.before(el, html)

.after() 描述：在DOM元素后面插入HTML字符串

用法：.after(el, html)

.html() 描述：获取或设置DOM元素的innerHTML

用法一：.html(el, html)设置innerHTML 用法二：.html(el) 获取innerHTML

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

用法一：.text (el, txt) 用法二：.text (el)

CSS操作[编辑源代码]

.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

数据操作[编辑源代码]

.trim() 描述：去掉字符串首尾空格
.trimAll() 描述：去掉字符串所有空格
.isArray() 描述：判断对象是否为数组
.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 ();

事件[编辑源代码]

addEvt() 描述：为DOM元素绑定事件

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

.rmEvt() 描述：移除DOM元素绑定的事件
.one() 描述：为DOM元素绑定事件，事件只执行一次

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

AJAX[编辑源代码]

.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');

效果[编辑源代码]

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

设备适配[编辑源代码]

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

遍历

.dom() 描述：选择首个匹配的DOM元素