Zepto.js 核心方法

標籤：zepto(function($){ ... })  

$( )

1、$( htmlString ) 建立元素

//建立元素var p1 =$(‘<p>Hello Zepto</p>‘);$(‘body‘).append(p1);

2、$( htmlString, attributes ) 建立帶有屬性的元素

//建立帶有屬性的元素var p2 =$(‘<p />‘,{text:‘Hello World!‘, id:‘greeting‘, css:{color:‘red‘, fontSize:‘30px‘, fontWeight:‘bold‘}});$(p2).appendTo(‘body‘);

可查看新增 DOM 節點

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/8A/EC/wKioL1g_mgjy3S3iAADDwphcQGw605.png" title="QQ20161201113234.png" alt="wKioL1g_mgjy3S3iAADDwphcQGw605.png" />

3、Zepto(function($){ ... } )  DOM載入完畢，調用這個方法

//當頁面ready的時候，執行回調Zepto(function($){    alert(‘Ready to Zepto!‘)})

DOM載入完畢，顯示 alert 訊息

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/8A/EC/wKioL1g_m_zxemhnAAAZ9VUtzdQ316.png" title="QQ20161201114050.png" alt="wKioL1g_m_zxemhnAAAZ9VUtzdQ316.png" />

$.camelCase( string )     => string

將一組字串變成 “駝峰”命名法的新字串，如果該字串已經是駝峰命名法，則不發生變化

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/8A/F0/wKiom1g_nQTwRwdJAAAec8ySkyg081.png" title="QQ20161201114549.png" alt="wKiom1g_nQTwRwdJAAAec8ySkyg081.png" />

$.contains(parent, node)    => boolean

檢查父節點是否包含給定的 DOM 節點，如果兩者是相同的節點，則返回 false

$.each(collection, function(index, item){ ... })   =>collection

遍曆數組元素或以 key - value 值對方式遍曆對象。回呼函數返回 false 時停止遍曆

（1）、遍曆數組

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/8B/05/wKioL1hCXzPTZ_RGAABAj_O3H24433.png" title="QQ20161203135851.png" alt="wKioL1hCXzPTZ_RGAABAj_O3H24433.png" />

（2）、遍曆對象

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/8B/08/wKiom1hCX_7y6REtAABckVjNoEk752.png" title="QQ20161203140219.png" alt="wKiom1hCX_7y6REtAABckVjNoEk752.png" />

$.extend(target, [source, [source2, ...] ])   => target

$.extend(true, target, [source, ...])             => target

通過來源物件擴充目標對象的屬性，來源物件屬性將覆蓋目標對象屬性。

預設情況下，複製為淺拷貝（淺複製）。如果第一個參數為 true 表示深度拷貝（深度賦值）

var target = {one: ‘targetObject‘};var source = {two: ‘sourceObject‘};$.extend(target, source);console.log(target);

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/8B/08/wKiom1hCYmjRWRGRAAAiWuRH9wk496.png" title="QQ20161203141239.png" alt="wKiom1hCYmjRWRGRAAAiWuRH9wk496.png" />

$.fn

Zepto.fn 是一個對象，它擁有 Zepto 對象上所有可用的方法，如 addClass( ), attr( ) 和其他方法。在這個對象添加一個方法，所有的 Zepto 對象上都能用到該方法。

這裡有一個實現 Zepto 的 empty( ) 的例子：

$.fn.empty = function(){return this.each(function(){this.innerHTML == ‘‘;})}

$.grep(items, function(item){ ... } )   => array

擷取一個新數組，新數組只包含回呼函數中返回 true 的數組項

var arr = $.grep([1,2,3], function(item){return item>1});console.log( arr );

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/8B/05/wKioL1hCZczjLAflAAALaVKy1Fg702.png" title="QQ20161203142703.png" alt="wKioL1hCZczjLAflAAALaVKy1Fg702.png" />

$.inArray(element, array, [fromIndex] )   => number

返回數組中指定元素的索引值，索引從0開始；如果沒有找到，則返回 -1

[fromIndex]參數：可選，表示從哪個索引值開始向後尋找

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M00/8B/09/wKiom1hCZ9yi2zydAAAvSK7t-ds266.png" title="QQ20161203143551.png" alt="wKiom1hCZ9yi2zydAAAvSK7t-ds266.png" />

$.isArray( object )   => boolean

如果 object 是 array，則返回 true

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M00/8B/05/wKioL1hCaIXiZfzmAAAYQtHRs_o781.png" title="QQ20161203143846.png" alt="wKioL1hCaIXiZfzmAAAYQtHRs_o781.png" />

$.isFunction( object )   => booleand

如果 object 是 funcion，則返回 true

$.isPlainObject( object )   => boolean

測試一個對象是否是“純粹”的對象，這個對象是通過對象常量（"{ }"）或者 new Object( ) 建立的。如果是，則返回 true 

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/8B/05/wKioL1hCa4rgZlZZAAAyx8sMr_I157.png" title="QQ20161203145135.png" alt="wKioL1hCa4rgZlZZAAAyx8sMr_I157.png" />

$.isWindow( object )   => boolean

如果 object 是一個 window對象，那麼返回true。這在處理 iframe 時非常有用，因為每個 iframe 都有他們自己的 window對象，使用常規方法 obj === window 檢驗這些 objs時，會失敗

$.map(collection, function(item, index){ ... })   => collection

通過遍曆集合中的元素，返回通過迭代函數的全部結果（一個新數組）。null 和 undefined將被過濾掉

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/8B/09/wKiom1hCb5njWKhXAAAYzFIEy0g444.png" title="QQ20161203150751.png" alt="wKiom1hCb5njWKhXAAAYzFIEy0g444.png" />  650) this.width=650;" src="http://s2.51cto.com/wyfs02/M00/8B/09/wKiom1hCb6Pi0CRnAAAbBNrkkcA748.png" title="QQ20161203150853.png" alt="wKiom1hCb6Pi0CRnAAAbBNrkkcA748.png" />

$.parseJSON( string )   => object

原生 JSON.parse( )的別名，接受一個標準格式的 JSON 字串，返回解析後的 JS 對象

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/8B/09/wKiom1hCc0_Q3i9FAAATB-Ehk0E755.png" title="QQ20161203152447.png" alt="wKiom1hCc0_Q3i9FAAATB-Ehk0E755.png" />

$.trim( string )   => string

刪除字串首尾的空白符，類似 String.prototype.trim()

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/8B/06/wKioL1hCdE2huSDfAAAMCBOmWT4579.png" title="QQ20161203152856.png" alt="wKioL1hCdE2huSDfAAAMCBOmWT4579.png" />

$.type( object )   => string

擷取 JS 對象的類型，可能的類型有：null, undefined, boolean, number, string, function, array, date, regexp, object, error

對於其它對象，它只是簡單報告為“object”，如果你想知道一個對象是否是一個javascript普通對象，使用 isPlainObject

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M00/8B/06/wKioL1hCdT-wOZ5UAAAQlNMUppI760.png" title="QQ20161203153303.png" alt="wKioL1hCdT-wOZ5UAAAQlNMUppI760.png" />

本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1879154

Zepto.js 核心方法