$()

$(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 節點。此文件中的所有方法都是集合方法，除了直接在 dollar（Zepto）物件上的方法，例如 $.extend。

如果給定一個內容（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」模組提供有限的支援，支援幾個最常用的偽選取器，且可加入以與現有的程式碼或外掛程式相容。

Zepto 僅會將全域的 $ 設定為自身，如果它尚未定義。這可讓您將 Zepto 與使用例如 Prototype.js 等舊版程式碼搭配使用。只要先載入 Prototype，Zepto 就會不會變更 Prototype 的 $ 函式。Zepto 會永遠將全域的 Zepto 設定為自身。

$.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

反覆處理陣列元素或物件的鍵值對。從反覆處理函式傳回 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 集合中都可用。

以下是 Zepto 的 empty() 方法的範例實作

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

$.grep v1.0+

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

取得一個新的陣列，其中僅包含呼叫函式傳回 true 的項目。

$.inArray v1.0+

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

取得元素在陣列中的位置，如果找不到，則傳回 -1。

$.isArray

$.isArray(object) ⇒ boolean

如果物件是陣列，則為 True。

$.isFunction

$.isFunction(object) ⇒ boolean

如果物件是函式，則為 True。

$.isNumeric v1.2+

$.isNumeric(value) ⇒ boolean

如果值是有限數字或表示數字的字串，則為 True。

$.isPlainObject v1.0+

$.isPlainObject(object) ⇒ boolean

如果物件是「純」JavaScript 物件，則為 True，這僅對物件文字和使用 new Object 建立的物件為真。

$.isPlainObject({})         // => true
$.isPlainObject(new Object) // => true
$.isPlainObject(new Date)   // => false
$.isPlainObject(window)     // => false

$.isWindow v1.0+

$.isWindow(object) ⇒ boolean

如果物件是視窗物件，則為 True。這對每個都有自己視窗的 iframe，且這些物件無法通過常規 obj === window 檢查時很有用。

$.map

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

反覆執行集合中的元素，並傳回執行迭代器函式的全部結果，並濾除 `null` 和 `undefined` 值。

$.noop v1.2+

var callback = $.noop

一個不執行任何動作的函式參考。

$.parseJSON v1.0+

$.parseJSON(string) ⇒ object

原生 `JSON.parse` 方法的別名。

$.trim v1.0+

$.trim(string) ⇒ string

移除字串開頭和結尾的空白，就像 String.prototype.trim() 一樣。

$.type v1.0+

$.type(object) ⇒ string

取得物件的字串類型。可能的類型有：null undefined boolean number string function array date regexp object error。

對於其他物件，它只會回報「object」。若要找出物件是否為純粹的 JavaScript 物件，請使用 isPlainObject。

add

add(selector, [context]) ⇒ self

透過在整個文件中執行 CSS 選擇器，或是在給定的 context 中執行，來修改目前的集合，並加入結果。

addClass

addClass(name) ⇒ self
addClass(function(index, oldClassName){ ... }) ⇒ self

在集合中每個元素中加入類別名稱。多個類別名稱可以用空格分隔的字串表示。

after

after(content) ⇒ self

在集合中每個元素之後加入內容至 DOM。內容可以是 HTML 字串、DOM 節點或節點陣列。

$('form label').after('<p>A note below the label</p>')

append

append(content) ⇒ self

在集合中每個個別元素內加入內容至 DOM。內容可以是 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 屬性。當沒有給定值時，會從集合中第一個元素讀取指定的屬性。當給定值時，會在集合中每個元素上將屬性設定為該值。當值為 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

在集合中每個元素之前加入內容至 DOM。內容可以是 HTML 字串、DOM 節點或節點陣列。

$('table').before('<p>See the following table:</p>')

children

children([selector]) ⇒ collection

取得目前集合中每個元素的直接子元素。如果給定選擇器，則會過濾結果，只包含符合 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]

從目前元素向上遍歷，找到與選擇器相符的第一個元素。如果給定內容節點，只考慮其後代元素。此方法類似於 parents(selector)，但只會傳回第一個相符的祖先。

如果給定 Zepto 集合或元素，結果元素必須與給定元素之一相符，而不是選擇器。

var input = $('input[type=text]')
input.closest('form')

concat

