APICloud方法
轉載于官網? ? ??https://docs.apicloud.com/Front-end-Framework/framework-dev-guide#1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?用于學習查閱，api.js類似于jQuery
APICloud前端框架? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
概述
APICloud 前端框架，包括 api.js 和 api.css。 api.css 處理不同平臺瀏覽器的默認樣式。 api.js是一個 JavaScript 庫。是APICloud為混合移動開發定制的輕量JavaScript庫。具有小巧高效的特性。很容易學習和使用。 使用APICloud前端框架需引入api.js和api.css文件。api.js、api.css 在創建APICloud 項目時自動創建。
開源地址：https://github.com/apicloudcom/apicloud-js-framework
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
- Method
命名空間為?$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');
JavaScript Framework
- Method.trim()
.trimAll().isArray().addEvt().rmEvt().one().dom().domAll().byId().first().last().eq().not().prev().next().contains().closest().remove().attr().removeAttr().hasCls().addCls().removeCls().toggleCls().val().prepend().append().before().after().html().text().offset().css().cssVal().jsonToStr().strToJson().setStorage().getStorage().rmStorage().clearStorage().fixIos7Bar().fixStatusBar().toast().get().post()
命名空間為?$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');
總結
以上是生活随笔為你收集整理的APICloud方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Can't locate SVN/Cor
- 下一篇： Angular Universal 官网