APICloud前端框架

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 ，所有方法如下：

1.trim()     描述：去掉字符串首尾空格

2.trimAll()   描述：去掉字符串所有空格

 

3.isArray() 判断对象是否为数组   isArray(obj)

 

4..addEvt() 为DOM元素绑定事件  $api.addEvt(element, 'click', function(){ //do something });

5..rmEvt()  移除DOM元素绑定的事件  $api.rmEvt(element, 'click', function(){ //do something });

6..one()  为DOM元素绑定事件，事件只执行一次  $api.one(element, 'click', function(){ //do something });

 

7..dom()  选择首个匹配的DOM元素   .dom(el, selector) 从el元素开始查找    el (类型：Element)：DOM元素  selector (类型：Selector)：CSS 选择器

8..domAll()   选择所有匹配的DOM元素  $api.domAll('.class');

9..byId()  通过Id选择DOM元素  $api.byId('idStr')

 

10..first()  选择DOM元素的第一个子元素

11.last()  选择DOM元素的最后一个子元素

12.eq()  选择第几个子元素    .eq(el, index)   el (类型：Element)：DOM元素  index (类型：String | Number)：索引值

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

13.not()  根据排除选择器选择子元素  返回不匹配选择器的所有子元素   $api.not(el, '.active');

14.prev()   选择相邻的前一个元素

15.next()   选择相邻的下一个元素

 

16.contains()  判断某一个元素是否包含目标元素  contains(parentEl, targetEl)

17..closest()   根据选择器匹配最近的父元素

18.remove()  移除DOM元素

 

19.attr()  获取或设置DOM元素的属性   .attr(el, name, value)   el (类型：Element)：DOM元素   name (类型：String)：属性名  value (类型：String)：属性值  

   $api.attr(el,'data','123');

20.removeAttr()    移除DOM元素的属性   $api.removeAttr(el, 'data')

 

21..hasCls()  DOM元素是否含有某个className     返回值：Boolean   $api.hasCls(el, 'classname'); // => true

22 .addCls()  为DOM元素增加className    $api.addCls(el, 'newclass');

23..removeCls()   移除指定的className    $api.removeCls(el, 'newclass');

24..toggleCls()   切换指定的className

 

25..val()  获取或设置常用 Form 表单元素的 value 值   .val(el, val)   设置表单元素value值  $api.val(el,'123');

 

25.prepend()  在DOM元素内部，首个子元素前插入HTML字符串  $api.prepend(el,'<li>hello</li>');

26.append()  在DOM元素内部，最后一个子元素后面插入HTML字符串  $api.append(el,'<li>hello</li>');

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

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

 

29.html()  获取或设置DOM元素的innerHTML  $api.html(el,'<h1>world</h1>');

 

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

   . text (el, txt)  返回值：当前DOM元素   var a = document.getElementById('a'); $api.text(a, 'text'); // => <a id=''a''>text</a>

    . text (el)      返回值：DOM元素的文本内容   <a id='a'>text</a> var a = document.getElementById('a'); $api.text(a); // => text

 

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

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

 

32.css()  设置所传入的DOM元素的样式，可传入多条样式   $api.css(el,'width:800px;border:1px solid red');

33.cssVal()  获取指定DOM元素的指定属性的完整的值，如800px  $api.cssVal(el,'width'); // => 800px

 

34.jsonToStr()   将标准的JSON 对象转换成字符串格式  var json = {a:111, b:222}; $api.jsonToStr(json); // => "{"a":111,"b":222}"

35. strToJson ()  将JSON字符串转换成JSON对象  var a = '{"a":"111", "b":"222"}'; $api.strToJson(a); // => Object {a: "111", b: "222"}

 

36.setStorage()  设置localStorage数据   setStorage (key,value)  $api.setStorage('name','Tom');

37.getStorage()  获取localStorage数据，必须与$api.setStorage()配套使用   $api.getStorage('name'); // => "Tom"

38.rmStorage()  清除localStorage中与键名对应的值   $api.rmStorage('name')

39.clearStorage ()  清除localStorage的所有数据，慎用   $api.clearStorage ();

 

40.fixIos7Bar()  适配iOS7+系统状态栏，为传入的DOM元素增加20px的上内边距 

自动识别iOS7+，避免应用与状态栏重叠，无法跟config.xml里面的 <preference name="iOS7StatusBarAppearance" value="false" />一起使用。 var header = document.querySelector('#header'); $api.fixIos7Bar(header);

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

自动识别iOS7+，避免应用与状态栏重叠，无法跟config.xml里面的 <preference name="statusBarAppearance" value="false" /> 一起使用。 var header = document.querySelector('#header'); $api.fixStatusBar(header);

 

42.toast()  延时提示框  .toast(title,text,time)

   title (类型：String) ： 标题(可选参数)   text(类型：String)：内容(可选参数)     time(类型：Number)：延时的时间(可选参数),单位为毫秒，默认值为500  

$api.toast('演示','延时提示框',1000);

 

43.get()   api.ajax()方法的get方式简写   get(url,fnSuc,dataType)

  url (类型：String) : url(必传参数)   

  fnSuc (类型：Function)：成功回调函数(可选参数)    dataType(类型：String)：

  返回值的类型(可选参数)，有text与json两种类型，默认为json

  $api.get('http://www.pm25.in/api/querys/pm2_5.json?city=beijing&token=5j1znBVAsnSf5xQyNQyq',function(ret){ alert(ret); },'text');

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