concat(nodes, [node2, ...]) ⇒ self

透過新增元素到集合中來修改集合。如果任何參數是陣列，其元素會合併到目前集合中。

這是 Zepto 提供的方法，不屬於 jQuery API。

contents v1.0+

contents() ⇒ collection

取得集合中每個元素的子元素，包括文字和註解節點。

css

css(property) ⇒ value
css([property1, property2, ...]) ⇒ object [v1.1]
css(property, value) ⇒ self
css({ property: value, property2: value2, ... }) ⇒ self

讀取或設定 DOM 元素的 CSS 屬性。當沒有給定值時，傳回集合中第一個元素的 CSS 屬性。當給定值時，將屬性設定為集合中每個元素的該值。

可以透過傳遞屬性名稱陣列一次擷取多個屬性。可以透過傳遞物件給方法來設定多個屬性。

當屬性的值為空白（空字串、null 或未定義）時，該屬性會被移除。當給定無單位數字值時，會在需要單位的屬性後面加上「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 })

// read multiple properties:
elem.css(['backgroundColor', 'fontSize'])['fontSize']

data

data(name) ⇒ value
data(name, value) ⇒ self

讀取或寫入 data-* DOM 屬性。行為類似於 attr，但會在屬性名稱前面加上 data-。

讀取屬性值時，套用下列轉換：v1.0+

• 「true」、「false」和「null」會轉換為對應的類型；
• 數字值會轉換為實際數字類型；
• 如果它是有效的 JSON，會剖析 JSON 值；
• 其他所有內容會傳回字串。

Zepto 的 `data()` 基本實作只儲存字串。若要儲存任意物件，請在您的 Zepto 自訂建置中包含選用的「資料」模組。

each

each(function(index, item){ ... }) ⇒ self

遍歷集合中的每個元素。在迭代器函式內，this 關鍵字是指目前項目（也傳遞為函式的第二個參數）。如果迭代器函式傳回 false，迭代會停止。

$('form input').each(function(index){
  console.log('input %d is: %o', index, this)
})

empty

empty() ⇒ self

清除集合中每個元素的 DOM 內容。

eq

eq(index) ⇒ collection

從目前集合中取得由索引指定的項目。

$('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]

篩選集合，只包含符合 CSS 選擇器的項目。如果給定函式，只傳回函式傳回真值的元素。在函式中，this 關鍵字是指目前元素。

相反，請參閱 not。

find

find(selector) ⇒ collection
find(collection) ⇒ collection [v1.0]
find(element) ⇒ collection [v1.0]

尋找與在目前集合中節點範圍執行 CSS 選擇器相符的元素。

如果給定 Zepto 集合或元素，將這些元素篩選為目前集合中元素的後代。

var form = $('#myform')
form.find('input, select')

first

first() ⇒ collection

取得目前集合的第一個元素。

$('form').first()

forEach

forEach(function(item, index, array){ ... }, [context])

遍歷集合中的每個元素。類似於 each，但迭代器函式的參數不同，且從迭代器傳回 false 也不會停止迭代。

這是 Zepto 提供的方法，不屬於 jQuery API。

get

get() ⇒ array
get(index) ⇒ DOM node

從目前集合取得所有元素或單一元素。如果未給定索引，會傳回一般陣列中的所有元素。如果指定索引，只傳回該位置的元素。這與 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

篩選目前集合，只包含任何後代符合選擇器或包含特定 DOM 節點的元素。

$('ol > li').has('a[href]')
//=> get only LI elements that contain links

hasClass

hasClass(name) ⇒ boolean

檢查集合中是否有任何元素具有指定的類別。

height

height() ⇒ number
height(value) ⇒ self
height(function(index, oldHeight){ ... }) ⇒ self

取得集合中第一個元素的高度；或設定集合中所有元素的高度。

$('#foo').height()   // => 123
$(window).height()   // => 838 (viewport height)
$(document).height() // => 22302

hide

hide() ⇒ self

透過將 display CSS 屬性設定為 none，隱藏此集合中的元素。

html

html() ⇒ string
html(content) ⇒ self
html(function(index, oldHtml){ ... }) ⇒ self

取得或設定集合中元素的 HTML 內容。如果未給定內容，會傳回第一個元素的 innerHTML。如果給定內容，使用它來取代每個元素的內容。內容可以是 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 href="http://twitter.com/$2">$2</a>')
})

