Основные методы

$(selector, [context])  ⇒ collection
$(<Zepto collection>)  ⇒ same collection
$(<DOM nodes>)  ⇒ collection
$(htmlString)  ⇒ collection
$(htmlString, attributes)  ⇒ collection v1.0+
Zepto(function($){ ... }) 

$()

Создаёт объект-коллекцию Zepto. Он выполняет css-селектор, оборачивает dom-узлы или создаёт несколько элементов из html-строки.ZeptoКоллекция Zepto — это объект, похожий на массив. У него есть цепочка методов для работы с dom-узлами, на которые он указывает. Кроме прямых методов объекта $($.extend) (например,

), все методы объекта документа являются методами коллекции.$(context).find(selector)Если в селекторе есть параметр content (css-селектор, dom или объект-коллекция Zepto), то css-селектор выполняется только в контексте заданных узлов. Эта функция работает так же, как использование

.<div> или <div/>形式。

.DOMContentLoaded Когда функция добавлена в поток обработки события

$('div')  //=> 所有页面中得div元素
$('#foo') //=> ID 为 "foo" 的元素

// 创建元素:
$("<p>Hello</p>") //=> 新的p元素
// 创建带有属性的元素:
$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} })
//=> <p id=greeting style="color:darkblue">Hello</p>

// 当页面ready的时候，执行回调:
Zepto(function($){
  alert('Ready to Zepto!')
})

. Если страница уже загружена, метод выполнится немедленно.

如果$Если переменная$ещё не определена, Zepto устанавливает глобальную переменную $ ссылкой на себя. Это позволяет одновременно использовать Zepto и полезный устаревший код, например prototype.js. Если сначала загрузить Prototype, Zepto не перезапишет функциюZeptoPrototype. Zepto всегда устанавливает глобальную переменную

ссылкой на себя.

$.camelCase(string)  ⇒ string

$.camelCase v1.0+

$.camelCase('hello-there') //=> "helloThere"
$.camelCase('helloThere')  //=> "helloThere"

Преобразует набор строк в новую строку в «верблюжьей» нотации. Если строка уже в «верблюжьей» нотации, она не меняется.

$.contains(parent, node)  ⇒ boolean

$.contains v1.0+false。

.

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

$.eachfalse Обходит элементы массива или объект в виде пар key-value. Обход останавливается, когда callback-функция возвращает

$.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(target, [source, [source2, ...]])  ⇒ target
$.extend(true, target, [source, ...])  ⇒ target v1.0+

$.extend

Расширяет свойства целевого объекта свойствами исходного объекта. Свойства исходного объекта перезаписывают свойства целевого объекта.

var target = { one: 'patridge' },
    source = { two: 'turtle doves' }

$.extend(target, source)
//=> { one: 'patridge',
//     two: 'turtle doves' }

По умолчанию выполняется поверхностное копирование. Если первый аргумент равен true, выполняется глубокое копирование.

Zepto.fn$.fnaddClass()— это объект, который содержит все доступные методы объекта Zepto, напримерattr(),

Вот пример реализацииempty()метода Zepto:

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

$.grep v1.0+

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

Возвращает новый массив. Новый массив содержит только те элементы, для которых функция обратного вызова вернула true.

$.grep([1,2,3],function(item){
    return item > 1
});//=>[2,3]
    

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

Возвращает true, если object является массивом.

$.isFunction

$.isFunction(object)  ⇒ boolean

Возвращает true, если object является функцией.

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

Возвращает true, если параметр object является объектом window. Это полезно при работе с iframe, потому что каждый iframe имеет свой объект window. Обычная проверкаobj === windowтаких objects завершится ошибкой.

$.map

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

Обходит элементы коллекции и возвращает новый массив со всеми результатами итерирующей функции.null 和 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 не задан, метод читает значение атрибута первого элемента в коллекции. Если параметр value задан, метод устанавливает значение этого атрибута для всех элементов коллекции. Если value равенnull, атрибут будет удалён (аналогично removeAttr). Несколько атрибутов можно задать через объект с парами ключ-значение.

Чтобы читать свойства DOM, такие какchecked和selected, используйте prop.

var form = $('form')
form.attr('action')             //=> 读取值
form.attr('action', '/create')  //=> 设置值
form.attr('action', null)       //=> 移除属性

