Zepto.js 核心方法

$( )
javascript

一、$( htmlString ) 建立元素css

//建立元素
var p1 =$('<p>Hello Zepto</p>');

$('body').append(p1);


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

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


可查看新增 DOM 節點
java

wKioL1g_mgjy3S3iAADDwphcQGw605.png


三、Zepto(function($){ ... } )  DOM加載完畢,調用這個方法
node

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


DOM加載完畢,顯示 alert 消息數組

wKioL1g_m_zxemhnAAAZ9VUtzdQ316.png



$.camelCase( string )     => stringapp

將一組字符串變成 「駝峯」命名法的新字符串,若是該字符串已是駝峯命名法,則不發生變化ide

wKiom1g_nQTwRwdJAAAec8ySkyg081.png



$.contains(parent, node)    => boolean
函數

檢查父節點是否包含給定的 DOM 節點,若是二者是相同的節點,則返回 false測試



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

遍歷數組元素或以 key - value 值對方式遍歷對象。回調函數返回 false 時中止遍歷

(1)、遍歷數組

wKioL1hCXzPTZ_RGAABAj_O3H24433.png


(2)、遍歷對象

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

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


wKioL1hCZczjLAflAAALaVKy1Fg702.png


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

返回數組中指定元素的索引值,索引從0開始;若是沒有找到,則返回 -1

[fromIndex]參數:可選,表示從哪一個索引值開始向後查找


wKiom1hCZ9yi2zydAAAvSK7t-ds266.png


$.isArray( object )   => boolean

若是 object 是 array,則返回 true

wKioL1hCaIXiZfzmAAAYQtHRs_o781.png


$.isFunction( object )   => booleand

若是 object 是 funcion,則返回 true



$.isPlainObject( object )   => boolean

測試一個對象是不是「純粹」的對象,這個對象是經過對象常量("{ }")或者 new Object( ) 建立的。若是是,則返回 true 

wKioL1hCa4rgZlZZAAAyx8sMr_I157.png


$.isWindow( object )   => boolean

若是 object 是一個 window對象,那麼返回true。這在處理 iframe 時很是有用,由於每一個 iframe 都有他們本身的 window對象,使用常規方法 obj === window 檢驗這些 objs時,會失敗


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

經過遍歷集合中的元素,返回經過迭代函數的所有結果(一個新數組)。null 和 undefined將被過濾掉


wKiom1hCb5njWKhXAAAYzFIEy0g444.png  wKiom1hCb6Pi0CRnAAAbBNrkkcA748.png


$.parseJSON( string )   => object

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

wKiom1hCc0_Q3i9FAAATB-Ehk0E755.png



$.trim( string )   => string

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

wKioL1hCdE2huSDfAAAMCBOmWT4579.png


$.type( object )   => string

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


對於其它對象,它只是簡單報告爲「object」,若是你想知道一個對象是不是一個javascript普通對象,使用 isPlainObject

wKioL1hCdT-wOZ5UAAAQlNMUppI760.png

相關文章
相關標籤/搜索