首页 > 建站教程 > APP开发,混合APP >  APICloud开发指南之$api正文

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