几个好用的JavaScript Framework

命名空间为 $api ，所有方法如下：

.trim()

• 描述：去掉字符串首尾空格

• 用法：trim(str)

• 参数： str (类型：String)

• 返回值：去除首尾空格的字符串

• 示例：

  $api.trim('   abc  123   ');  // => "abc  123"

.trimAll()

• 描述：去掉字符串所有空格

• 用法：trimAll(str)

• 参数：str (类型：String)

• 返回值：去除所有空格的字符串

• 示例：

  $api.trimAll('  abc 123  ');  // => "abc123"

.isArray()

• 描述：判断对象是否为数组

• 用法：.isArray(obj)

• 参数： obj (类型：Object)

• 返回值：Boolean

• 示例：

  $api.isArray([1,2,3]);  // => true$api.isArray('123')  // => false

.addEvt()

• 描述：为DOM元素绑定事件

• 用法：.addEvt(el, name, fn, useCapture)

• 参数：

  el (类型：Element)：DOM元素

  name (类型：String)：事件类型

  fn (类型：Function)：事件回调

  useCapture (类型：Boolean)：事件捕获，默认为 false

• 示例：

  $api.addEvt(element, 'click', function(){//do something});

.rmEvt()

• 描述：移除DOM元素绑定的事件

• 用法：.rmEvt(el, name, fn, useCapture)

• 参数：

  el (类型：Element)：DOM元素

  name (类型：String)：事件类型

  fn (类型：Function)：事件回调

  useCapture (类型：Boolean)：事件捕获，默认为 false

• 示例：

  $api.rmEvt(element, 'click', function(){//do something});

.one()

• 描述：为DOM元素绑定事件，事件只执行一次

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

• 参数：

  el (类型：Element)：DOM元素

  name (类型：String)：事件类型

  fn (类型：Function)：事件回调

  useCapture (类型：Boolean)：事件捕获，默认为 false

• 示例：

  $api.one(element, 'click', function(){//do something});

.dom()

• 描述：选择首个匹配的DOM元素

• 用法：

  .dom(el, selector)

  从el元素开始查找

• 参数：
  el (类型：Element)：DOM元素

  selector (类型：Selector)：CSS 选择器

• 返回值： 返回首个匹配的DOM元素

• 示例：

  $api.dom(el, '#id');$api.dom(el, '.list[type="text"]');

  .dom(selector)

  从document元素开始查找

• 参数： selector (类型：Selector)：CSS 选择器

• 返回值：返回首个匹配的DOM元素

• 示例：

  $api.dom('#id');$api.dom('.list[type="text"]');

.domAll()

• 描述：选择所有匹配的DOM元素

• 用法：

  .domAll(el, selector)

  从el元素开始查找

• 参数：

  el (类型：Element)：DOM元素

  selector (类型：Selector)：CSS 选择器

• 返回值： 返回所有匹配的DOM元素

• 示例：

  $api.domAll(el, '.class');$api.domAll(el, '.list:fist-child');

  .domAll(selector)

  从document元素开始查找

• 参数： selector (类型：Selector)：CSS 选择器

• 返回值：返回所有匹配的DOM元素

• 示例：

  $api.domAll('.class');$api.domAll('.list:fist-child');

.byId()

• 描述：通过Id选择DOM元素

• 用法：.byId(id)

• 参数： id(类型：String)：CSS id 字符串

• 返回值： 返回匹配的DOM元素

• 示例：

  $api.byId('idStr')

.first()

• 描述：选择DOM元素的第一个子元素

• 用法：.first(el, selector)

• 参数：

  el (类型：Element)：DOM元素

  selector (类型：Selector)：CSS 选择器

• 返回值： 返回DOM元素的第一个子元素

• 示例：

  $api.first(el,'li');

  .first(el)

• 参数：el (类型：Element)：DOM元素

• 返回值：返回DOM元素的第一个子元素

• 示例：

  $api.first(el);

.last()

• 描述：选择DOM元素的最后一个子元素

• 用法：.last(el, selector)

• 参数：

  el (类型：Element)：DOM元素

  selector (类型：Selector)：CSS 选择器

• 返回值： 返回DOM元素的最后一个子元素

• 示例：

  $api.last(el,'li');

  .last(el)

• 参数： el (类型：Element)：DOM元素

• 返回值：返回DOM元素的最后一个子元素

• 示例：

  $api.last(el);

.eq()

• 描述：选择第几个子元素

• 用法：.eq(el, index)

• 参数：

  el (类型：Element)：DOM元素

  index (类型：String | Number)：索引值

• 返回值：根据索引值返回子元素

• 示例：

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

.not()

• 描述：根据排除选择器选择子元素

• 用法：.not(el, selector)

• 参数：

  el (类型：Element)：DOM元素

  selector (类型：Selector)：CSS 选择器

• 返回值：返回不匹配选择器的所有子元素

• 示例：

  $api.not(el, '.active');

.prev()

• 描述：选择相邻的前一个元素

• 用法：.prev(el)

• 参数：el (类型：Element)：DOM元素

• 返回值：返回前一个元素

• 示例：

  $api.prev(el);

.next()

• 描述：选择相邻的下一个元素

• 用法：.next(el)

• 参数：el (类型：Element)：DOM元素

• 返回值：返回下一个元素

• 示例：

  $api.next(el);

.contains()

• 描述：判断某一个元素是否包含目标元素

• 用法：.contains(parentEl, targetEl)

• 参数：

  parentEl (类型：Element)：DOM元素

  targetEl (类型：Element)：DOM元素

• 返回值：返回布尔值（true 或 false）

• 示例：

  $api.contains(parentEl, targetEl);

.closest()

• 描述：根据选择器匹配最近的父元素

• 用法：.closest(el, selector)

• 参数：

  el (类型：Element)：DOM元素

  selector (类型：Selector)：CSS 选择器

• 返回值：根据选择器匹配最近的父元素

• 示例：

  $api.closest(el, '.parent');

.remove()

• 描述：移除DOM元素

• 用法：.remove(el)

• 参数：el (类型：Element)：DOM元素

• 示例：

  $api.remove(el);

.attr()

• 描述：获取或设置DOM元素的属性

• 用法：.attr(el, name, value)

  设置属性值

• 参数：

  el (类型：Element)：DOM元素

  name (类型：String)：属性名

  value (类型：String)：属性值

• 返回值： 返回当前DOM元素

• 示例：

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

  .attr(el, name)

  获取属性值

• 参数：

  el (类型：Element)：DOM元素

  name (类型：String)：属性名

• 返回值：返回属性值

• 示例：

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

.removeAttr()

• 描述：移除DOM元素的属性

• 用法：.removeAttr(el, name)

• 参数：

  el (类型：Element)：DOM元素

  name (类型：String)：属性名

• 示例：

  $api.removeAttr(el, 'data')

.hasCls()

• 描述：DOM元素是否含有某个className

• 用法：.hasCls(el, cls)

• 参数：

  el (类型：Element)：DOM元素

  cls (类型：String)：className

• 返回值：Boolean

• 示例：

  $api.hasCls(el, 'classname'); // => true

.addCls()

• 描述：为DOM元素增加className

• 用法：.addCls(el, cls)

• 参数：

  el (类型：Element)：DOM元素

  cls (类型：String)：className

• 返回值：返回当前DOM元素

• 示例：

  $api.addCls(el, 'newclass');

.removeCls()

• 描述：移除指定的className

• 用法：.removeCls(el, cls)

• 参数：

  el (类型：Element)：DOM元素

  cls (类型：String)：className

• 返回值：返回当前DOM元素

• 示例：

  $api.removeCls(el, 'newclass');

.toggleCls()

• 描述：切换指定的className

• 用法：.toggleCls(el, cls)

• 参数：

  el (类型：Element)：DOM元素

  cls (类型：String)：className

• 返回值：返回当前DOM元素

• 示例：

  $api.toggleCls(el, 'display');

.val()

• 描述：获取或设置常用 Form 表单元素的 value 值

• 用法：.val(el, val)

  设置表单元素value值

• 参数：

  el (类型：Element)：DOM元素

  val (类型：String)：想设置的value值

• 返回值：返回当前DOM元素

• 示例：

  $api.val(el,'123');

  .val(el)

  获取表单元素value值

• 参数：el (类型：Element)：DOM元素

• 返回值：返回表单元素的value值

• 示例：

  $api.val(el);

.prepend()

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

• 用法：.prepend(el, html)

• 参数：

  el (类型：Element)：DOM元素

  html (类型：htmlString)：HTML字符串

• 返回值：返回当前DOM元素

• 示例：

  $api.prepend(el,'<li>hello</li>');

.append()

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

• 用法：.append(el, html)

• 参数：

  el (类型：Element)：DOM元素

  html (类型：htmlString)：HTML字符串

• 返回值：返回当前DOM元素

• 示例：

  $api.append(el,'<li>hello</li>');

.before()

• 描述：在DOM元素前面插入HTML字符串

• 用法：.before(el, html)

• 参数：

  el (类型：Element)：DOM元素

  html (类型：htmlString)：HTML字符串

• 返回值：返回当前DOM元素

• 示例：

  $api.before(el,'<h1>world</h1>');

.after()

• 描述：在DOM元素后面插入HTML字符串

• 用法：.after(el, html)

• 参数：

  el (类型：Element)：DOM元素

  html (类型：htmlString)：HTML字符串

• 返回值：返回当前DOM元素

• 示例：

  $api.after(el,'<h1>world</h1>');

.html()

• 描述：获取或设置DOM元素的innerHTML

• 用法：.html(el, html)

  设置innerHTML

• 参数：

  el (类型：Element)：DOM元素

  html (类型：htmlString)：HTML字符串

• 返回值：返回当前DOM元素

• 示例：

  $api.html(el,'<h1>world</h1>');

  .html(el)

  获取innerHTML

• 参数：el (类型：Element)：DOM元素

• 返回值：返回当前DOM元素的innerHTML

• 示例：

  $api.html(el);

.text()

• 描述：设置或者获取元素的文本内容

• 用法：. text (el, txt)

• 参数：

  el(类型：Element)：DOM元素

  txt(类型：String)：字符串

• 返回值：当前DOM元素

• 示例：

  var a = document.getElementById('a');
  $api.text(a, 'text'); // => <a id=''a''>text</a>

  . text (el)

• 参数：el(类型：Element)：DOM元素

• 返回值：DOM元素的文本内容

• 示例：

  <a id='a'>text</a>
  var a = document.getElementById('a');$api.text(a); // => text

.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

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

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

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

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