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里面的 <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);