// 多个属性:
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, а не API jQuery.

contents v1.0+

contents()  ⇒ collection

Возвращает дочерние узлы каждого элемента коллекции, включая текстовые и комментарии. (Примечание: метод .contents() похож на .children(), но включает текстовые узлы и HTML-элементы, созданные в объекте jQuery.)

css

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

Читает или устанавливает css-свойства элементов DOM. Если параметр value отсутствует, метод возвращает css-свойство первого элемента коллекции. Если параметр value задан, метод устанавливает соответствующее 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 })

// 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;
• всё остальное возвращается как строка. Базовая реализация `data()` в 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 или элемент, они фильтруются. Возвращаются только те, что входят в текущую коллекцию Zepto.

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

first

first()  ⇒ collection

Получает первый элемент текущей коллекции.

$('form').first()

forEach

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

Проходит по каждому элементу коллекции. Похоже на each, но аргументы функции итерации другие. Когда функция возвращаетfalse , обход не останавливается.

Это метод, предоставляемый Zepto, а не API jQuery.

get

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

Получает все элементы или один элемент из текущей коллекции. Если параметр index отсутствует, метод возвращает все элементы как обычный массив. Если index указан, возвращается только элемент в этой позиции. В отличие от eq, метод возвращает DOM-узел, а не коллекцию 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-узел. Если да, метод возвращает новую коллекцию. Она отфильтровывает объекты без элементов, соответствующих селектору, или без указанного DOM-узла.

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

hasClass

hasClass(name)  ⇒ boolean

Проверяет, есть ли в коллекции элементы с указанным классом.

<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

Получает высоту первого элемента коллекции. Или задаёт высоту всех элементов коллекции.

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

hide

hide()  ⇒ self

Скрывает элементы коллекции, устанавливая ихdisplay CSS-свойство в none.

Метод устанавливает CSS-свойствоdisplay 为 noneи скрывает элементы коллекции.

html

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

Получает или задаёт HTML-содержимое элементов коллекции. Если параметр content не задан, метод возвращает innerHtml первого элемента коллекции. Если 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 href="http://twitter.com/$2">$2</a>')
})

index

index([element])  ⇒ number

Получает индекс элемента (нумерация с нуля). Если параметр element не задан, метод возвращает позицию текущего элемента среди соседних узлов. Если element задан, метод возвращает его позицию в текущей коллекции. Если элемент не найден, метод возвращает-1。

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

indexOf

indexOf(element, [fromIndex])  ⇒ number

Возвращает позицию элемента в текущей коллекции. Если задано число fromIndex, поиск идёт только с этой позиции. При нахождении возвращает позицию с отсчётом от 0, а-1если не находит, возвращает -1. Вместо этого метода используйте index.

Возвращает индекс элемента в текущей коллекции объектов (отсчёт от 0). Если задан параметр fromIndex, поиск идёт с этой позиции и далее. Возвращает индекс с отсчётом от 0. Если элемент не найден, возвращает-1-1. Метод index реализован на основе этого метода.

Это метод Zepto, а не API jQuery.

insertAfter

insertAfter(target)  ⇒ self

Вставляет элементы коллекции после указанного целевого элемента (внешняя вставка). Это похоже на after, но используется наоборот.

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

insertBefore

insertBefore(target)  ⇒ self

Вставляет элементы коллекции перед указанным целевым элементом (внешняя вставка). Это похоже на before, но используется наоборот.

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

is

is(selector)  ⇒ boolean

Проверяет, соответствует ли первый элемент текущей коллекции CSS-селектору. Для нестандартных селекторов, поддерживаемых jQuery, работает аналогично::visibleВключён в необязательный модуль "selector".

Расширения CSS jQuery не поддерживаются. Модуль "selector" поддерживает лишь несколько самых распространённых способов выбора.

last

last()  ⇒ collection

Возвращает последний элемент коллекции объектов.

$('li').last()

map

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

Проходит по всем элементам коллекции объектов. Из значений, возвращаемых функцией обхода, формируется новый объект-коллекция. В функции обходаthisключевое слово 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+

Get the next sibling–optionally filtered by selector–of each element in the collection.

Возвращает следующий соседний узел каждого элемента в коллекции объектов. Можно дополнительно указать фильтрующий селектор.

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

not

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