index

index([element]) ⇒ number

取得元素的位置。如果未給定元素，會傳回目前元素在其同層元素中的位置。如果給定元素，會傳回其在目前集合中的位置。如果找不到，會傳回 -1。

$('li:nth-child(2)').index()  //=> 1

indexOf

indexOf(element, [fromIndex]) ⇒ number

取得目前集合中元素的位置。如果給定 fromIndex 數字，只從該位置開始搜尋。找到時傳回以 0 為基礎的位置，找不到時傳回 -1。建議使用 index，而非此方法。

這是 Zepto 提供的方法，不屬於 jQuery API。

insertAfter

insertAfter(target) ⇒ self

將目前集合中的元素插入 DOM 中目標元素之後。這類似於 after，但運算元相反。

$('<p>Emphasis mine.</p>').insertAfter('blockquote')

insertBefore

insertBefore(target) ⇒ self

將目前集合中的元素插入 DOM 中每個目標元素之前。這類似於 before，但運算元相反。

$('<p>See the following table:</p>').insertBefore('table')

is

is(selector) ⇒ boolean

檢查目前集合的第一個元素是否符合 CSS 選擇器。若要基本支援 jQuery 的非標準偽選擇器，例如 :visible，請包含選用的「selector」模組。

jQuery CSS 延伸 不受支援。選用的「selector」模組只提供對幾個最常用延伸的有限支援。

last

last() ⇒ collection

取得目前集合的最後一個元素。

$('li').last()

map

map(function(index, item){ ... }) ⇒ collection

遍歷所有元素，並收集迭代器函式的傳回值。在迭代器函式中，this 關鍵字指的是目前項目（也作為函式的第二個引數傳遞）。

傳回迭代器函式結果的集合，並濾出 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]

取得集合中每個元素的下一個兄弟元素，可選擇用選擇器過濾。

$('dl dt').next()   //=> the DD elements

not

not(selector) ⇒ collection
not(collection) ⇒ collection
not(function(index){ ... }) ⇒ collection

過濾目前集合，取得一個不符合 CSS 選擇器的新元素集合。如果給定另一個集合，而非選擇器，只傳回集合中不存在的元素。如果給定一個函式，只傳回函式傳回假值元素。在函式中，this 關鍵字指的是目前元素。

反之，請參閱 filter。

offset

offset() ⇒ object
offset(coordinates) ⇒ self [v1.0]
offset(function(index, oldOffset){ ... }) ⇒ self [v1.0]

取得文件中的元素位置。傳回一個具有下列屬性的物件：top、left、width 和 height。

當給定一個具有 left 和 top 屬性的物件時，使用這些值將集合中的每個元素相對於文件定位。

offsetParent v1.0+

offsetParent() ⇒ collection

找出第一個定位的祖先元素，意即其 CSS position 值為「relative」、「absolute」或「fixed」。

parent

parent([selector]) ⇒ collection

取得集合中每個元素的直接父元素。如果給予 CSS 選擇器，則過濾結果，僅包含符合選擇器的元素。

parents

parents([selector]) ⇒ collection

取得集合中每個元素的所有祖先元素。如果給予 CSS 選擇器，則過濾結果，僅包含符合選擇器的元素。

若要僅取得直接父元素，請使用 parent。若要僅取得第一個符合選擇器的祖先元素，請使用 closest。

$('h1').parents()   //=> [<div#container>, <body>, <html>]

pluck

pluck(property) ⇒ array

取得集合中每個元素的名稱屬性的值，並過濾掉 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

取得集合中第一個元素相對於 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

在集合中每個元素的 DOM 內置入內容。內容可以是 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]

取得集合中每個元素的前一個兄弟元素，可選擇使用選擇器過濾。

prop v1.0+

prop(name) ⇒ value
prop(name, value) ⇒ self
prop(name, function(index, oldValue){ ... }) ⇒ self
prop({ name: value, name2: value2, ... }) ⇒ self

讀取或設定 DOM 元素的屬性。在讀取會隨著使用者互動而變化的屬性值（例如 checked 和 selected）時，應優先使用此方法，而非 attr。

