APICloud开发指南之$api

遍历

• .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里面的  一起使用。
   示例：
   var header = document.querySelector('#header');
   $api.fixIos7Bar(header);

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

   用法：.fixStatusBar(el)
   参数：el (类型：Element) ： DOM元素
   备注：自动识别iOS7+，避免应用与状态栏重叠，无法跟config.xml里面的  一起使用。
   示例：
   var header = document.querySelector('#header');
   $api.fixStatusBar(header);