$()

$(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 节点的链式方法。本文档中的所有方法都是集合方法，除了直接位于美元（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

如果对象是窗口对象，则为真。这对于 iframe 很有用，因为每个 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 选择器来修改当前集合，或者如果给出了上下文，则仅在上下文元素内部执行。

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 或 undefined）时，该属性将被删除。当给出无单位的数字值时，将为需要单位的属性追加“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 的自定义构建中包含可选的“data”模块。

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

为“DOMContentLoaded”事件附加一个事件处理程序，该事件在页面上的 DOM 准备就绪时触发。建议使用 $() 函数而不是此方法。

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

检测模块

“detect”模块对于将您的网站或应用程序微调到不同的环境非常有用，并帮助您区分手机和平板电脑；以及不同的浏览器引擎和操作系统版本。

// 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 的值引用上下文对象。在第二种形式中，原始函数从上下文对象的特定属性中读取。

如果除了第二个参数之外还传递了其他参数，则它们将应用于包装函数的每次调用，位于其实际参数之前。

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]

添加一个事件处理程序，该处理程序在第一次运行时会自行删除，确保处理程序只触发一次。有关 selector 和 data 参数的解释，请参见 .on()。

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，但仅触发当前元素上的事件处理程序，并且不会冒泡。

unbind 🦄🔨

已弃用，请使用 off 代替。

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

分离使用 bind 添加的事件处理程序。

undelegate 🦄🔨

已弃用，请使用 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”）：发送到服务器的数据的 Content-Type（也可以通过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（默认值：window）：执行回调的上下文
• traditional（默认值：false）：使用$.param激活data参数的传统（浅层）序列化
• cache（默认值：true）：浏览器是否允许缓存 GET 响应。从v1.1.4开始，对于dataType: "script"或jsonp，默认值为false。
• xhrFields（默认值：无）：包含要逐字复制到 XMLHttpRequest 实例的属性的对象。 v1.1+
• username & password（默认值：无）：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 (全局)：如果这是最后一个活动的 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 🦄🔨

已弃用，请改用$.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”事件，并让它执行其提交操作，除非为该事件调用了preventDefault()。

当给出函数时，这只是将其附加为当前元素上的“submit”事件的处理程序。

$.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 过渡的浏览器中默认值为 true），则不会执行动画；而是目标值将立即生效。类似地，当目标 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)。有关可动画属性列表，请参见规范。浏览器支持可能会有所不同，因此请确保在您要支持的所有浏览器中进行测试。

触摸事件

“touch”模块添加了以下事件，这些事件可与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>