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