例如 for、class、readonly 等簡短且小寫的名稱會對應到實際屬性，例如 htmlFor、className、readOnly 等。

push

push(element, [element2, ...]) ⇒ self

將元素新增到目前集合的結尾。

這是 Zepto 提供的方法，不屬於 jQuery API。

ready

ready(function($){ ... }) ⇒ self

附加一個事件處理常式，用於在頁面上的 DOM 準備就緒時觸發的「DOMContentLoaded」事件。建議使用 $() 函式，而非此方法。

reduce

reduce(function(memo, item, index, array){ ... }, [initial]) ⇒ value

與 Array.reduce 相同，會遍歷目前的集合。

這是 Zepto 提供的方法，不屬於 jQuery API。

remove

remove() ⇒ self

從其父節點移除目前集合中的元素，有效地將它們從 DOM 中分離。

removeAttr

removeAttr(name) ⇒ self

從集合中的所有元素移除指定的屬性。可以將多個要移除的屬性傳遞為以空白分隔的清單。

removeClass

removeClass([name]) ⇒ self
removeClass(function(index, oldClassName){ ... }) ⇒ self

從集合中的所有元素移除指定的類別名稱。如果未提供類別名稱，則移除所有類別名稱。可以在以空白分隔的字串中提供多個類別名稱。

removeProp v1.2+

removeProp(name) ⇒ self

從集合中每個 DOM 節點移除屬性。這是使用 JavaScript 的 delete 算子完成的。請注意，嘗試移除某些內建 DOM 屬性（例如 className 或 maxLength）不會產生任何影響，因為瀏覽器不允許移除這些屬性。

replaceWith

replaceWith(content) ⇒ self

使用新內容取代集合中的每個元素（其內容和元素本身）。內容可以是 before 中描述的任何類型。

scrollLeft v1.1+

scrollLeft() ⇒ number
scrollLeft(value) ⇒ self

取得或設定到目前為止在頁面上的視窗或可捲動元素中向右捲動的像素數。

scrollTop v1.0+

scrollTop() ⇒ number
scrollTop(value) ⇒ self [v1.1]

取得或設定到目前為止在頁面上的視窗或可捲動元素中向下捲動的像素數。

show

show() ⇒ self

還原陣列中每個元素的「display」屬性的預設值，有效地顯示它們（如果它們使用 hide 隱藏）。

siblings

siblings([selector]) ⇒ collection

取得集合中每個元素的所有同層節點。如果指定 CSS 選擇器，則篩選結果以僅包含符合選擇器的元素。

size

size() ⇒ number

取得此集合中的元素數。

slice

slice(start, [end]) ⇒ array

從 start 索引開始，擷取此陣列的子集。如果指定 end，則擷取至 end 索引（不包含）。

text

text() ⇒ string
text(content) ⇒ self
text(function(index, oldText){ ... }) ⇒ self [v1.1.4]

取得或設定集合中元素的文字內容。如果未提供內容，則傳回集合中所有元素的文字內容，如果沒有元素，則傳回 null。如果提供內容，則使用它來取代集合中每個元素的文字內容。這類似於 html，但例外情況是它不能用於取得或設定 HTML。

toggle

toggle([setting]) ⇒ self

根據第一個元素是否可見，在顯示和隱藏每個元素之間切換。如果存在 setting，則如果設定為真，此方法會像 show 一樣運作，否則會像 hide 一樣運作。

var input = $('input[type=text]')
$('#too_long').toggle(input.val().length > 140)

toggleClass

toggleClass(names, [setting]) ⇒ self
toggleClass(function(index, oldClassNames){ ... }, [setting]) ⇒ self

在集合中每個元素中切換給定的類別名稱（以空白分隔）。如果類別名稱存在於元素上，則移除它；否則，則新增它。如果存在 setting，則如果設定為真，此方法會像 addClass 一樣運作，否則會像 removeClass 一樣運作。

unwrap

unwrap() ⇒ self

移除集合中每個元素的直接父節點，並將其子節點放在其位置。基本上，此方法移除一層祖先，同時將目前的元素保留在 DOM 中。