Фильтрует текущую коллекцию объектов и возвращает новую коллекцию. В неё не входят элементы, соответствующие 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

Находит первого позиционированного элемента-предка, то есть элемента, у которого css-свойствоposition имеет значение "relative", "absolute" or "fixed"

parent

parent([selector])  ⇒ collection

Получает непосредственный родительский элемент каждого элемента коллекции. Если задан параметр css-селектора, фильтрует элементы по условию.

parents

parents([selector])  ⇒ collection

Получает всех предков каждого элемента коллекции. Если задан css-селектор, фильтрует элементы по условию.

Для получения непосредственного родителя используйте parent. Для получения первого элемента, соответствующего css-селектору, используйте 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, а не API jQuery.

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

Вставляет содержимое аргумента перед каждым совпавшим элементом (примечание: вставка внутрь элемента). Вставляемый элемент может быть фрагментом 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

Читает или устанавливает значение свойства dom-элемента. При чтении значений свойств предпочтительнее attr, потому что эти значения меняются при взаимодействии пользователя, напримерchecked и selected。

Сокращённые или строчные имена, напримерfor, class, readonlyи подобные свойства, сопоставляются с реальными свойствами, напримерhtmlFor, className, readOnlyи так далее.

push

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

Add elements to the end of the current collection.

Добавляет элементы в конец текущей коллекции.

Это метод Zepto, а не API jQuery.

ready

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

Добавляет обработчик события, который срабатывает при событии "DOMContentLoaded" после загрузки DOM страницы. Вместо этого способа используйте $().

reduce

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

Работает так же, как Array.reduce, и обходит текущую коллекцию. memo содержит предыдущее возвращаемое значение функции. Обход выполняется итеративно.

Это метод zepto, а не API jquery.

remove

remove()  ⇒ self

Удаляет элементы текущей коллекции из их родительского узла и тем самым убирает их из DOM.

removeAttr

removeAttr(name)  ⇒ self

Удаляет указанный атрибут у всех элементов текущей коллекции.

removeClass

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

Удаляет указанный 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">]
</script>

replaceWith

replaceWith(content)  ⇒ self

Заменяет все совпавшие элементы заданным содержимым, включая сами элементы. Параметр content может иметь типы, описанные в before.

scrollLeft v1.1+

scrollLeft()  ⇒ number
scrollLeft(value)  ⇒ self

Получает или задаёт количество пикселей, на которое прокручен элемент страницы или всё окно вправо.

scrollTop v1.0+

scrollTop()  ⇒ number
scrollTop(value)  ⇒ self v1.1+

Получает или задаёт количество пикселей, на которое прокручен элемент страницы или всё окно вниз.

show

show()  ⇒ self

Восстанавливает значение display по умолчанию для каждого элемента коллекции. Если вы скрыли элемент методом hide, этот метод снова его показывает. Он равносилен удалениюdisplay：none。

siblings

siblings([selector])  ⇒ collection

Возвращает соседние узлы всех элементов коллекции. Если задан параметр CSS-селектора, фильтрует элементы по этому селектору.

size

size()  ⇒ number

Возвращает количество элементов в коллекции.

slice

slice(start, [end])  ⇒ array

Извлекает подмножество этого массива,arrayначиная сstart. Если заданend, извлекает элементы сstartдоend, но не включает элементendв позиции.

text

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

Получает или задаёт текстовое содержимое всех элементов коллекции. Если параметр content не задан, метод возвращает текстовое содержимое первого элемента коллекции, включая текст дочерних узлов. Если параметр content задан, метод заменяет им текстовое содержимое всех элементов коллекции. Метод похож на 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равно true, метод работает как addClass, если false, метод работает как 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

Получает или задает значение совпавших элементов. Если параметр value не задан, метод возвращает значение первого элемента. Если это<select multiple>тег, метод возвращает массив. Если параметр value задан, метод устанавливает значение всех элементов.

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+

Оборачивает каждый совпавший элемент в html-элемент. Параметр structure может быть отдельным элементом или несколькими вложенными элементами. Также это может быть фрагмент html-строки или dom-узел. Дополнительно это может быть callback-функция, которая создает обертку для элемента. Эта функция возвращает фрагмент обертки первых двух типов.

