當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

APICloud方法

發布時間：2023/12/31 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

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