$(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

取得或設定表單控制項的值。當未指定值時，傳回第一個元素的值。對於 <select multiple>，會傳回一個值陣列。當指定值時，將所有元素設定為此值。

width

width() ⇒ number
width(value) ⇒ self
width(function(index, oldWidth){ ... }) ⇒ self

取得集合中第一個元素的寬度；或設定集合中所有元素的寬度。

$('#foo').width()   // => 123
$(window).width()   // => 768 (viewport width)
$(document).width() // => 768 

wrap

wrap(structure) ⇒ self
wrap(function(index){ ... }) ⇒ self [v1.0]

將集合中的每個元素個別包覆在 DOM 結構中。結構可以是單一元素或多個巢狀元素，並可以傳入 HTML 字串或 DOM 節點，或作為針對每個元素呼叫且傳回前兩種型別之一的函式。

請注意，包裝最適合用於操作 DOM 中的節點。在對新元素呼叫 wrap()，然後將結果插入文件時，元素將會失去包裝。

// 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 字串或 DOM 節點。

// wrap all buttons in a single div:
$('a.button').wrapAll('<div id=buttons />')

wrapInner

wrapInner(structure) ⇒ self
wrapInner(function(index){ ... }) ⇒ self [v1.0]

將每個元素的內容個別包覆在結構中。結構可以是單一元素或多個巢狀元素，並可以傳入 HTML 字串或 DOM 節點，或作為針對每個元素呼叫且傳回前兩種型別之一的函式。

// 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>')

偵測模組

「偵測」模組有助於微調您的網站或應用程式以適應不同的環境，並協助您辨別手機和平板電腦；以及不同的瀏覽器引擎和作業系統版本。

// 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.ipod // [v1.1]
$.os.touchpad
$.os.kindle

// specific browser
$.browser.chrome
$.browser.firefox
$.browser.safari // [v1.1]
$.browser.webview // (iOS) [v1.1]
$.browser.silk
$.browser.playbook
$.browser.ie // [v1.1]

// 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 事件。如果指定屬性物件，請使用它來延伸新的事件物件。事件預設設定為冒泡；這可以透過將 bubbles 屬性設定為 false 來關閉。

使用此函式初始化的事件可以用 trigger 觸發。

$.Event('mylib:change', { bubbles: false })

$.proxy v1.0+

$.proxy(fn, context) ⇒ function
$.proxy(fn, context, [additionalArguments...]) ⇒ function [v1.1.4]
$.proxy(context, property) ⇒ function
$.proxy(context, property, [additionalArguments...]) ⇒ function [v1.1.4]

取得一個函式，以確保原始函式中 this 的值是指向內容物件。在第二個表單中，原始函式會從內容物件的特定屬性讀取。

如果傳遞的引數超過第 2 個引數，則會將它們套用至包裝函式的每個呼叫中，並置於其實際引數之前。

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

bind 🦄🔨

已棄用，請改用 on。

bind(type, function(e){ ... }) ⇒ self
bind(type, [data], function(e){ ... }) ⇒ self [v1.1]
bind({ type: handler, type2: handler2, ... }) ⇒ self
bind({ type: handler, type2: handler2, ... }, [data]) ⇒ self [v1.1]

將事件處理常式附加至元素。

delegate 🦄🔨

已棄用，請改用 on。

delegate(selector, type, function(e){ ... }) ⇒ self
delegate(selector, { type: handler, type2: handler2, ... }) ⇒ self

附加只在事件源自與選擇器相符的節點時才會觸發的事件處理常式。

die 🦄🔨

已棄用，請改用 off。

die(type, function(e){ ... }) ⇒ self
die({ type: handler, type2: handler2, ... }) ⇒ self

移除由 live 新增的事件處理常式。

event.isDefaultPrevented v1.1+

event.isDefaultPrevented() ⇒ boolean

如果已針對此事件執行個體呼叫 preventDefault()，則傳回 true。這可作為跨平台的原生 defaultPrevented 屬性替代方案，而此屬性在某些瀏覽器中不存在或不可靠。

// trigger a custom event and check whether it was cancelled
var event = $.Event('custom')
element.trigger(event)
event.isDefaultPrevented()

event.isImmediatePropagationStopped v1.1+

event.isImmediatePropagationStopped() ⇒ boolean

如果已針對此事件執行個體呼叫 stopImmediatePropagation()，則傳回 true。Zepto 在不支援原生方法的瀏覽器中實作原生方法（例如舊版的 Android）。

event.isPropagationStopped v1.1+

event.isPropagationStopped() ⇒ boolean

如果已針對此事件執行個體呼叫 stopPropagation()，則傳回 true。

live 🦄🔨

已棄用，請改用 on。

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 新增的事件處理常式。若要移除特定事件處理常式，則必須傳遞與用於 on() 相同的函式。否則，僅呼叫此方法並傳入事件類型，即可移除該類型的所有處理常式。若在未傳入引數的情況下呼叫，則會移除目前元素上註冊的所有事件處理常式。

on

on(type, [selector], function(e){ ... }) ⇒ self
on(type, [selector], [data], function(e){ ... }) ⇒ self [v1.1]
on({ type: handler, type2: handler2, ... }, [selector]) ⇒ self
on({ type: handler, type2: handler2, ... }, [selector], [data]) ⇒ self [v1.1]

將事件處理常式新增至集合中的元素。多個事件類型可傳入以空白分隔的字串，或以事件類型為鍵值、處理常式為值的物件。如果給定 CSS 選取器，則只有當事件來自與選取器相符的元素時，才會呼叫處理常式函式。

如果給定 data 引數，則此值會在事件處理常式執行期間作為 event.data 屬性提供。

事件處理常式會在附加處理常式的元素的內容中執行，或在提供選取器的情況下執行相符元素的內容中。當事件處理常式傳回 false 時，會針對目前事件呼叫 preventDefault() 和 stopPropagation()，以防止預設瀏覽器動作，例如追蹤連結。

如果將 false 作為引數傳遞給此方法，取代回呼函式，則等同於傳遞傳回 false 的函式。

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){ ... })
// disable following any navigation link on the page
$(document).on('click', 'nav a', false)