Обратите внимание: метод хорошо поддерживает узлы в 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-строку или 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-узел. Также это может быть callback-функция, которая создает обертку для элемента. Эта функция возвращает фрагмент обертки первых двух типов.

// 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 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.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]

// 此外，版本信息是可用的。
// 下面是运行​​iOS 6.1的iPhone所返回的。
!!$.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(fn, context, [additionalArguments...])  ⇒ function v1.1.4+
$.proxy(context, property)  ⇒ function
$.proxy(context, property, [additionalArguments...])  ⇒ function v1.1.4+

Принимает функцию и возвращает новую функцию. Новая функция всегда сохраняет определенный контекст (context). В новой функцииthisуказывает на параметр context. В другом варианте исходная function читается из определенного свойства объекта контекста (context).

Если передано более 2 дополнительных параметров, они передаются в функцию из параметра fn.

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 🐶🔫

Не рекомендуется, используйте on.

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

Удаляет события, добавленные через live.

event.isDefaultPrevented v1.1+

event.isDefaultPrevented()  ⇒ boolean

如果preventDefault()вызван для экземпляра этого события, возвращает true. Это кроссплатформенная замена нативного defaultPreventedсвойства на случай, если 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аргумент data, это значение доступно в обработчике как полезное event.data 属性

Обработчик выполняется в контексте элемента, к которому он добавлен, или элемента, соответствующего селектору, если он задан (то есть this указывает на элемент, вызвавший событие). Если обработчик возвращаетfalse，preventDefault() 和 stopPropagation()вызваны для текущего события, это предотвращает действие браузера по умолчанию, например переход по ссылке.

