如果你需要兼容ie瀏覽器,你可以用回jquery。
需要注意ie10以后不再支持條件注釋(為了提高與HTML5 的可互操作性和兼容性,Internet Explorer 10 標準模式和Quirks 模式中刪除了對條件注釋的支持),因此,我們建議以下的document.write
方法:
需要注意的是Zepto的一些可選功能是專(zhuān)門(mén)針對移動(dòng)端瀏覽器的;因為它的最初目標在移動(dòng)端提供一個(gè)精簡(jiǎn)的類(lèi)似jquery的js庫。
核心方法
$()
$(selector, [context]) ? collection
$(<Zepto collection>) ? same collection
$(<DOM nodes>) ? collection
$(htmlString) ? collection
$(htmlString, attributes) ? collection v1.0+
Zepto(function($){ ... })
通過(guò)執行css選擇器包裝dom節點(diǎn),創(chuàng )建元素或者從一個(gè)html片段來(lái)創(chuàng )建一個(gè)Zepto對象。
Zepto集合是一個(gè)類(lèi)似數組的對象,它具有鏈式方法來(lái)操作它指向的dom,除了$對象上的直接方法外(如$.extend
),文檔對象中的所有方法都是集合方法。
如果選擇器中存在content參數(css選擇器,dom,或者Zepto集合對象),那么只在所給的節點(diǎn)背景下進(jìn)行css選擇器;這個(gè)功能有點(diǎn)像使用$(context).find(selector)
。
可以通過(guò)一個(gè)html字符串片段來(lái)創(chuàng )建一個(gè)dom節點(diǎn)。也可以通過(guò)給定一組屬性映射來(lái)創(chuàng )建節點(diǎn)。最快的創(chuàng )建但元素,使用<div>
或 <div/>
形式。
當一個(gè)函數附加在 DOMContentLoaded
事件的處理流程中。如果頁(yè)面已經(jīng)加載完畢,這個(gè)方法將會(huì )立即被執行。
$('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 擴展,但是可以選的“selector”模塊有限提供支持,如一些常用的偽選擇器,可以與現有的代碼或插件兼容執行。
$.camelCase
v1.0+
$.camelCase(string) ? string
將一組字符串變成“駱駝”命名法的新字符串,如果該字符已經(jīng)是“駱駝”命名法,則不變化。
$.camelCase('hello-there')
//=> "helloThere"
$.camelCase('helloThere')
//=> "helloThere"
$.contains
v1.0+
$.contains(parent, node) ? boolean
檢查父節點(diǎn)是否包含給定的dom節點(diǎn),如果兩者相同,則返回 false
。
$.each
$.each(collection, function(index, item){ ... }) ? collection
遍歷數組元素或以key-value值對方式遍歷對象?;卣{函數返回 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ò)源對象擴展目標對象的屬性,源對象屬性將覆蓋目標對象屬性。
默認情況下為,復制為淺復制。如果第一個(gè)參數為true表示深度復制。
var target
= { one:
'patridge' },
source = {
two: 'turtle doves'
}
$.extend(target,
source)
//=> { one: 'patridge',
// two: 'turtle doves' }
$.fn
Zepto.fn
是一個(gè)對象,它擁有Zepto對象上所有可用的方法。如 addClass()
, attr()
,和其它方法。在這個(gè)對象添加一個(gè)方法,所有的Zepto對象上都能用到該方法。
這里有一個(gè)實(shí)現 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è)新數組,新數組只包含回調函數中返回 ture 的數組項。
$.inArray
v1.0+
$.inArray(element, array, [fromIndex]) ? number
搜索數組中指定值并返回它的索引(如果沒(méi)有找到則返回-1)。
[fromIndex]
參數可選,表示從哪個(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
測試對象是否是純粹的對象(通過(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
確定參數是否為一個(gè)窗口(window對象),如果是則返回true。
這在處理iframe時(shí)非常有用,因為每個(gè)iframe都有它們自己的window對象,使用常規方法obj==window校驗這些objects的時(shí)候會(huì )失敗。
$.map
$.map(collection, function(item, index){ ... }) ? collection
通過(guò)遍歷集合中的元素,通過(guò)函數返回一個(gè)新的數組,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
類(lèi)似本地JSON.parse
方法,接受一個(gè)標準格式的 JSON 字符串,并返回解析后的 JavaScript 對象。
$.trim
v1.0+
$.trim(string) ? string
刪除字符串開(kāi)始和末尾的空白符。類(lèi)似String.prototype.trim()。
$.type
v1.0+
$.type(object) ? string
獲取JavaScript 對象的類(lèi)型??赡艿念?lèi)型有: null
undefined
boolean
number
string
function
array
date
regexp
object
error
。
對于其它對象,它只是簡(jiǎn)單報告為“object”,如果你想知道一個(gè)對象是否是一個(gè)javascript普通對象,使用 isPlainObject。
add
add(selector, [context]) ? self
添加元素到匹配的元素集合。如果content參數存在,只在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類(lèi)名。多個(gè)class類(lèi)名通過(guò)空格分隔。
after
after(content) ? self
在每個(gè)匹配的元素后插入內容。內容可以為html字符串,dom節點(diǎn),或者節點(diǎn)組成的數組。
$('form label').after('<p>A note below the label</p>')
append
append(content) ? self
在每個(gè)匹配的元素末尾插入內容。內容可以為html字符串,dom節點(diǎn),或者節點(diǎn)組成的數組。
$('ul').append('<li>new list item</li>')
appendTo
appendTo(target) ? self
將匹配的元素插入到目標元素的末尾(里面的后面)。這個(gè)有點(diǎn)像 append,但是插入的目標與其相反。
$('<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
讀取或設置dom的屬性。如果沒(méi)有給定value參數,則讀取Zepto對象第集合一個(gè)元素的屬性值。當給定了value參數。則設置Zepto對象集合中所有元素所有元素的屬性值。當value參數為null
,那么這個(gè)屬性將被移除(類(lèi)似removeAttr),多個(gè)屬性能以通過(guò)對象值對的方式進(jìn)行設置。
要讀取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è)元素的前面(外面)插入內容。內容可以為html字符串,dom節點(diǎn),或者節點(diǎn)組成的數組。
$('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)復制集合中的所有元素。
此方法不會(huì )有數據和事件處理程序復制到新的元素。這點(diǎn)和jquery中利用一個(gè)參數來(lái)確定是否復制數據和事件處理不相同。
closest
closest(selector, [context]) ? collection
closest(collection) ? collection v1.0+
closest(element) ? collection v1.0+
從元素本身開(kāi)始,逐級向上級元素匹配,并返回最先匹配selector的祖先元素。如果context節點(diǎn)參數存在。那么直考慮該節點(diǎn)的后代。這個(gè)方法與
parents(selector)
有點(diǎn)相像,但他只返回最先匹配的祖先元素。
如果參數是一個(gè)Zepto對象集合或者一個(gè)元素,結果必須匹配給定的元素而不是選擇器。
var input =
$('input[type=text]')
input.closest('form')
concat
concat(nodes, [node2, ...]) ? self
添加元素到一個(gè)Zepto對象集合形成一個(gè)新數組。如果參數是一個(gè)數組,那么這個(gè)數組中的元素將會(huì )合并到Zepto對象集合中。
這是一個(gè)Zepto提供的方法,不是jquey的API 。
contents
v1.0+
contents() ? collection
獲得每個(gè)匹配元素集合元素的子元素,包括文字和注釋節點(diǎn)。.contents()和.children()方法類(lèi)似,只不過(guò)前者包括文本節點(diǎn)以及jQuery對象中產(chǎn)生的HTML元素。
css
css(property) ? value
css(property, value) ? self
css({ property: value, property2: value2, ... }) ? self
讀取或設置dom元素的css屬性。當value參數不存在的時(shí)候,返回Zepto對象集合中第一個(gè)元素的css屬性。當value參數存在時(shí),設置Zepto對象集合中每一個(gè)元素的對應css屬性。多條css屬性可以利用對象值對的方式進(jìn)行設置。
當value為空(空字符串,null
或 undefined
),那個(gè)css屬性將會(huì )被移出。當value參數為一個(gè)無(wú)單位的數字,如果該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
讀取或寫(xiě)入dom的 data-*
屬性。行為有點(diǎn)像 attr ,但是屬性名稱(chēng)前面加上
data-
。
當讀取屬性值時(shí),會(huì )有下列轉換:v1.0+
each
each(function(index, item){ ... }) ? self
遍歷一個(gè)Zepto集合對象,為每一個(gè)匹配元素執行一個(gè)函數。this
關(guān)鍵字指向當前item(作為函數的第二個(gè)參數傳遞)。如果函數返回 false
,遍歷結束。
$('form input').each(function(index){
console.log('input %d is: %o',
index, this)
})
empty
empty() ? self
從Zepto對象集合中移除所有的dom子節點(diǎn)。
eq
eq(index) ? collection
從當前Zepto對象集合中獲取給定索引號的元素。
$('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集合對象,返回的Zepto集合對象里面的項滿(mǎn)足參數中的css選擇器。如果參數為一個(gè)函數,函數返回有實(shí)際值得時(shí)候,元素才會(huì )被返回。在函數中, this
關(guān)鍵字指向當前的元素。
與此相反的功能,查看not.
find
find(selector) ? collection
find(collection) ? collection v1.0+
find(element) ? collection v1.0+
獲得當前Zepto集合對象內查找符合css選擇器的每個(gè)元素的后代。
如果參數為Zepto集合對象或者元素,過(guò)濾它們,只有當它們在當前Zepto集合對象中時(shí),才回被返回。
var form =
$('#myform')
form.find('input, select')
first
first() ? collection
獲取當前Zepto對象集合中的第一個(gè)元素。
forEach
forEach(function(item, index, array){ ... }, [context])
遍歷當前Zepto集合對象的買(mǎi)個(gè)元素,有點(diǎn)類(lèi)似 each,但是遍歷函數的參數不一樣,當函數返回 false
的時(shí)候,遍歷不會(huì )停止。
這是一個(gè)Zepto提供的方法,不是jquery的API。
get
get() ? array
get(index) ? DOM node
從當前Zepto對象集合中獲取所有元素或單個(gè)元素。當index參數不存在的時(shí)候,以普通數組的方式返回所有的元素。當指定index時(shí),只返回該置的元素。這點(diǎn)與與eq不同,該方法返回的不是Zepto集合對象。
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
判斷當前Zepto對象集合的子元素是否有符合選擇器的元素,或者是否包含指定的dom節點(diǎn),如果有,則返回新的Zepto集合對象,該對象過(guò)濾掉不含有選擇器匹配元素或者不含有指定dom節點(diǎn)的對象。
$('ol > li').has('a[href]')
//=> get only LI elements that contain links
hasClass
hasClass(name) ? boolean
檢查Zepto對象集合中是否有元素含有指定的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對象集合中第一個(gè)元素的高度;或者設置Zepto對象集合中所有元素的高度。
$('#foo').height()
// => 123
$(window).height()
// => 838 (viewport height)
$(document).height()
// => 22302
hide
hide() ? self
通過(guò)設置css的屬性display
為 none
來(lái)將Zepto對象集合中的元素隱藏。
Hide elements in this collection by setting their display
CSS property to
none
.
html
html() ? string
html(content) ? self
html(function(index, oldHtml){ ... }) ? self
獲取或設置Zepto對象集合中元素的HTML內容。當content參數沒(méi)有給定時(shí),返回IZepto對象集合中第一個(gè)元素的innerHtm。當content參數給定時(shí)。用其替換Zepto對象集合中每個(gè)元素的content。content可以是append中描述的所有類(lèi)型。
// 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è)元素的位置。當elemen參數沒(méi)有給出時(shí),返回當前元素在兄弟節點(diǎn)中的位置。當element參數給出時(shí),返回它在當前Zepto對象集合中的位置。如果沒(méi)有該元素,則返回-1。
$('li:nth-child(2)').index()
//=> 1
indexOf
indexOf(element, [fromIndex]) ? number
在當前Zepto中獲取一個(gè)元素的位置。如果formindex參數給出,從該位置往后查找,返回基于0的位置,如果沒(méi)找到,則返回-1。index 方法是基于這個(gè)方法實(shí)現的。
這是一個(gè)Zepto的方法,不是jquer的api。
insertAfter
insertAfter(target) ? self
插入Zepto對象集合中的元素到指定的每個(gè)元素后面的dom中。這個(gè)有點(diǎn)像 after,但是使用方式相反。
$('<p>Emphasis mine.</p>').insertAfter('blockquote')
insertBefore
insertBefore(target) ? self
插入Zepto對象集合中的元素到指定的每個(gè)元素前面的dom中。這個(gè)有點(diǎn)像 before,但是使用方式相反。
$('<p>See the following table:</p>').insertBefore('table')
is
is(selector) ? boolean
判斷當前Zepto元素集合中的第一個(gè)元素是否符css選擇器。對于基礎支持jquery的非標準選擇器類(lèi)似: :visible
包含在可選的“selector”模塊中。
jQuery
CSS extensions 不被支持。 選擇“selector”模塊僅僅能支持有限幾個(gè)最常用的方式。
last
last() ? collection
獲取Zepto集合對象中最后一個(gè)元素。
map
map(function(index, item){ ... }) ? collection
遍歷Zepto對象集合中的所有元素。通過(guò)遍歷函數返回值形成一個(gè)新的集合對象。在遍歷函數中this
關(guān)鍵之指向當前循環(huán)的item(遍歷函數中的第二個(gè)參數)。遍歷中返回 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對象集合中每一個(gè)元素的下一個(gè)兄弟節點(diǎn)(可以選擇性的帶上過(guò)濾選擇器)。
$('dl dt').next()
//=> the DD elements
not
not(selector) ? collection
not(collection) ? collection
not(function(index){ ... }) ? collection
過(guò)濾當前Zepto對象集合,獲取一個(gè)新的Zepto對象集合,它里面的元素不能匹配css選擇器。如果另一個(gè)參數為Zepto集合對象,那么返回的新Zepto對象中的元素都不包含在該參數對象中。如果參數是一個(gè)函數。僅僅包含函數執行為false值得時(shí)候的元素,函數的
this
關(guān)鍵字指向當前循環(huán)元素。
與它相反的功能,查看 filter.
offset
offset() ? object
offset(coordinates) ? self v1.0+
offset(function(index, oldOffset){ ... }) ? self v1.0+
獲得當前元素相對于document的位置。返回一個(gè)對象含有:
top
, left
, width
和height
當給定一個(gè)對象屬性left
和top
使用這些值來(lái)相對于document對每一個(gè)元素進(jìn)行定位。
offsetParent
v1.0+
offsetParent() ? collection
找到第一個(gè)定位過(guò)的祖先元素,在ccs中意味著(zhù)它的position
值為“relative”, “absolute” or “fixed”
parent
parent([selector]) ? collection
獲取Zepto對象集合中每個(gè)元素的直接父元素。如果css選擇器參數給出。過(guò)濾出符合條件的元素。
parents
parents([selector]) ? collection
獲取Zepto對象集合每個(gè)元素所有的祖先元素。如果css選擇器參數給出,過(guò)濾出符合條件的元素。
如果想獲取直接父級元素,使用 parent。如果只想獲取到第一個(gè)符合css選擇器的元素,使用closest。
$('h1').parents()
//=> [<div#container>, <body>, <html>]
pluck
pluck(property) ? array
獲取Zepto對象集合中每一個(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對象集合中第一個(gè)元素的位置。相對于
offsetParent。當絕對定位的一個(gè)素靠近另一個(gè)元素的時(shí)候,這個(gè)方法是有用的。
返回一個(gè)的對象有這些屬性: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
將參數內容插入到每個(gè)匹配元素的前面(元素內部)。插入d的元素可以試html字符串片段,一個(gè)dom節點(diǎn),或者一個(gè)節點(diǎn)的數組。
$('ul').prepend('<li>first list item</li>')
prependTo
prependTo(target) ? self
將所有元素插入到目標前面(元素內)。這有點(diǎn)像prepend,但是是相反的方式。
$('<li>first list item</li>').prependTo('ul')
prev
prev() ? collection
prev(selector) ? collection v1.0+
獲取Zepto對象集合中每一個(gè)元素的前一個(gè)兄弟節點(diǎn),通過(guò)選擇器來(lái)進(jìn)行過(guò)濾。
prop
v1.0+
prop(name) ? value
prop(name, value) ? self
prop(name, function(index, oldValue){ ... }) ? self
讀取或設置dom元素的屬性值。它在讀取屬性值的情況下優(yōu)先于 attr,因為這些屬性值會(huì )因為用戶(hù)的交互發(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
添加元素到當前Zepto對象的最后。
這是一個(gè)zepto的方法,不是jquery的api
ready
ready(function($){ ... }) ? self
添加一個(gè)事件偵聽(tīng)器,當頁(yè)面dom加載完畢 “DOMContentLoaded” 事件觸發(fā)時(shí)觸發(fā)。建議使用 $()來(lái)代替這種用法。
reduce
reduce(function(memo, item, index, array){ ... }, [initial]) ? value
與 Array.reduce有相同的用法,遍歷當前Zepto對象集合。memo是函數上次的返回值。迭代進(jìn)行遍歷。
這是一個(gè)zepto的方法,不是jquery的api
remove
remove() ? self
移出當前Zepto對象中的元素。有效的從dom中移除。
removeAttr
removeAttr(name) ? self
移動(dòng)當前Zepto對象集合中所有元素的指定屬性。
removeClass
removeClass([name]) ? self
removeClass(function(index, oldClassName){ ... }) ? self
移動(dòng)當前Zepto對象集合中所有元素的指定class。如果name參數未給出。將移出所有的class。多個(gè)class參數名稱(chēng)可以利用空格分隔。下例移除了兩個(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
用提供的內容替換所有匹配的元素。(包含元素本身)。content參數可以為
before中描述的類(lèi)型。
scrollTop
v1.0+
scrollTop() ? number
獲取頁(yè)面上的滾動(dòng)元素或者整個(gè)窗口已經(jīng)滾動(dòng)的像素值。
show
show() ? self
恢復Zepto對象集合中每個(gè)元素默認的“display”值。如果你用 hide將元素隱藏,用該屬性可以將其顯示。相當于干掉了display:none
。
siblings
siblings([selector]) ? collection
獲取Zepto集合對象所有兄弟節點(diǎn)。如果css選擇器參數給出。過(guò)濾出符合選擇器的元素。
size
size() ? number
獲取Zepto對象集合中元素的數量。
slice
slice(start, [end]) ? array
array
中提取的方法。從start
開(kāi)始,如果end
指出。提取不包含end
位置的元素。
text
text() ? string
text(content) ? self
獲取或者設置所有Zepto對象的文本內容。當content參數未給出。返回當前Zepto對象集合中第一個(gè)元素的文本內容(包含子節點(diǎn)中的文本內容)。當content參數給出,使用它替換Zepto對象集合中所有元素的文本內容。它有待點(diǎn)似
html,與它不同的是它不能用來(lái)獲取或設置 HTML。
toggle
toggle([setting]) ? self
顯示或隱藏匹配元素。如果 setting
為true,相當于show 法。如果setting
為false。相當于
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è)樣式類(lèi)。如果class的名稱(chēng)存在則刪除它,如果不存在,就添加它。如果 setting
的值為真,這個(gè)功能類(lèi)似于
addClass,如果為假,這個(gè)功能類(lèi)似與 removeClass。
unwrap
unwrap() ? self
將匹配元素的父級元素刪除,保留自身(和兄弟元素,如果存在)在原來(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
獲取或設置匹配元素的值。當value參數不存在。返回第一個(gè)元素的值。如果是<select multiple>
標簽,則返回一個(gè)數組。
width
width() ? number
width(value) ? self
width(function(index, oldWidth){ ... }) ? self
獲取Zepto對象集合中第一個(gè)元素的寬;或者設置Zepto對象集合所有元素的寬。
$('#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參數可以是一個(gè)單獨的元素或者一些嵌套的元素。也可以是一個(gè)html字符串片段或者dom節點(diǎn)。還可以是一個(gè)生成用來(lái)包元素的回調函數,這個(gè)函數返回前兩種類(lèi)型的包裹片段。
需要提醒的是:該方法對于dom中的節點(diǎn)有著(zhù)很好的支持。如果將wrap()
用在一個(gè)新的元素上,然后再將結果插入到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結構。
// wrap all buttons in a single div:
$('a.button').wrap('<div id=buttons />')
wrapInner
wrapInner(structure) ? self
wrapInner(function(index){ ... }) ? self v1.0+
在匹配元素里的內容外包一層結構。
// 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>
檢測方法
Detect module
該檢測方法可以在不同的環(huán)境中微調你的站點(diǎn)或者應用程序,并幫助你識別手機和平板;以及不同的瀏覽器和操作系統。
// 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參數給出,使用它來(lái)擴展出新的事件對象。默認情況下,事件被設置為冒泡方式;這個(gè)可以通過(guò)設置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è)函數,然后返回一個(gè)新函數,并且這個(gè)新函數始終保持了特定的上下文語(yǔ)境,新函數中this
指向context參數。另外一種形式,原始的function是context對像的方法。
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è)處理事件,匹配的元素可能現在或將來(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
類(lèi)似delegate,添加一個(gè)個(gè)事件處理器到符合目前選擇器的所有元素匹配,匹配的元素可能現在或將來(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 注冊的事件(用bind或者用on注冊的事件)。如果沒(méi)有參數,將移出當前元素上所有的注冊事件。
off(type, [selector], function(e){ ... }) ? self
如果selector存在,則相當于delegate。
$("ul").on("click","li",function(){alert("yaotaiyang")});
以上代碼相當于將li的事件代理到ul上。后續添加的li也能擁有以上方法。該事件可以通過(guò)undelegate來(lái)移除。
$("ul").undelegate();
也可用:$("ul").off();
如果selector參數不存在。則相當于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對象集合上。多個(gè)事件可以通過(guò)空格的字符串方式添加?;蛘咭允录?lèi)型、函數對象的 方式。如果css選擇器給出,事件的對象滿(mǎn)足選擇器條件時(shí)。事件才會(huì )被觸發(fā)。
事件處理程序在觸發(fā)事件元素或者css選擇器匹配的元素的上下文中執行(this指向觸發(fā)事件的元素)。
當事件處理程序返回false
, 或調用preventDefault()
,瀏覽器的默認事件將會(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存在,則相當于delegate。
$("ul").on("click","li",function(){alert("yaotaiyang")});
以上代碼相當于將li的事件代理到ul上。后續添加的li也能擁有以上方法。該事件可以通過(guò)undelegate來(lái)移除。
$("ul").undelegate();
也可用:$("ul").off();
如果selector參數不存在。則相當于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è)處理事件到元素。處理函數在每個(gè)元素上最多執行一次。
trigger
trigger(event, [data])
在Zepto對象集合的元素上觸發(fā)指定的事件。事件可以是一個(gè)字符串,也可以是一個(gè) $.Event 對象。如果data參數存在,它會(huì )作為參數傳遞給事件函數。
// 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 注冊的事件。
undelegate
????
Deprecated, use off instead.
undelegate(selector, type, function(e){ ... }) ? self
undelegate(selector, { type: handler, type2: handler2, ... }) ? self
移除通過(guò)delegate 注冊的事件。
Ajax請求
$.ajax
$.ajax(options) ? XMLHttpRequest
執行Ajax請求。請求地址可以是本地的或者跨域的,在支持的瀏覽器中通過(guò)
HTTP access control或者通過(guò)
JSONP來(lái)完成。
參數:
type
(默認: “GET”):請求方法 (“GET”, “POST”, or other)
url
(默認: 當前地址):發(fā)送請求的地址
data
(默認:none):發(fā)送到服務(wù)器的數據;如果是get請求,它會(huì )自動(dòng)被作為參數拼接到url上。非String對象將通過(guò)
$.param 得到序列化字符串。
processData
(默認: true): 對于非Get請求。是否自動(dòng)將 data
轉換為字符串。
-
contentType
(默認: “application/x-www-form-urlencoded”): 發(fā)送信息至服務(wù)器時(shí)內容編碼類(lèi)型。 (這也可以通過(guò)設置headers
headers
)。通過(guò)設置 false
跳過(guò)設置默認值。
-
dataType
(默認: none):預期服務(wù)器返回的數據類(lèi)型(“json”, “jsonp”, “xml”, “html”, or “text”)
timeout
(默認: 0
): 設置請求超時(shí)時(shí)間(毫秒),0
表示不超時(shí)。
headers
(默認:{}
): 一個(gè)額外的"{鍵:值}"對映射到請求一起發(fā)送
async
(默認: true):默認設置下,所有請求均為異步。如果需發(fā)送同步請求,請將此設置為 false
。
global
(默認: true):請求將觸發(fā)全局AJAX事件處理程序,設置為 false 將不會(huì )觸發(fā)全局 AJAX 事件。
context
(默認: window): 這個(gè)對象用于設置Ajax相關(guān)回調函數的上下文(this指向)。
traditional
(默認:false):激活傳統的方式通過(guò)$.param來(lái)得到序列化的 data
。
如果URL中含有 =?
或者dataType
是“jsonp”,這講求將會(huì )通過(guò)注入一個(gè)
<script>
標簽來(lái)代替使用 XMLHttpRequest (查看 JSONP)。此時(shí)對
contentType
, dataType
, headers
有限制,async
不被支持。
Ajax 回調函數
你可以指定以下的回調函數,給出的執行順序:
-
beforeSend(xhr, settings)
:請求發(fā)出前調用,它接收xhr對象和settings作為參數對象。如果它返回 false
,請求將被取消。
-
success(data, status, xhr)
:請求成功之后調用。傳入返回后的數據,以及包含成功代碼的字符串。
-
error(xhr, errorType, error)
:請求出錯時(shí)調用。 (超時(shí),解析錯誤,或者狀態(tài)碼不在HTTP 2xx)。
-
complete(xhr, status)
:請求完成時(shí)調用,無(wú)論請求失敗或成功。
Ajax 事件
當global: true
時(shí)。在A(yíng)jax請求生命周期內,以下這些事件將被觸發(fā)。
-
ajaxStart
(global):如果沒(méi)有其他Ajax請求當前活躍將會(huì )被觸發(fā)。
-
ajaxBeforeSend
(data: xhr, options):再發(fā)送請求前,可以被取消。
-
ajaxSend
(data: xhr, options):像 ajaxBeforeSend
,但不能取消。
-
ajaxSuccess
(data: xhr, options, data):當返回成功時(shí)。
-
ajaxError
(data: xhr, options, error):當有錯誤時(shí)。
-
ajaxComplete
(data: xhr, options):請求已經(jīng)完成后,無(wú)論請求是成功或者失敗。
-
ajaxStop
(global):如果這是最后一個(gè)活躍著(zhù)的Ajax請求,將會(huì )被觸發(fā)。
默認情況下,Ajax事件在document對象上觸發(fā)。然而,如果請求的
context
是一個(gè)dom節點(diǎn),該事件會(huì )在此節點(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
執行JSONP跨域獲取數據。
此方法相對 $.ajax 沒(méi)有優(yōu)勢,建議不要使用。
$.ajaxSettings
一個(gè)包含Ajax請求的默認設置的對象。大部分的設置在 $.ajax中已經(jīng)描述。以下設置為全局非常有用:
Object containing the default settings for Ajax requests. Most settings are
described in $.ajax. The ones that are useful when set globally are:
timeout
(默認: 0
):對Ajax請求設置一個(gè)非零的值指定一個(gè)默認的超時(shí)時(shí)間,以毫秒為單位。
global
(默認: true):設置為false。以防止觸發(fā)Ajax事件。
xhr
(默認:XMLHttpRequest factory):設置為一個(gè)函數,它返回XMLHttpRequest實(shí)例(或一個(gè)兼容的對象)
accepts
: 從服務(wù)器請求的MIME類(lèi)型,指定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+
執行一個(gè)Ajax GET請求。這是一個(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請求獲取JSON數據。這是一個(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è)序列化的數組或對象,適用于一個(gè)URL 地址查詢(xún)字符串或Ajax請求。如果shallow設置為true。嵌套對象不會(huì )被序列化,嵌套數組的值不會(huì )使用放括號在他們的key上。
此外,還接受 serializeArray格式的數組,其中每個(gè)項都有 “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
執行Ajax POST請求。這是一個(gè) $.ajax 的簡(jiǎn)寫(xiě)方式。
$.post('/create',
{ sample:
'payload' },
function(response){
// process response
})
data
參數可以是一個(gè)字符串:
$.post('/create',
$('#some_form').serialize(),
function(response){
// ...
})
load
load(url, function(data, status, xhr){ ... }) ? self
通過(guò)GET Ajax載入遠程 HTML 文件代碼并插入至 DOM 中。另外,一個(gè)css選擇器可以在url中指定,像這樣,可以使用匹配selector選擇器的HTML內容來(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')
當這種方法執行, 它將檢索 foo.html
頁(yè)面的內容,Zepto會(huì )獲取ID為bar元素的內容,并且插入到ID為 some_element 元素,而其他的被檢索到的元素將被廢棄。
如果css選擇器不存在。將使用完整的返回文本。
請注意,在沒(méi)有選擇器的情況下,任何javascript塊都會(huì )執行。如果帶上選擇器,匹配選擇器內的script將會(huì )被刪除。
serialize
serialize() ? string
在A(yíng)jax post請求中將用作提交的表單元素的值編譯成 URL-encoded 字符串。
serializeArray
serializeArray() ? array
將用作提交的表單元素的值編譯成擁有name和value對象組成的數組。不能使用的表單元素,buttons,未選中的radio buttons/checkboxs 將會(huì )被跳過(guò)。結果不包含file inputs的數據。
$('form').serializeArray()
//=> [{ name: 'size', value: 'micro' },
// { name: 'name', value: 'Zepto' }]
submit
submit() ? self
submit(function(e){ ... }) ? self
為 "submit" 事件綁定一個(gè)處理函數,或者觸發(fā)元素上的 "submit" 事件。當參數function沒(méi)有給出時(shí),觸發(fā)當前表單“submit”事件,并且執行默認的提交表單行為,除非調用了
preventDefault()
。
當function參數給出時(shí),在當前元素上它簡(jiǎn)單得為其在“submit”事件綁定一個(gè)處理函數。
效果
$.fx
全局動(dòng)畫(huà)設置:
-
$.fx.off
(在支持css transition 的瀏覽器中默認為false):設置true來(lái)禁止所有animate()
transitions。
-
$.fx.speeds
:用來(lái)設置動(dòng)畫(huà)時(shí)間的對象。
_default
(400 ms)
fast
(200 ms)
slow
(600 ms)
改變現有值或者添加一個(gè)新屬性去影響使用一個(gè)字符串來(lái)設置時(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
對當前Zepto集合對象中元素進(jìn)行css transition屬性平滑過(guò)渡。
properties
: 一個(gè)對象,該對象包含了css動(dòng)畫(huà)的值,或者css幀動(dòng)畫(huà)的名稱(chēng)。
duration
(默認 400):以毫秒為單位的時(shí)間,或者一個(gè)字符串。
easing
(默認 linear
):指定動(dòng)畫(huà)的緩動(dòng)類(lèi)型,使用以下一個(gè):
complete
:動(dòng)畫(huà)完成時(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參數為 0
或
$.fx.off
為 true(在不支持css transitions的瀏覽器中默認為true),動(dòng)畫(huà)將不被執行;替代動(dòng)畫(huà)效果的目標位置會(huì )即刻生效。類(lèi)似的,如果指定的動(dòng)畫(huà)不是通過(guò)動(dòng)畫(huà)完成,而且動(dòng)畫(huà)的目標位置即可生效。這種情況下沒(méi)有動(dòng)畫(huà),
complete
方法也不會(huì )被調用。
如果第一個(gè)參數是字符串而不是一個(gè)對象,它將被當作一個(gè)css關(guān)鍵幀動(dòng)畫(huà) CSS
keyframe animation的名稱(chēng)。
$("#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的相對變化("=+10px") syntax 也不支持。請查看
list of animatable properties。瀏覽器的支持可能不同,所以一定要測試你所想要支持的瀏覽器。
觸控
Touch events
“touch”模塊添加以下事件,可以 on 和 off。
tap
—元素tap的時(shí)候觸發(fā)。
singleTap
and doubleTap
— 這一對事件可以用來(lái)檢測元素上的單擊和雙擊。(如果你不需要檢測單擊、雙擊,使用
tap
代替)。
longTap
— 當一個(gè)元素被按住超過(guò)750ms觸發(fā)。
swipe
, swipeLeft
, swipeRight
, swipeUp
,
swipeDown
— 當元素被劃過(guò)時(shí)觸發(fā)。(可選擇給定的方向)
這些事件也是所有Zepto對象集合上的快捷方法。
<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>