one

one(type, [selector], function(e){ ... }) ⇒ self
one(type, [selector], [data], function(e){ ... }) ⇒ self [v1.1]
one({ type: handler, type2: handler2, ... }, [selector]) ⇒ self
one({ type: handler, type2: handler2, ... }, [selector], [data]) ⇒ self [v1.1]

新增一個在第一次執行時會移除自己的事件處理常式，確保處理常式只觸發一次。請參閱 .on() 以了解 selector 和 data 引數的說明。

trigger

trigger(event, [args]) ⇒ self

在集合的元素上觸發指定的事件。事件可以是字串類型，或使用 $.Event 取得的完整事件物件。如果給定 args 陣列，則會作為事件處理常式的附加引數傳遞。

// 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, [args]) ⇒ self

類似 trigger，但只會觸發目前元素上的事件處理常式，而且不會冒泡。

解除繫結 🦄🔨

已棄用，請改用 off。

unbind(type, function(e){ ... }) ⇒ self
unbind({ type: handler, type2: handler2, ... }) ⇒ self

解除使用 bind 新增的事件處理常式。

解除委派 🦄🔨

已棄用，請改用 off。

undelegate(selector, type, function(e){ ... }) ⇒ self
undelegate(selector, { type: handler, type2: handler2, ... }) ⇒ self

解除使用 delegate 新增的事件處理常式。

$.ajax

$.ajax(options) ⇒ XMLHttpRequest

執行 Ajax 要求。它可以是對本機資源，或透過瀏覽器中的 HTTP 存取控制 支援或 JSONP 進行跨網域。

選項