Еслиfalse передан в этот метод вместо функции обратного вызова, это эквивалентно передаче функции, которая просто возвращаетfalse. (То есть false используется как function(e){ ... } аргумент, как сокращённая форма function(){ return false; } , например: $("a.disabled").on("click", false);это эквивалентно$("a.disabled").on("click", function(){ return 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, но запускает событие только на текущем элементе без всплытия.

        $("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 🐶🔫

Устарело, используйте off.

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

Удаляет события, зарегистрированные через delegate.

$.ajax

$.ajax(options)  ⇒ XMLHttpRequest

Выполняет Ajax-запрос. Ресурс может быть локальным. Кросс-доменные запросы работают через HTTP access control или JSONP.

Опции:

• type(по умолчанию: "GET"): метод запроса ("GET", "POST" или другой)
• url (по умолчанию: текущий адрес): адрес, на который отправляется запрос
• data(по умолчанию: none): данные, отправляемые на сервер. При GET-запросе они автоматически добавляются к url как параметры. Объекты не типа String сериализуются через $.param.
• processData (по умолчанию: true): для запросов не GET. Определяет, преобразуется ли data автоматически в строку.
• contentType (по умолчанию: "application/x-www-form-urlencoded"): тип кодировки содержимого при отправке данных на сервер. (Это также настраивается через headers). Установка false пропускает значение по умолчанию.
• mimeType(по умолчанию: none): переопределяет MIME-тип ответа. v1.1+
• dataType (по умолчанию: none): ожидаемый тип данных ответа сервера ("json", "jsonp", "xml", "html" или "text")
• jsonp (по умолчанию: "callback"): имя параметра запроса для JSONP-колбэка
• jsonpCallback(по умолчанию: "jsonp{N}"): строка (или возвращающая функция) с именем глобальной JSONP-функции-колбэка. Установка включает кэширование браузера. v1.1+
• timeout (默认： 0): таймаут запроса в миллисекундах, 0 означает отсутствие таймаута.
• headers: объект с дополнительными HTTP-заголовками для Ajax-запроса
• async (по умолчанию: true): по умолчанию все запросы асинхронные. Для синхронного запроса установите значение false。
• global (по умолчанию: true): запрос вызывает глобальные обработчики Ajax-событий. Значение false отключает глобальные Ajax-события.
• context (по умолчанию: window): объект задаёт контекст Ajax-колбэков (указатель this).
• traditional(по умолчанию: false): включает традиционный способ сериализации через $.param дляdata。
• cache(по умолчанию: true): разрешает браузеру кэшировать GET-ответы. Начиная с v1.1.4, когда опция dataType равна "script" или jsonp, значение по умолчаниюfalse。
• xhrFields(по умолчанию: none): свойства этого объекта копируются дословно в экземпляр XMLHttpRequest. v1.1+
• username & password(по умолчанию: none): учётные данные HTTP Basic-аутентификации. v1.1+

Если URL содержит=?或者dataTypeравно "jsonp", запрос выполняется через вставку <script>тег вместо XMLHttpRequest (см. JSONP). В этом случаеcontentType, dataType, headersЕсть ограничения,async 不被支持。

Функция обратного вызова Ajax

Вы можете указать следующие функции обратного вызова, они выполняются в заданном порядке:

1. beforeSend(xhr, settings): вызывается перед отправкой запроса, принимает объекты xhr и settings как параметры. Если она возвращает 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(global): срабатывает, если в данный момент нет других активных Ajax-запросов.

2. ajaxBeforeSend (data: xhr, options)：вызывается перед отправкой запроса, его можно отменить.

3. ajaxSend (data: xhr, options): например ajaxBeforeSend， но отменить её нельзя.

4. ajaxSuccess (data: xhr, options, data)：при успешном ответе.

5. ajaxError (data: xhr, options, error)：когда возникает ошибка.

6. ajaxComplete (data: xhr, options)：запрос уже завершён, независимо от того, успешен он или нет.

7. 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 🐶🔫

Не рекомендуется, используйте вместо него $.ajax.

$.ajaxJSONP(options)  ⇒ mock XMLHttpRequest

Выполняет кросс-доменный запрос данных через JSONP.

У этого метода нет преимуществ перед $.ajax, поэтому не используйте его.

$.ajaxSettings

Объект с настройками Ajax-запросов по умолчанию. Большинство настроек уже описано в $.ajax. Следующие настройки особенно полезны глобально:

• 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+

Получает JSON-данные через Ajax GET-запрос. Это сокращённая форма $.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, вложенные объекты не сериализуются, а ключи значений вложенных массивов не получают квадратные скобки.

Если значение какого-либо свойства объекта является функцией, а не строкой, функция будет вызвана, и сериализуется её возвращаемое значение.

此外，还接受 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-код через Ajax GET-запрос и вставляет его в текущую коллекцию. Также в url можно указать CSS-селектор. Тогда коллекция обновится HTML-содержимым, совпавшим с этим селектором.

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

Если CSS-селектор не задан, используется весь полученный текст.

Обратите внимание: без селектора выполняются все блоки javascript. С селектором скрипты внутри совпавшего содержимого удаляются.

serialize

serialize()  ⇒ string

Кодирует значения элементов формы для отправки в Ajax POST-запросе в строку с URL-кодированием.

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

Глобальные настройки анимации:

• $.fx.off(по умолчанию false в браузерах с поддержкой css transition): установите true, чтобы отключить всеanimate()transitions.

• $.fx.speeds：объект для установки времени анимации。

  • _default (400 мс)
  • fast (200 ms)
  • slow (600 ms)

Измените существующее значение или добавьте новое свойство, чтобы повлиять на анимацию, время которой задано строкой。

animate

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

Выполняет плавный переход css transition для элементов текущей коллекции объектов。

• properties：объект, содержащий значения css-анимации или имя css-анимации по кадрам。
• duration(по умолчанию 400)：время в миллисекундах или строка。
  • fast (200 ms)
  • slow (600 ms)
  • Любое$.fx.speedsпользовательское свойство
• easing (по умолчанию linear)：задает тип сглаживания анимации, используйте один из следующих：
  • ease
  • linear
  • ease-in / ease-out
  • ease-in-out
  • cubic-bezier(...)
• complete：функция обратного вызова при завершении анимации
li>delay：задержка перехода в миллисекундах v1.1+

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), анимация не выполняется. Целевая позиция альтернативного эффекта применяется сразу. Аналогично, если анимация не завершается, целевая позиция применяется сразу. В этом случае анимации нет. 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-переходы для анимации. Easing-функции jQuery не поддерживаются. Синтаксис относительных значений jQuery ("=+10px") тоже не поддерживается. Смотрите список анимируемых свойств. Поддержка в браузерах может отличаться. Обязательно тестируйте нужные вам браузеры.

Touch events

Модуль "touch" добавляет следующие события, их можно использовать с on и off.

• tap — срабатывает при tap на элементе。
• singleTap and 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>