目錄

• 1 遍歷
• 2 屬性操作
• 3 文件操作
• 4 CSS操作
• 5 資料操作
• 6 事件
• 7 AJAX
• 8 效果
• 9 裝置適配

遍歷

• .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)：索引值

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