如果你需要兼容ie瀏覽器,你可以用回jquery。
需要注意ie10以后不再支持條件注釋(為了提高與HTML5 的可互操作性和兼容性,Internet Explorer 10 標(biāo)準(zhǔn)模式和Quirks 模式中刪除了對(duì)條件注釋的支持),因此,我們建議以下的document.write
方法:
需要注意的是Zepto的一些可選功能是專門(mén)針對(duì)移動(dòng)端瀏覽器的;因?yàn)樗淖畛跄繕?biāo)在移動(dòng)端提供一個(gè)精簡(jiǎn)的類似jquery的js庫(kù)。
核心方法
$()
$(selector, [context]) ? collection
$(<Zepto collection>) ? same collection
$(<DOM nodes>) ? collection
$(htmlString) ? collection
$(htmlString, attributes) ? collection v1.0+
Zepto(function($){ ... })
通過(guò)執(zhí)行css選擇器包裝dom節(jié)點(diǎn),創(chuàng)建元素或者從一個(gè)html片段來(lái)創(chuàng)建一個(gè)Zepto對(duì)象。
Zepto集合是一個(gè)類似數(shù)組的對(duì)象,它具有鏈?zhǔn)椒椒▉?lái)操作它指向的dom,除了$對(duì)象上的直接方法外(如$.extend
),文檔對(duì)象中的所有方法都是集合方法。
如果選擇器中存在content參數(shù)(css選擇器,dom,或者Zepto集合對(duì)象),那么只在所給的節(jié)點(diǎn)背景下進(jìn)行css選擇器;這個(gè)功能有點(diǎn)像使用$(context).find(selector)
。
可以通過(guò)一個(gè)html字符串片段來(lái)創(chuàng)建一個(gè)dom節(jié)點(diǎn)。也可以通過(guò)給定一組屬性映射來(lái)創(chuàng)建節(jié)點(diǎn)。最快的創(chuàng)建但元素,使用<div>
或 <div/>
形式。
當(dāng)一個(gè)函數(shù)附加在 DOMContentLoaded
事件的處理流程中。如果頁(yè)面已經(jīng)加載完畢,這個(gè)方法將會(huì)立即被執(zhí)行。
$('div')
//=> all DIV elements on the page
$('#foo')
//=> element with ID "foo"
// create element:
$("<p>Hello</p>")
//=> the new P element
// create element with attributes:
$("<p />",
{
text:"Hello",
id:"greeting",
css:{color:'darkblue'}
})
//=> <p id=greeting style="color:darkblue">Hello</p>
// execute callback when the page is ready:
Zepto(function($){
alert('Ready to Zepto!')
})
不支持jQuery CSS 擴(kuò)展,但是可以選的“selector”模塊有限提供支持,如一些常用的偽選擇器,可以與現(xiàn)有的代碼或插件兼容執(zhí)行。
$.camelCase
v1.0+
$.camelCase(string) ? string
將一組字符串變成“駱駝”命名法的新字符串,如果該字符已經(jīng)是“駱駝”命名法,則不變化。
$.camelCase('hello-there')
//=> "helloThere"
$.camelCase('helloThere')
//=> "helloThere"
$.contains
v1.0+
$.contains(parent, node) ? boolean
檢查父節(jié)點(diǎn)是否包含給定的dom節(jié)點(diǎn),如果兩者相同,則返回 false
。
$.each
$.each(collection, function(index, item){ ... }) ? collection
遍歷數(shù)組元素或以key-value值對(duì)方式遍歷對(duì)象?;卣{(diào)函數(shù)返回 false
時(shí)停止遍歷。
$.each(['a',
'b',
'c'],
function(index,
item){
console.log('item %d is: %s',
index, item)
})
var hash = {
name:
'zepto.js',
size: 'micro'
}
$.each(hash,
function(key,
value){
console.log('%s: %s',
key, value)
})
$.extend
$.extend(target, [source, [source2, ...]]) ? target
$.extend(true, target, [source, ...]) ? target v1.0+
通過(guò)源對(duì)象擴(kuò)展目標(biāo)對(duì)象的屬性,源對(duì)象屬性將覆蓋目標(biāo)對(duì)象屬性。
默認(rèn)情況下為,復(fù)制為淺復(fù)制。如果第一個(gè)參數(shù)為true表示深度復(fù)制。
var target
= { one:
'patridge' },
source = {
two: 'turtle doves'
}
$.extend(target,
source)
//=> { one: 'patridge',
// two: 'turtle doves' }
$.fn
Zepto.fn
是一個(gè)對(duì)象,它擁有Zepto對(duì)象上所有可用的方法。如 addClass()
, attr()
,和其它方法。在這個(gè)對(duì)象添加一個(gè)方法,所有的Zepto對(duì)象上都能用到該方法。
這里有一個(gè)實(shí)現(xiàn) empty()
方法的例子:
$.fn.empty
= function(){
return
this.each(function(){
this.innerHTML =
'' })
}
$.grep
v1.0+
$.grep(items, function(item){ ... }) ? array
$.grep([1,2,3],
function(){
return item > 1
});
//=>[2,3]
獲取一個(gè)新數(shù)組,新數(shù)組只包含回調(diào)函數(shù)中返回 ture 的數(shù)組項(xiàng)。
$.inArray
v1.0+
$.inArray(element, array, [fromIndex]) ? number
搜索數(shù)組中指定值并返回它的索引(如果沒(méi)有找到則返回-1)。
[fromIndex]
參數(shù)可選,表示從哪個(gè)索引值開(kāi)始向后查找。
$.inArray("abc",["bcd","abc","edf","aaa"]);
//=>1
$.inArray("abc",["bcd","abc","edf","aaa"],1);
//=>1
$.inArray("abc",["bcd","abc","edf","aaa"],2);
//=>-1
$.isArray
$.isArray(object) ? boolean
如果object是array,則返回ture。
$.isFunction
$.isFunction(object) ? boolean
如果object是function,則返回ture。
$.isPlainObject
v1.0+
$.isPlainObject(object) ? boolean
測(cè)試對(duì)象是否是純粹的對(duì)象(通過(guò) "{}" 或者 "new Object" 創(chuàng)建的),如果是,則返回true。
$.isPlainObject({})
// => true
$.isPlainObject(new
Object) // => true
$.isPlainObject(new
Date) // => false
$.isPlainObject(window)
// => false
$.isWindow
v1.0+
$.isWindow(object) ? boolean
確定參數(shù)是否為一個(gè)窗口(window對(duì)象),如果是則返回true。
這在處理iframe時(shí)非常有用,因?yàn)槊總€(gè)iframe都有它們自己的window對(duì)象,使用常規(guī)方法obj==window校驗(yàn)這些objects的時(shí)候會(huì)失敗。
$.map
$.map(collection, function(item, index){ ... }) ? collection
通過(guò)遍歷集合中的元素,通過(guò)函數(shù)返回一個(gè)新的數(shù)組,null
and undefined
將被過(guò)濾掉。
$.map([1,2,3,4,5],function(item,index){
if(item>1){return item*item;}
});
// =>[4, 9, 16, 25]
$.map({"yao":1,"tai":2,"yang":3},function(item,index){
if(item>1){return item*item;}
});
// =>[4, 9]
$.parseJSON
v1.0+
$.parseJSON(string) ? object
類似本地JSON.parse
方法,接受一個(gè)標(biāo)準(zhǔn)格式的 JSON 字符串,并返回解析后的 JavaScript 對(duì)象。
$.trim
v1.0+
$.trim(string) ? string
刪除字符串開(kāi)始和末尾的空白符。類似String.prototype.trim()。
$.type
v1.0+
$.type(object) ? string
獲取JavaScript 對(duì)象的類型??赡艿念愋陀校?null
undefined
boolean
number
string
function
array
date
regexp
object
error
。
對(duì)于其它對(duì)象,它只是簡(jiǎn)單報(bào)告為“object”,如果你想知道一個(gè)對(duì)象是否是一個(gè)javascript普通對(duì)象,使用 isPlainObject。
add
add(selector, [context]) ? self
添加元素到匹配的元素集合。如果content參數(shù)存在,只在content中進(jìn)行查找,否則在document中查找。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<p>a paragraph</p>
<script type="text/javascript">
$('li').add('p').css('background-color', 'red');
</script>
addClass
addClass(name) ? self
addClass(function(index, oldClassName){ ... }) ? self
為每個(gè)匹配的元素添加指定的class類名。多個(gè)class類名通過(guò)空格分隔。
after
after(content) ? self
在每個(gè)匹配的元素后插入內(nèi)容。內(nèi)容可以為html字符串,dom節(jié)點(diǎn),或者節(jié)點(diǎn)組成的數(shù)組。
$('form label').after('<p>A note below the label</p>')
append
append(content) ? self
在每個(gè)匹配的元素末尾插入內(nèi)容。內(nèi)容可以為html字符串,dom節(jié)點(diǎn),或者節(jié)點(diǎn)組成的數(shù)組。
$('ul').append('<li>new list item</li>')
appendTo
appendTo(target) ? self
將匹配的元素插入到目標(biāo)元素的末尾(里面的后面)。這個(gè)有點(diǎn)像 append,但是插入的目標(biāo)與其相反。
$('<li>new list item</li>').appendTo('ul')
attr
attr(name) ? string
attr(name, value) ? self
attr(name, function(index, oldValue){ ... }) ? self
attr({ name: value, name2: value2, ... }) ? self
讀取或設(shè)置dom的屬性。如果沒(méi)有給定value參數(shù),則讀取Zepto對(duì)象第集合一個(gè)元素的屬性值。當(dāng)給定了value參數(shù)。則設(shè)置Zepto對(duì)象集合中所有元素所有元素的屬性值。當(dāng)value參數(shù)為null
,那么這個(gè)屬性將被移除(類似removeAttr),多個(gè)屬性能以通過(guò)對(duì)象值對(duì)的方式進(jìn)行設(shè)置。
要讀取dom的屬性如 checked
和selected
, 使用 prop。
var form =
$('form')
form.attr('action')
//=> read value
form.attr('action',
'/create') //=> set value
form.attr('action',
null) //=> remove attribute
// multiple attributes:
form.attr({
action:
'/create',
method: 'post'
})
before
before(content) ? self
在匹配每個(gè)元素的前面(外面)插入內(nèi)容。內(nèi)容可以為html字符串,dom節(jié)點(diǎn),或者節(jié)點(diǎn)組成的數(shù)組。
$('table').before('<p>See the following table:</p>')
children
children([selector]) ? collection
獲得每個(gè)匹配元素集合元素的直接子元素,如果selector存在,只返回符合css選擇器的元素。
$('ol').children('*:nth-child(2n)')
//=> every other list item from every ordered list
clone
v1.0+
clone() ? collection
通過(guò)深度克隆來(lái)復(fù)制集合中的所有元素。
此方法不會(huì)有數(shù)據(jù)和事件處理程序復(fù)制到新的元素。這點(diǎn)和jquery中利用一個(gè)參數(shù)來(lái)確定是否復(fù)制數(shù)據(jù)和事件處理不相同。
closest
closest(selector, [context]) ? collection
closest(collection) ? collection v1.0+
closest(element) ? collection v1.0+
從元素本身開(kāi)始,逐級(jí)向上級(jí)元素匹配,并返回最先匹配selector的祖先元素。如果context節(jié)點(diǎn)參數(shù)存在。那么直考慮該節(jié)點(diǎn)的后代。這個(gè)方法與
parents(selector)
有點(diǎn)相像,但他只返回最先匹配的祖先元素。
如果參數(shù)是一個(gè)Zepto對(duì)象集合或者一個(gè)元素,結(jié)果必須匹配給定的元素而不是選擇器。
var input =
$('input[type=text]')
input.closest('form')
concat
concat(nodes, [node2, ...]) ? self
添加元素到一個(gè)Zepto對(duì)象集合形成一個(gè)新數(shù)組。如果參數(shù)是一個(gè)數(shù)組,那么這個(gè)數(shù)組中的元素將會(huì)合并到Zepto對(duì)象集合中。
這是一個(gè)Zepto提供的方法,不是jquey的API 。
contents
v1.0+
contents() ? collection
獲得每個(gè)匹配元素集合元素的子元素,包括文字和注釋節(jié)點(diǎn)。.contents()和.children()方法類似,只不過(guò)前者包括文本節(jié)點(diǎn)以及jQuery對(duì)象中產(chǎn)生的HTML元素。
css
css(property) ? value
css(property, value) ? self
css({ property: value, property2: value2, ... }) ? self
讀取或設(shè)置dom元素的css屬性。當(dāng)value參數(shù)不存在的時(shí)候,返回Zepto對(duì)象集合中第一個(gè)元素的css屬性。當(dāng)value參數(shù)存在時(shí),設(shè)置Zepto對(duì)象集合中每一個(gè)元素的對(duì)應(yīng)css屬性。多條css屬性可以利用對(duì)象值對(duì)的方式進(jìn)行設(shè)置。
當(dāng)value為空(空字符串,null
或 undefined
),那個(gè)css屬性將會(huì)被移出。當(dāng)value參數(shù)為一個(gè)無(wú)單位的數(shù)字,如果該css屬性需要單位,“px”將會(huì)自動(dòng)添加到該屬性上。
var elem =
$('h1')
elem.css('background-color')
// read property
elem.css('background-color',
'#369') // set property
elem.css('background-color',
'') // remove property
// set multiple properties:
elem.css({
backgroundColor:
'#8EE',
fontSize: 28 })
data
data(name) ? value
data(name, value) ? self
讀取或?qū)懭雂om的 data-*
屬性。行為有點(diǎn)像 attr ,但是屬性名稱前面加上
data-
。
當(dāng)讀取屬性值時(shí),會(huì)有下列轉(zhuǎn)換:v1.0+
each
each(function(index, item){ ... }) ? self
遍歷一個(gè)Zepto集合對(duì)象,為每一個(gè)匹配元素執(zhí)行一個(gè)函數(shù)。this
關(guān)鍵字指向當(dāng)前item(作為函數(shù)的第二個(gè)參數(shù)傳遞)。如果函數(shù)返回 false
,遍歷結(jié)束。
$('form input').each(function(index){
console.log('input %d is: %o',
index, this)
})
empty
empty() ? self
從Zepto對(duì)象集合中移除所有的dom子節(jié)點(diǎn)。
eq
eq(index) ? collection
從當(dāng)前Zepto對(duì)象集合中獲取給定索引號(hào)的元素。
$('li').eq(0)
//=> only the first list item
$('li').eq(-1)
//=> only the last list item
filter
filter(selector) ? collection
filter(function(index){ ... }) ? collection v1.0+
過(guò)濾Zepto集合對(duì)象,返回的Zepto集合對(duì)象里面的項(xiàng)滿足參數(shù)中的css選擇器。如果參數(shù)為一個(gè)函數(shù),函數(shù)返回有實(shí)際值得時(shí)候,元素才會(huì)被返回。在函數(shù)中, this
關(guān)鍵字指向當(dāng)前的元素。
與此相反的功能,查看not.
find
find(selector) ? collection
find(collection) ? collection v1.0+
find(element) ? collection v1.0+
獲得當(dāng)前Zepto集合對(duì)象內(nèi)查找符合css選擇器的每個(gè)元素的后代。
如果參數(shù)為Zepto集合對(duì)象或者元素,過(guò)濾它們,只有當(dāng)它們?cè)诋?dāng)前Zepto集合對(duì)象中時(shí),才回被返回。
var form =
$('#myform')
form.find('input, select')
first
first() ? collection
獲取當(dāng)前Zepto對(duì)象集合中的第一個(gè)元素。
forEach
forEach(function(item, index, array){ ... }, [context])
遍歷當(dāng)前Zepto集合對(duì)象的買(mǎi)個(gè)元素,有點(diǎn)類似 each,但是遍歷函數(shù)的參數(shù)不一樣,當(dāng)函數(shù)返回 false
的時(shí)候,遍歷不會(huì)停止。
這是一個(gè)Zepto提供的方法,不是jquery的API。
get
get() ? array
get(index) ? DOM node
從當(dāng)前Zepto對(duì)象集合中獲取所有元素或單個(gè)元素。當(dāng)index參數(shù)不存在的時(shí)候,以普通數(shù)組的方式返回所有的元素。當(dāng)指定index時(shí),只返回該置的元素。這點(diǎn)與與eq不同,該方法返回的不是Zepto集合對(duì)象。
var elements =
$('h2')
elements.get()
//=> get all headings as an array
elements.get(0)
//=> get first heading node
has
v1.0+
has(selector) ? collection
has(node) ? collection
判斷當(dāng)前Zepto對(duì)象集合的子元素是否有符合選擇器的元素,或者是否包含指定的dom節(jié)點(diǎn),如果有,則返回新的Zepto集合對(duì)象,該對(duì)象過(guò)濾掉不含有選擇器匹配元素或者不含有指定dom節(jié)點(diǎn)的對(duì)象。
$('ol > li').has('a[href]')
//=> get only LI elements that contain links
hasClass
hasClass(name) ? boolean
檢查Zepto對(duì)象集合中是否有元素含有指定的class。
<ul>
<li>list item 1</li>
<li class="yaotaiyang">list item 2</li>
<li>list item 3</li>
</ul>
<p>a paragraph</p>
<script type="text/javascript">
$("li").hasClass("yaotaiyang");
//=> true
</script>
height
height() ? number
height(value) ? self
height(function(index, oldHeight){ ... }) ? self
獲取Zepto對(duì)象集合中第一個(gè)元素的高度;或者設(shè)置Zepto對(duì)象集合中所有元素的高度。
$('#foo').height()
// => 123
$(window).height()
// => 838 (viewport height)
$(document).height()
// => 22302
hide
hide() ? self
通過(guò)設(shè)置css的屬性display
為 none
來(lái)將Zepto對(duì)象集合中的元素隱藏。
Hide elements in this collection by setting their display
CSS property to
none
.
html
html() ? string
html(content) ? self
html(function(index, oldHtml){ ... }) ? self
獲取或設(shè)置Zepto對(duì)象集合中元素的HTML內(nèi)容。當(dāng)content參數(shù)沒(méi)有給定時(shí),返回IZepto對(duì)象集合中第一個(gè)元素的innerHtm。當(dāng)content參數(shù)給定時(shí)。用其替換Zepto對(duì)象集合中每個(gè)元素的content。content可以是append中描述的所有類型。
// autolink everything that looks like a Twitter username
$('.comment p').html(function(idx,
oldHtml){
return
oldHtml.replace(/(^|\W)@(\w{1,15})/g,
'$1@<a )
})
index
index([element]) ? number
獲取一個(gè)元素的位置。當(dāng)elemen參數(shù)沒(méi)有給出時(shí),返回當(dāng)前元素在兄弟節(jié)點(diǎn)中的位置。當(dāng)element參數(shù)給出時(shí),返回它在當(dāng)前Zepto對(duì)象集合中的位置。如果沒(méi)有該元素,則返回-1。
$('li:nth-child(2)').index()
//=> 1
indexOf
indexOf(element, [fromIndex]) ? number
在當(dāng)前Zepto中獲取一個(gè)元素的位置。如果formindex參數(shù)給出,從該位置往后查找,返回基于0的位置,如果沒(méi)找到,則返回-1。index 方法是基于這個(gè)方法實(shí)現(xiàn)的。
這是一個(gè)Zepto的方法,不是jquer的api。
insertAfter
insertAfter(target) ? self
插入Zepto對(duì)象集合中的元素到指定的每個(gè)元素后面的dom中。這個(gè)有點(diǎn)像 after,但是使用方式相反。
$('<p>Emphasis mine.</p>').insertAfter('blockquote')
insertBefore
insertBefore(target) ? self
插入Zepto對(duì)象集合中的元素到指定的每個(gè)元素前面的dom中。這個(gè)有點(diǎn)像 before,但是使用方式相反。
$('<p>See the following table:</p>').insertBefore('table')
is
is(selector) ? boolean
判斷當(dāng)前Zepto元素集合中的第一個(gè)元素是否符css選擇器。對(duì)于基礎(chǔ)支持jquery的非標(biāo)準(zhǔn)選擇器類似: :visible
包含在可選的“selector”模塊中。
jQuery
CSS extensions 不被支持。 選擇“selector”模塊僅僅能支持有限幾個(gè)最常用的方式。
last
last() ? collection
獲取Zepto集合對(duì)象中最后一個(gè)元素。
map
map(function(index, item){ ... }) ? collection
遍歷Zepto對(duì)象集合中的所有元素。通過(guò)遍歷函數(shù)返回值形成一個(gè)新的集合對(duì)象。在遍歷函數(shù)中this
關(guān)鍵之指向當(dāng)前循環(huán)的item(遍歷函數(shù)中的第二個(gè)參數(shù))。遍歷中返回 null
和undefined
,遍歷將被打斷。
// get text contents of all elements in collection
elements.map(function(){
return
$(this).text()
}).get().join(', ')
next
next() ? collection
next(selector) ? collection v1.0+
獲取Zepto對(duì)象集合中每一個(gè)元素的下一個(gè)兄弟節(jié)點(diǎn)(可以選擇性的帶上過(guò)濾選擇器)。
$('dl dt').next()
//=> the DD elements
not
not(selector) ? collection
not(collection) ? collection
not(function(index){ ... }) ? collection
過(guò)濾當(dāng)前Zepto對(duì)象集合,獲取一個(gè)新的Zepto對(duì)象集合,它里面的元素不能匹配css選擇器。如果另一個(gè)參數(shù)為Zepto集合對(duì)象,那么返回的新Zepto對(duì)象中的元素都不包含在該參數(shù)對(duì)象中。如果參數(shù)是一個(gè)函數(shù)。僅僅包含函數(shù)執(zhí)行為false值得時(shí)候的元素,函數(shù)的
this
關(guān)鍵字指向當(dāng)前循環(huán)元素。
與它相反的功能,查看 filter.
offset
offset() ? object
offset(coordinates) ? self v1.0+
offset(function(index, oldOffset){ ... }) ? self v1.0+
獲得當(dāng)前元素相對(duì)于document的位置。返回一個(gè)對(duì)象含有:
top
, left
, width
和height
當(dāng)給定一個(gè)對(duì)象屬性left
和top
使用這些值來(lái)相對(duì)于document對(duì)每一個(gè)元素進(jìn)行定位。
offsetParent
v1.0+
offsetParent() ? collection
找到第一個(gè)定位過(guò)的祖先元素,在ccs中意味著它的position
值為“relative”, “absolute” or “fixed”
parent
parent([selector]) ? collection
獲取Zepto對(duì)象集合中每個(gè)元素的直接父元素。如果css選擇器參數(shù)給出。過(guò)濾出符合條件的元素。
parents
parents([selector]) ? collection
獲取Zepto對(duì)象集合每個(gè)元素所有的祖先元素。如果css選擇器參數(shù)給出,過(guò)濾出符合條件的元素。
如果想獲取直接父級(jí)元素,使用 parent。如果只想獲取到第一個(gè)符合css選擇器的元素,使用closest。
$('h1').parents()
//=> [<div#container>, <body>, <html>]
pluck
pluck(property) ? array
獲取Zepto對(duì)象集合中每一個(gè)元素的屬性值。返回值為 null
或undefined
值得過(guò)濾掉。
$('body > *').pluck('nodeName')
// => ["DIV", "SCRIPT"]
// implementation of Zepto's `next` method
$.fn.next
= function(){
return
$(this.pluck('nextElementSibling'))
}
這是一個(gè)Zepto的方法,不是jquery的api
position
v1.0+
position() ? object
獲取Zepto對(duì)象集合中第一個(gè)元素的位置。相對(duì)于
offsetParent。當(dāng)絕對(duì)定位的一個(gè)素靠近另一個(gè)元素的時(shí)候,這個(gè)方法是有用的。
返回一個(gè)的對(duì)象有這些屬性:top
, left
。
var pos =
element.position()
// position a tooltip relative to the element
$('#tooltip').css({
position:
'absolute',
top:
pos.top -
30,
left:
pos.left
})
prepend
prepend(content) ? self
將參數(shù)內(nèi)容插入到每個(gè)匹配元素的前面(元素內(nèi)部)。插入d的元素可以試html字符串片段,一個(gè)dom節(jié)點(diǎn),或者一個(gè)節(jié)點(diǎn)的數(shù)組。
$('ul').prepend('<li>first list item</li>')
prependTo
prependTo(target) ? self
將所有元素插入到目標(biāo)前面(元素內(nèi))。這有點(diǎn)像prepend,但是是相反的方式。
$('<li>first list item</li>').prependTo('ul')
prev
prev() ? collection
prev(selector) ? collection v1.0+
獲取Zepto對(duì)象集合中每一個(gè)元素的前一個(gè)兄弟節(jié)點(diǎn),通過(guò)選擇器來(lái)進(jìn)行過(guò)濾。
prop
v1.0+
prop(name) ? value
prop(name, value) ? self
prop(name, function(index, oldValue){ ... }) ? self
讀取或設(shè)置dom元素的屬性值。它在讀取屬性值的情況下優(yōu)先于 attr,因?yàn)檫@些屬性值會(huì)因?yàn)橛脩舻慕换グl(fā)生改變,如checked
and
selected
。
<input class="taiyang" id="check1" type="checkbox" checked="checked">
<input class="yaotaiyang" id="check2" type="checkbox">
<script type="text/javascript">
$("#check1").attr("checked"); //=> "checked"
$("#check1").prop("checked"); //=> "true"
$("#check2").attr("checked"); //=> "false"
$("#check2").prop("checked"); //=> "false"
$("input[type='checkbox']").prop("type",function(index,oldvalue){
console.log(index+"|"+oldvalue);
});
//=> 0|checkbox
//=> 1|checkbox
$("input[type='checkbox']").prop("className",function(index,oldvalue){
console.log(index+"|"+oldvalue);
});
//=> 0|taiyang
//=> 1|yaotaiyang
</script>
push
push(element, [element2, ...]) ? self
添加元素到當(dāng)前Zepto對(duì)象的最后。
這是一個(gè)zepto的方法,不是jquery的api
ready
ready(function($){ ... }) ? self
添加一個(gè)事件偵聽(tīng)器,當(dāng)頁(yè)面dom加載完畢 “DOMContentLoaded” 事件觸發(fā)時(shí)觸發(fā)。建議使用 $()來(lái)代替這種用法。
reduce
reduce(function(memo, item, index, array){ ... }, [initial]) ? value
與 Array.reduce有相同的用法,遍歷當(dāng)前Zepto對(duì)象集合。memo是函數(shù)上次的返回值。迭代進(jìn)行遍歷。
這是一個(gè)zepto的方法,不是jquery的api
remove
remove() ? self
移出當(dāng)前Zepto對(duì)象中的元素。有效的從dom中移除。
removeAttr
removeAttr(name) ? self
移動(dòng)當(dāng)前Zepto對(duì)象集合中所有元素的指定屬性。
removeClass
removeClass([name]) ? self
removeClass(function(index, oldClassName){ ... }) ? self
移動(dòng)當(dāng)前Zepto對(duì)象集合中所有元素的指定class。如果name參數(shù)未給出。將移出所有的class。多個(gè)class參數(shù)名稱可以利用空格分隔。下例移除了兩個(gè)class。
<input class="taiyang yueliang" id="check1" type="checkbox" checked="checked">
<input class="yaotaiyang" id="check2" type="checkbox">
<script type="text/javascript">
$("#check1").removeClass("taiyang yueliang")
//=>[<input class id="check1" type="checkbox" checked="checked">]
</script>
replaceWith
replaceWith(content) ? self
用提供的內(nèi)容替換所有匹配的元素。(包含元素本身)。content參數(shù)可以為
before中描述的類型。
scrollTop
v1.0+
scrollTop() ? number
獲取頁(yè)面上的滾動(dòng)元素或者整個(gè)窗口已經(jīng)滾動(dòng)的像素值。
show
show() ? self
恢復(fù)Zepto對(duì)象集合中每個(gè)元素默認(rèn)的“display”值。如果你用 hide將元素隱藏,用該屬性可以將其顯示。相當(dāng)于干掉了display:none
。
siblings
siblings([selector]) ? collection
獲取Zepto集合對(duì)象所有兄弟節(jié)點(diǎn)。如果css選擇器參數(shù)給出。過(guò)濾出符合選擇器的元素。
size
size() ? number
獲取Zepto對(duì)象集合中元素的數(shù)量。
slice
slice(start, [end]) ? array
array
中提取的方法。從start
開(kāi)始,如果end
指出。提取不包含end
位置的元素。
text
text() ? string
text(content) ? self
獲取或者設(shè)置所有Zepto對(duì)象的文本內(nèi)容。當(dāng)content參數(shù)未給出。返回當(dāng)前Zepto對(duì)象集合中第一個(gè)元素的文本內(nèi)容(包含子節(jié)點(diǎn)中的文本內(nèi)容)。當(dāng)content參數(shù)給出,使用它替換Zepto對(duì)象集合中所有元素的文本內(nèi)容。它有待點(diǎn)似
html,與它不同的是它不能用來(lái)獲取或設(shè)置 HTML。
toggle
toggle([setting]) ? self
顯示或隱藏匹配元素。如果 setting
為true,相當(dāng)于show 法。如果setting
為false。相當(dāng)于
hide方法。
var input =
$('input[type=text]')
$('#too_long').toggle(input.val().length
> 140)
toggleClass
toggleClass(names, [setting]) ? self
toggleClass(function(index, oldClassNames){ ... }, [setting]) ? self
在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類。如果class的名稱存在則刪除它,如果不存在,就添加它。如果 setting
的值為真,這個(gè)功能類似于
addClass,如果為假,這個(gè)功能類似與 removeClass。
unwrap
unwrap() ? self
將匹配元素的父級(jí)元素刪除,保留自身(和兄弟元素,如果存在)在原來(lái)的位置。
$(document.body).append('<div id=wrapper><p>Content</p></div>')
$('#wrapper p').unwrap().parents()
//=> [<body>, <html>]
val
val() ? string
val(value) ? self
val(function(index, oldValue){ ... }) ? self
獲取或設(shè)置匹配元素的值。當(dāng)value參數(shù)不存在。返回第一個(gè)元素的值。如果是<select multiple>
標(biāo)簽,則返回一個(gè)數(shù)組。
width
width() ? number
width(value) ? self
width(function(index, oldWidth){ ... }) ? self
獲取Zepto對(duì)象集合中第一個(gè)元素的寬;或者設(shè)置Zepto對(duì)象集合所有元素的寬。
$('#foo').width()
// => 123
$(window).width()
// => 768 (viewport width)
$(document).width()
// => 768
wrap
wrap(structure) ? self
wrap(function(index){ ... }) ? self v1.0+
在每個(gè)匹配的元素外層包上一個(gè)html元素。structure參數(shù)可以是一個(gè)單獨(dú)的元素或者一些嵌套的元素。也可以是一個(gè)html字符串片段或者dom節(jié)點(diǎn)。還可以是一個(gè)生成用來(lái)包元素的回調(diào)函數(shù),這個(gè)函數(shù)返回前兩種類型的包裹片段。
需要提醒的是:該方法對(duì)于dom中的節(jié)點(diǎn)有著很好的支持。如果將wrap()
用在一個(gè)新的元素上,然后再將結(jié)果插入到document中,此時(shí)該方法無(wú)效。
// wrap each button in a separate span:
$('.buttons a').wrap('<span>')
// wrap each code block in a div and pre:
$('code').wrap('<div class=highlight><pre /></div>')
// wrap all form inputs in a span with classname
// corresponding to input type:
$('input').wrap(function(index){
return '<span class=' +
this.type +
'field />'
})
//=> <span class=textfield><input type=text /></span>,
// <span class=searchfield><input type=search /></span>
// WARNING: will not work as expected!
$('<em>broken</em>').wrap('<li>').appendTo(document.body)
// do this instead:
$('<em>better</em>').appendTo(document.body).wrap('<li>')
wrapAll
wrapAll(structure) ? self
在所有匹配元素外面包一層HTML結(jié)構(gòu)。
// wrap all buttons in a single div:
$('a.button').wrap('<div id=buttons />')
wrapInner
wrapInner(structure) ? self
wrapInner(function(index){ ... }) ? self v1.0+
在匹配元素里的內(nèi)容外包一層結(jié)構(gòu)。
// wrap the contents of each navigation link in a span:
$('nav a').wrapInner('<span>')
// wrap the contents of each list item in a paragraph and emphasis:
$('ol li').wrapInner('<p><em /></p>')
以下為原始html:
<div class="yaotaiyang">
<div class="taiyang">yao</div>
<div class="taiyang">yao</div>
</div>
通過(guò):
$('.taiyang).wrapInner('<div class="new" />');
得到:
<div class="yaotaiyang">
<div class="taiyang"><div class="new">yao</div></div>
<div class="taiyang"><div class="new">yao</div></div>
</div>
檢測(cè)方法
Detect module
該檢測(cè)方法可以在不同的環(huán)境中微調(diào)你的站點(diǎn)或者應(yīng)用程序,并幫助你識(shí)別手機(jī)和平板;以及不同的瀏覽器和操作系統(tǒng)。
// The following boolean flags are set to true if they apply,
// if not they're either set to `false` or `undefined`.
// We recommend accessing them with `!!` prefixed to coerce to a boolean.
// general device type
$.os.phone
$.os.tablet
// specific OS
$.os.ios
$.os.android
$.os.webos
$.os.blackberry
$.os.bb10
$.os.rimtabletos
// specific device type
$.os.iphone
$.os.ipad
$.os.touchpad
$.os.kindle
// specific browser
$.browser.chrome
$.browser.firefox
$.browser.silk
$.browser.playbook
// Additionally, version information is available as well.
// Here's what's returned for an iPhone running iOS 6.1.
!!$.os.phone
// => true
!!$.os.iphone
// => true
!!$.os.ios
// => true
!!$.os.version
// => "6.1"
!!$.browser.version
// => "536.26"
事件處理
$.Event
$.Event(type, [properties]) ? event
創(chuàng)建并初始化一個(gè)指定的dom事件。如果properties參數(shù)給出,使用它來(lái)擴(kuò)展出新的事件對(duì)象。默認(rèn)情況下,事件被設(shè)置為冒泡方式;這個(gè)可以通過(guò)設(shè)置bubbles
為false
來(lái)關(guān)閉。
初始化的功能可以使用
trigger來(lái)觸發(fā)。
$.Event('mylib:change',
{ bubbles: false
});
$.proxy
v1.0+
$.proxy(fn, context) ? function
$.proxy(context, property) ? function
接受一個(gè)函數(shù),然后返回一個(gè)新函數(shù),并且這個(gè)新函數(shù)始終保持了特定的上下文語(yǔ)境,新函數(shù)中this
指向context參數(shù)。另外一種形式,原始的function是context對(duì)像的方法。
var obj =
{name:
'Zepto'},
handler =
function(){
console.log("hello from + ",
this.name)
}
// ensures that the handler will be executed in the context of `obj`:
$(document).on('click',
$.proxy(handler,
obj));
var
obj = {name: "yaotaiyang"
,
test: function
() {
alert( this
.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ));
bind
????
Deprecated, use on instead.
bind(type, function(e){ ... }) ? self
bind({ type: handler, type2: handler2, ... }) ? self
為一個(gè)元素綁定一個(gè)處理事件。
delegate
????
Deprecated, use on instead.
delegate(selector, type, function(e){ ... }) ? self
delegate(selector, { type: handler, type2: handler2, ... }) ? self
基于一組特定的根元素為所有選擇器匹配的元素附加一個(gè)處理事件,匹配的元素可能現(xiàn)在或?qū)?lái)才創(chuàng)建。
die
????
Deprecated, use off instead.
die(type, function(e){ ... }) ? self
die({ type: handler, type2: handler2, ... }) ? self
刪除通過(guò) live 添加的事件。
live
????
Deprecated, use on instead.
live(type, function(e){ ... }) ? self
live({ type: handler, type2: handler2, ... }) ? self
類似delegate,添加一個(gè)個(gè)事件處理器到符合目前選擇器的所有元素匹配,匹配的元素可能現(xiàn)在或?qū)?lái)才創(chuàng)建。
off
off(type, [selector], function(e){ ... }) ? self
off({ type: handler, type2: handler2, ... }, [selector]) ? self
off(type, [selector]) ? self
off() ? self
移除通過(guò) on 注冊(cè)的事件(用bind或者用on注冊(cè)的事件)。如果沒(méi)有參數(shù),將移出當(dāng)前元素上所有的注冊(cè)事件。
off(type, [selector], function(e){ ... }) ? self
如果selector存在,則相當(dāng)于delegate。
$("ul").on("click","li",function(){alert("yaotaiyang")});
以上代碼相當(dāng)于將li的事件代理到ul上。后續(xù)添加的li也能擁有以上方法。該事件可以通過(guò)undelegate來(lái)移除。
$("ul").undelegate();
也可用:$("ul").off();
如果selector參數(shù)不存在。則相當(dāng)于bind。
$("li").on("click",function(){alert("yaotaiyang")});
該事件可以通過(guò)unbind來(lái)移除。
$("li").unbind("click");
也可以用off()來(lái)移除:$("li").off();
on方法繼集成bind和delegate方法。
on
on(type, [selector], function(e){ ... }) ? self
on({ type: handler, type2: handler2, ... }, [selector]) ? self
添加事件到Zepto對(duì)象集合上。多個(gè)事件可以通過(guò)空格的字符串方式添加。或者以事件類型、函數(shù)對(duì)象的 方式。如果css選擇器給出,事件的對(duì)象滿足選擇器條件時(shí)。事件才會(huì)被觸發(fā)。
事件處理程序在觸發(fā)事件元素或者css選擇器匹配的元素的上下文中執(zhí)行(this指向觸發(fā)事件的元素)。
當(dāng)事件處理程序返回false
, 或調(diào)用preventDefault()
,瀏覽器的默認(rèn)事件將會(huì)被阻止。
var elem =
$('#content')
// observe all clicks inside #content:
elem.on('click',
function(e){
... })
// observe clicks inside navigation links in #content
elem.on('click',
'nav a',
function(e){
... })
// all clicks inside links in the document
$(document).on('click',
'a',
function(e){
... })
on(type, [selector], function(e){ ... }) ? self
如果selector存在,則相當(dāng)于delegate。
$("ul").on("click","li",function(){alert("yaotaiyang")});
以上代碼相當(dāng)于將li的事件代理到ul上。后續(xù)添加的li也能擁有以上方法。該事件可以通過(guò)undelegate來(lái)移除。
$("ul").undelegate();
也可用:$("ul").off();
如果selector參數(shù)不存在。則相當(dāng)于bind。
$("li").on("click",function(){alert("yaotaiyang")});
該事件可以通過(guò)unbind來(lái)移除。
$("li").unbind("click");
也可以用off()來(lái)移除:$("li").off();
on方法繼集成bind和delegate方法。
one
one(type, function(e){ ... }) ? self
one({ type: handler, type2: handler2, ... }) ? self
添加一個(gè)處理事件到元素。處理函數(shù)在每個(gè)元素上最多執(zhí)行一次。
trigger
trigger(event, [data])
在Zepto對(duì)象集合的元素上觸發(fā)指定的事件。事件可以是一個(gè)字符串,也可以是一個(gè) $.Event 對(duì)象。如果data參數(shù)存在,它會(huì)作為參數(shù)傳遞給事件函數(shù)。
// add a handler for a custom event
$(document).on('mylib:change',
function(e,
from, to){
console.log('change on %o with data %s, %s',
e.target,
from, to)
})
// trigger the custom event
$(document.body).trigger('mylib:change',
['one',
'two'])
Zepto僅僅支持在dom元素上觸發(fā)事件。
triggerHandler
triggerHandler(event, [data]) ? self
像 trigger,它只觸發(fā)事件,但不冒泡。
比如你再一個(gè)input上如果使用該方法。
$("input").triggerHandler('focus');
// 此時(shí)input上的focus事件觸發(fā),但是input不會(huì)聚焦
$("input").trigger('focus');
// 此時(shí)input上的focus事件觸發(fā),input聚焦
unbind
????
Deprecated, use off instead.
unbind(type, function(e){ ... }) ? self
unbind({ type: handler, type2: handler2, ... }) ? self
移除通過(guò) bind 注冊(cè)的事件。
undelegate
????
Deprecated, use off instead.
undelegate(selector, type, function(e){ ... }) ? self
undelegate(selector, { type: handler, type2: handler2, ... }) ? self
移除通過(guò)delegate 注冊(cè)的事件。
Ajax請(qǐng)求
$.ajax
$.ajax(options) ? XMLHttpRequest
執(zhí)行Ajax請(qǐng)求。請(qǐng)求地址可以是本地的或者跨域的,在支持的瀏覽器中通過(guò)
HTTP access control或者通過(guò)
JSONP來(lái)完成。
參數(shù):
type
(默認(rèn): “GET”):請(qǐng)求方法 (“GET”, “POST”, or other)
url
(默認(rèn): 當(dāng)前地址):發(fā)送請(qǐng)求的地址
data
(默認(rèn):none):發(fā)送到服務(wù)器的數(shù)據(jù);如果是get請(qǐng)求,它會(huì)自動(dòng)被作為參數(shù)拼接到url上。非String對(duì)象將通過(guò)
$.param 得到序列化字符串。
processData
(默認(rèn): true): 對(duì)于非Get請(qǐng)求。是否自動(dòng)將 data
轉(zhuǎn)換為字符串。
-
contentType
(默認(rèn): “application/x-www-form-urlencoded”): 發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型。 (這也可以通過(guò)設(shè)置headers
headers
)。通過(guò)設(shè)置 false
跳過(guò)設(shè)置默認(rèn)值。
-
dataType
(默認(rèn): none):預(yù)期服務(wù)器返回的數(shù)據(jù)類型(“json”, “jsonp”, “xml”, “html”, or “text”)
timeout
(默認(rèn): 0
): 設(shè)置請(qǐng)求超時(shí)時(shí)間(毫秒),0
表示不超時(shí)。
headers
(默認(rèn):{}
): 一個(gè)額外的"{鍵:值}"對(duì)映射到請(qǐng)求一起發(fā)送
async
(默認(rèn): true):默認(rèn)設(shè)置下,所有請(qǐng)求均為異步。如果需發(fā)送同步請(qǐng)求,請(qǐng)將此設(shè)置為 false
。
global
(默認(rèn): true):請(qǐng)求將觸發(fā)全局AJAX事件處理程序,設(shè)置為 false 將不會(huì)觸發(fā)全局 AJAX 事件。
context
(默認(rèn): window): 這個(gè)對(duì)象用于設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文(this指向)。
traditional
(默認(rèn):false):激活傳統(tǒng)的方式通過(guò)$.param來(lái)得到序列化的 data
。
如果URL中含有 =?
或者dataType
是“jsonp”,這講求將會(huì)通過(guò)注入一個(gè)
<script>
標(biāo)簽來(lái)代替使用 XMLHttpRequest (查看 JSONP)。此時(shí)對(duì)
contentType
, dataType
, headers
有限制,async
不被支持。
Ajax 回調(diào)函數(shù)
你可以指定以下的回調(diào)函數(shù),給出的執(zhí)行順序:
-
beforeSend(xhr, settings)
:請(qǐng)求發(fā)出前調(diào)用,它接收xhr對(duì)象和settings作為參數(shù)對(duì)象。如果它返回 false
,請(qǐng)求將被取消。
-
success(data, status, xhr)
:請(qǐng)求成功之后調(diào)用。傳入返回后的數(shù)據(jù),以及包含成功代碼的字符串。
-
error(xhr, errorType, error)
:請(qǐng)求出錯(cuò)時(shí)調(diào)用。 (超時(shí),解析錯(cuò)誤,或者狀態(tài)碼不在HTTP 2xx)。
-
complete(xhr, status)
:請(qǐng)求完成時(shí)調(diào)用,無(wú)論請(qǐng)求失敗或成功。
Ajax 事件
當(dāng)global: true
時(shí)。在Ajax請(qǐng)求生命周期內(nèi),以下這些事件將被觸發(fā)。
-
ajaxStart
(global):如果沒(méi)有其他Ajax請(qǐng)求當(dāng)前活躍將會(huì)被觸發(fā)。
-
ajaxBeforeSend
(data: xhr, options):再發(fā)送請(qǐng)求前,可以被取消。
-
ajaxSend
(data: xhr, options):像 ajaxBeforeSend
,但不能取消。
-
ajaxSuccess
(data: xhr, options, data):當(dāng)返回成功時(shí)。
-
ajaxError
(data: xhr, options, error):當(dāng)有錯(cuò)誤時(shí)。
-
ajaxComplete
(data: xhr, options):請(qǐng)求已經(jīng)完成后,無(wú)論請(qǐng)求是成功或者失敗。
-
ajaxStop
(global):如果這是最后一個(gè)活躍著的Ajax請(qǐng)求,將會(huì)被觸發(fā)。
默認(rèn)情況下,Ajax事件在document對(duì)象上觸發(fā)。然而,如果請(qǐng)求的
context
是一個(gè)dom節(jié)點(diǎn),該事件會(huì)在此節(jié)點(diǎn)上觸發(fā)然后再dom中冒泡。唯一的例外是 ajaxStart
& ajaxStop
這兩個(gè)全局事件。
$(document).on('ajaxBeforeSend',
function(e,
xhr, options){
// This gets fired for every Ajax request performed on the page.
// The xhr object and $.ajax() options are available for editing.
// Return false to cancel this request.
})
$.ajax({
type:
'GET',
url:
'/projects',
// data to be added to query string:
data: {
name: 'Zepto.js'
},
// type of data we are expecting in return:
dataType:
'json',
timeout: 300,
context:
$('body'),
success: function(data){
// Supposing this JSON payload was received:
// {"project": {"id": 42, "html": "<div>..." }}
// append the HTML to context object.
this.append(data.project.html)
},
error:
function(xhr,
type){
alert('Ajax error!')
}
})
// post a JSON payload:
$.ajax({
type:
'POST',
url:
'/projects',
// post payload:
data:
JSON.stringify({
name: 'Zepto.js'
}),
contentType: 'application/json'
})
$.ajaxJSONP
????
Deprecated, use $.ajax instead.
$.ajaxJSONP(options) ? mock XMLHttpRequest
執(zhí)行JSONP跨域獲取數(shù)據(jù)。
此方法相對(duì) $.ajax 沒(méi)有優(yōu)勢(shì),建議不要使用。
$.ajaxSettings
一個(gè)包含Ajax請(qǐng)求的默認(rèn)設(shè)置的對(duì)象。大部分的設(shè)置在 $.ajax中已經(jīng)描述。以下設(shè)置為全局非常有用:
Object containing the default settings for Ajax requests. Most settings are
described in $.ajax. The ones that are useful when set globally are:
timeout
(默認(rèn): 0
):對(duì)Ajax請(qǐng)求設(shè)置一個(gè)非零的值指定一個(gè)默認(rèn)的超時(shí)時(shí)間,以毫秒為單位。
global
(默認(rèn): true):設(shè)置為false。以防止觸發(fā)Ajax事件。
xhr
(默認(rèn):XMLHttpRequest factory):設(shè)置為一個(gè)函數(shù),它返回XMLHttpRequest實(shí)例(或一個(gè)兼容的對(duì)象)
accepts
: 從服務(wù)器請(qǐng)求的MIME類型,指定dataType
值:
- script: “text/javascript, application/javascript”
- json: “application/json”
- xml: “application/xml, text/xml”
- html: “text/html”
- text: “text/plain”
$.get
$.get(url, function(data, status, xhr){ ... }) ? XMLHttpRequest
$.get(url, [data], [function(data, status, xhr){ ... }], [dataType]) ? XMLHttpRequest v1.0+
執(zhí)行一個(gè)Ajax GET請(qǐng)求。這是一個(gè) $.ajax的簡(jiǎn)寫(xiě)方式。
$.get('/whatevs.html',
function(response){
$(document.body).append(response)
})
$.getJSON
$.getJSON(url, function(data, status, xhr){ ... }) ? XMLHttpRequest
$.getJSON(url, [data], function(data, status, xhr){ ... }) ? XMLHttpRequest v1.0+
通過(guò) Ajax GET請(qǐng)求獲取JSON數(shù)據(jù)。這是一個(gè) $.ajax 的簡(jiǎn)寫(xiě)方式。
$.getJSON('/awesome.json',
function(data){
console.log(data)
})
// fetch data from another domain with JSONP
$.getJSON('//example.com/awesome.json?callback=?',
function(remoteData){
console.log(remoteData)
})
$.param
$.param(object, [shallow]) ? string
$.param(array) ? string
創(chuàng)建一個(gè)序列化的數(shù)組或?qū)ο?,適用于一個(gè)URL 地址查詢字符串或Ajax請(qǐng)求。如果shallow設(shè)置為true。嵌套對(duì)象不會(huì)被序列化,嵌套數(shù)組的值不會(huì)使用放括號(hào)在他們的key上。
此外,還接受 serializeArray格式的數(shù)組,其中每個(gè)項(xiàng)都有 “name” 和 “value”屬性。
Also accepts an array in serializeArray format, where each
item has “name” and “value” properties.
$.param({
foo: {
one: 1,
two: 2 }})
//=> "foo[one]=1&foo[two]=2)"
$.param({
ids:
[1,2,3]
})
//=> "ids[]=1&ids[]=2&ids[]=3"
$.param({
ids:
[1,2,3]
}, true)
//=> "ids=1&ids=2&ids=3"
$.param({
foo:
'bar',
nested: {
will: 'not be ignored'
}})
//=> "foo=bar&nested[will]=not+be+ignored"
$.param({
foo:
'bar',
nested: {
will: 'be ignored'
}}, true)
//=> "foo=bar&nested=[object+Object]"
$.post
$.post(url, [data], function(data, status, xhr){ ... }, [dataType]) ? XMLHttpRequest
執(zhí)行Ajax POST請(qǐng)求。這是一個(gè) $.ajax 的簡(jiǎn)寫(xiě)方式。
$.post('/create',
{ sample:
'payload' },
function(response){
// process response
})
data
參數(shù)可以是一個(gè)字符串:
$.post('/create',
$('#some_form').serialize(),
function(response){
// ...
})
load
load(url, function(data, status, xhr){ ... }) ? self
通過(guò)GET Ajax載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中。另外,一個(gè)css選擇器可以在url中指定,像這樣,可以使用匹配selector選擇器的HTML內(nèi)容來(lái)更新集合。
Set the html contents of the current collection to the result of a GET Ajax call to the given URL. Optionally, a CSS selector can be specified in the URL, like so, to use only the HTML content matching the selector for updating the collection:
$('#some_element').load('/foo.html #bar')
當(dāng)這種方法執(zhí)行, 它將檢索 foo.html
頁(yè)面的內(nèi)容,Zepto會(huì)獲取ID為bar元素的內(nèi)容,并且插入到ID為 some_element 元素,而其他的被檢索到的元素將被廢棄。
如果css選擇器不存在。將使用完整的返回文本。
請(qǐng)注意,在沒(méi)有選擇器的情況下,任何javascript塊都會(huì)執(zhí)行。如果帶上選擇器,匹配選擇器內(nèi)的script將會(huì)被刪除。
serialize
serialize() ? string
在Ajax post請(qǐng)求中將用作提交的表單元素的值編譯成 URL-encoded 字符串。
serializeArray
serializeArray() ? array
將用作提交的表單元素的值編譯成擁有name和value對(duì)象組成的數(shù)組。不能使用的表單元素,buttons,未選中的radio buttons/checkboxs 將會(huì)被跳過(guò)。結(jié)果不包含file inputs的數(shù)據(jù)。
$('form').serializeArray()
//=> [{ name: 'size', value: 'micro' },
// { name: 'name', value: 'Zepto' }]
submit
submit() ? self
submit(function(e){ ... }) ? self
為 "submit" 事件綁定一個(gè)處理函數(shù),或者觸發(fā)元素上的 "submit" 事件。當(dāng)參數(shù)function沒(méi)有給出時(shí),觸發(fā)當(dāng)前表單“submit”事件,并且執(zhí)行默認(rèn)的提交表單行為,除非調(diào)用了
preventDefault()
。
當(dāng)function參數(shù)給出時(shí),在當(dāng)前元素上它簡(jiǎn)單得為其在“submit”事件綁定一個(gè)處理函數(shù)。
效果
$.fx
全局動(dòng)畫(huà)設(shè)置:
-
$.fx.off
(在支持css transition 的瀏覽器中默認(rèn)為false):設(shè)置true來(lái)禁止所有animate()
transitions。
-
$.fx.speeds
:用來(lái)設(shè)置動(dòng)畫(huà)時(shí)間的對(duì)象。
_default
(400 ms)
fast
(200 ms)
slow
(600 ms)
改變現(xiàn)有值或者添加一個(gè)新屬性去影響使用一個(gè)字符串來(lái)設(shè)置時(shí)間的動(dòng)畫(huà)。
Change existing values or add new properties to affect animations that use
a string for setting duration.
animate
animate(properties, [duration, [easing, [function(){ ... }]]]) ? self
animate(properties, { duration: msec, easing: type, complete: fn }) ? self
animate(animationName, { ... }) ? self
對(duì)當(dāng)前Zepto集合對(duì)象中元素進(jìn)行css transition屬性平滑過(guò)渡。
properties
: 一個(gè)對(duì)象,該對(duì)象包含了css動(dòng)畫(huà)的值,或者css幀動(dòng)畫(huà)的名稱。
duration
(默認(rèn) 400):以毫秒為單位的時(shí)間,或者一個(gè)字符串。
easing
(默認(rèn) linear
):指定動(dòng)畫(huà)的緩動(dòng)類型,使用以下一個(gè):
complete
:動(dòng)畫(huà)完成時(shí)的回調(diào)函數(shù)
Zepto 還支持以下 CSS transform 屬性:
translate(X|Y|Z|3d)
rotate(X|Y|Z|3d)
scale(X|Y|Z)
matrix(3d)
perspective
skew(X|Y)
如果duration參數(shù)為 0
或
$.fx.off
為 true(在不支持css transitions的瀏覽器中默認(rèn)為true),動(dòng)畫(huà)將不被執(zhí)行;替代動(dòng)畫(huà)效果的目標(biāo)位置會(huì)即刻生效。類似的,如果指定的動(dòng)畫(huà)不是通過(guò)動(dòng)畫(huà)完成,而且動(dòng)畫(huà)的目標(biāo)位置即可生效。這種情況下沒(méi)有動(dòng)畫(huà),
complete
方法也不會(huì)被調(diào)用。
如果第一個(gè)參數(shù)是字符串而不是一個(gè)對(duì)象,它將被當(dāng)作一個(gè)css關(guān)鍵幀動(dòng)畫(huà) CSS
keyframe animation的名稱。
$("#some_element").animate({
opacity: 0.25,
left:
'50px',
color:
'#abcdef',
rotateZ:
'45deg',
translate3d: '0,10px,0'
}, 500,
'ease-out')
Zepto只使用css過(guò)渡效果的動(dòng)畫(huà)。jquery的easings不會(huì)支持。jquery的相對(duì)變化("=+10px") syntax 也不支持。請(qǐng)查看
list of animatable properties。瀏覽器的支持可能不同,所以一定要測(cè)試你所想要支持的瀏覽器。
觸控
Touch events
“touch”模塊添加以下事件,可以 on 和 off。
tap
—元素tap的時(shí)候觸發(fā)。
singleTap
and doubleTap
— 這一對(duì)事件可以用來(lái)檢測(cè)元素上的單擊和雙擊。(如果你不需要檢測(cè)單擊、雙擊,使用
tap
代替)。
longTap
— 當(dāng)一個(gè)元素被按住超過(guò)750ms觸發(fā)。
swipe
, swipeLeft
, swipeRight
, swipeUp
,
swipeDown
— 當(dāng)元素被劃過(guò)時(shí)觸發(fā)。(可選擇給定的方向)
這些事件也是所有Zepto對(duì)象集合上的快捷方法。
<style>.delete
{ display:
none;
}</style>
<ul
id=items>
<li>List item 1 <span
class=delete>DELETE</span></li>
<li>List item 2 <span
class=delete>DELETE</span></li>
</ul>
<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete',
this).show()
})
// delete row on tapping delete button
$('.delete').tap(function(){
$(this).parent('li').remove()
})
</script>