• type (預設值： “GET”)：HTTP 要求方法（“GET”、“POST”或其他）
• url (預設值：目前 URL)：執行要求的 URL
• data (預設值：無)：要求的資料；對於 GET 要求，它會附加到 URL 的查詢字串。非字串物件將會使用 $.param 序列化
• processData (預設值：true)：是否自動將非 GET 要求的 data 序列化為字串
• contentType (預設值： “application/x-www-form-urlencoded”)：傳送到伺服器的資料的內容類型（也可以透過 headers 設定）。傳遞 false 以略過設定預設值。
• mimeType (預設值：無)：覆寫回應的 MIME 類型。 v1.1+
• dataType (預設值：無)：預期從伺服器收到的回應類型。json、jsonp、script、xml、html 或 text 之一。
• jsonp (預設值： “callback”)：JSONP 回呼查詢參數的名稱
• jsonpCallback (預設值： “jsonp{N}”)：全域 JSONP 回呼函數名稱的字串（或傳回名稱的函數）。設定此項以啟用瀏覽器快取。 v1.1+
• timeout (預設值：0)：要求逾時（毫秒），0 表示沒有逾時
• headers：Ajax 要求的其他 HTTP 標頭物件
• async (預設值：true)：設定為 false 以發出同步（封鎖）要求
• global (預設值：true)：在此要求中觸發全域 Ajax 事件
• context (預設值：視窗)：在其中執行回呼的內容
• traditional (預設值：false)：使用 $.param 啟用 data 參數的傳統（淺層）序列化
• cache（預設值：true）：是否允許瀏覽器快取 GET 回應。自 v1.1.4 起，dataType: "script" 或 jsonp 的預設值為 false。
• xhrFields（預設值：none）：包含屬性的物件，會逐字複製到 XMLHttpRequest 實例中。 v1.1+
• username 和 password（預設值：none）：HTTP 基本驗證認證資訊。 v1.1+

如果 URL 包含 =? 或 dataType 為「jsonp」，則會透過插入 <script> 標籤來執行請求，而不是使用 XMLHttpRequest（請參閱 JSONP）。這會限制 contentType、dataType、headers 和 async 無法支援。

Ajax 回呼

您可以指定以下回呼函式，這些函式會依執行順序提供

1. beforeSend(xhr, settings)：在傳送請求之前。提供對 xhr 物件的存取權，並允許變更設定。從函式傳回 false 以取消請求

2. success(data, status, xhr)：當請求成功時

3. error(xhr, errorType, error)：如果發生錯誤（逾時、解析錯誤或狀態碼不在 HTTP 2xx 中）

4. complete(xhr, status)：在請求完成後，無論是錯誤或成功

Promise 回呼介面 v1.1+

如果載入選用模組「callbacks」和「deferred」，則從 $.ajax() 呼叫傳回的 XHR 物件會實作 promise 介面，以透過串連新增回呼

xhr.done(function(data, status, xhr){ ... })
xhr.fail(function(xhr, errorType, error){ ... })
xhr.always(function(){ ... })
xhr.then(function(){ ... })

這些方法會取代 success、error 和 complete 回呼選項。

Ajax 事件

這些事件會在使用預設設定 global: true 執行 Ajax 請求時觸發

1. ajaxStart （全域）：如果目前沒有其他 Ajax 請求處於活動狀態，則會觸發

2. ajaxBeforeSend (xhr, options)：在傳送請求之前；可以取消

3. ajaxSend (xhr, options)：如同 ajaxBeforeSend，但無法取消

4. ajaxSuccess (xhr, options, data)：當回應成功時

5. ajaxError (xhr, options, error)：當發生錯誤時

6. ajaxComplete (xhr, options)：在請求完成後，無論是錯誤或成功

7. ajaxStop （全域性）：如果這是最後一個 active Ajax 要求，則觸發

預設情況下，Ajax 事件會在文件物件上觸發。不過，如果要求的 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 🦄🔨

已棄用，請改用 $.ajax。

$.ajaxJSONP(options) ⇒ mock XMLHttpRequest

執行 JSONP 要求，從另一個網域擷取資料。

此方法沒有比 $.ajax 更好的優點，不應使用。

$.ajaxSettings

包含 Ajax 要求預設設定的物件。大多數設定都說明於 $.ajax 中。在全域性設定時有用的設定如下

• timeout （預設值：0）：設定為非零值，以指定 Ajax 要求的預設逾時時間（毫秒）
• global （預設值：true）：設定為 false，以防止觸發 Ajax 事件
• xhr （預設值：XMLHttpRequest 工廠）：設定為傳回 XMLHttpRequest（或相容物件）實例的函式
• accepts：向伺服器要求特定 dataType 值的 MIME 類型
  • 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，則不會序列化巢狀物件，且巢狀陣列值不會在其金鑰上使用方括號。

如果任何個別值物件是函式，而不是字串，則會呼叫該函式，且其傳回值會是序列化結果。

此方法接受 serializeArray 格式的陣列，其中每個項目都有 “name” 和 “value” 屬性。

$.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]"

$.param({ id: function(){ return 1 + 2 } })
//=> "id=3"

$.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

將目前集合的 html 內容設定為對指定 URL 的 GET Ajax 呼叫結果。也可以在 URL 中指定 CSS 選擇器，如下所示，只使用與選擇器相符的 HTML 內容來更新集合

$('#some_element').load('/foo.html #bar')

如果沒有提供 CSS 選擇器，則會改用完整的回應文字。

請注意，如果沒有提供選擇器，則只會執行找到的任何 JavaScript 區塊。

serialize

serialize() ⇒ string

將表單值序列化為 URL 編碼的字串，以用於 Ajax 張貼要求。

serializeArray

serializeArray() ⇒ array

將表單序列化為包含 name 和 value 屬性的物件陣列。已停用的表單控制項、按鈕和未勾選的無線按鈕/核取方塊會略過。結果不包含檔案輸入的資料。

$('form').serializeArray()
//=> [{ name: 'size', value: 'micro' },
//    { name: 'name', value: 'Zepto' }]

submit

submit() ⇒ self
submit(function(e){ ... }) ⇒ self

觸發或附加處理常式，以處理 submit 事件。如果沒有提供函式，則在目前的表單上觸發 “submit” 事件，並讓它執行其提交動作，除非已為該事件呼叫 preventDefault()。

當給定一個函數時，這會將它附加為當前元素上「提交」事件的處理常式。

$.fx

動畫的全局設定

• $.fx.off（在支援 CSS 轉場的瀏覽器中預設為 false）：設為 true 以停用所有 animate() 轉場。

• $.fx.speeds：一個物件，其中包含動畫的持續時間設定

  • _default（400 毫秒）
  • fast（200 毫秒）
  • slow（600 毫秒）

  變更現有值或新增屬性，以影響使用字串設定持續時間的動畫。

animate

animate(properties, [duration, [easing, [function(){ ... }]]]) ⇒ self
animate(properties, { duration: msec, easing: type, complete: fn }) ⇒ self
animate(animationName, { ... }) ⇒ self

平滑轉換目前集合中元素的 CSS 屬性。

• properties：包含要動畫化的 CSS 值的物件；或 CSS 關鍵影格動畫名稱
• duration（預設為 400）：持續時間（以毫秒為單位），或一個字串
  • fast（200 毫秒）
  • slow（600 毫秒）
  • $.fx.speeds 的任何自訂屬性
• easing（預設為 linear）：指定要使用的動畫緩動類型，其中之一為
  • ease
  • linear
  • ease-in / ease-out
  • ease-in-out
  • cubic-bezier(...)
• complete：動畫完成時的回呼函數
• delay：轉場延遲（以毫秒為單位）v1.1+

Zepto 也支援下列 CSS 轉換 屬性

• translate(X|Y|Z|3d)
• rotate(X|Y|Z|3d)
• scale(X|Y|Z)
• matrix(3d)
• perspective
• skew(X|Y)

如果持續時間為 0 或 $.fx.off 為 true（在不支援 CSS 轉場的瀏覽器中為預設值），則不會執行動畫；目標值將立即生效。類似地，當目標 CSS 屬性與元素的目前狀態相符時，將不會有動畫，且不會呼叫 complete 函數。

如果第一個引數是字串而不是物件，則會將其視為 CSS 關鍵影格動畫 名稱。

$("#some_element").animate({
  opacity: 0.25, left: '50px',
  color: '#abcdef',
  rotateZ: '45deg', translate3d: '0,10px,0'
}, 500, 'ease-out')

Zepto 僅使用 CSS 轉場來產生效果和動畫。不支援 jQuery 緩動。不支援 jQuery 的相對變更語法（=+10px）。請參閱規格以取得 可動畫化屬性清單。瀏覽器支援可能有所不同，因此務必在您想要支援的所有瀏覽器中進行測試。

觸摸事件

「觸控」模組會新增下列事件，可與 on 和 off 搭配使用

• tap — 在輕觸元素時觸發。
• singleTap 和 doubleTap — 這對事件可同時用於偵測同一個元素的單點和雙點按 (如果你不需要雙點按偵測，請改用 tap)。
• longTap — 當元素被點按且手指按住超過 750 毫秒時觸發。
• 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>