Zepto Api参考

zepto API参考

简介

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。

设计目的

zepto设计目的是为移动端提供类似jquery的迷你框架，压缩后zepto小于10KB.

下载

bower install zepto

默认的构建包括以下模块：

Core, Ajax, Event, Form, Effects, Polyfill, and Detect.

<script>
    // document.write方式创建script, 移动端或现代浏览器用zepto, 旧浏览器用jquery
    document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>');
</script>

在浏览器上(Safari和Chrome)上开发页面应用或者使用PhoneGap构建基于html的web-view本地应用，使用Zepto是一个不错的选择。

总之，除了ie浏览器外，Zepto希望在所有的现代浏览器中作为一种基础环境来使用。

创建插件

可以通过添加方法作为$.fn的属性来写插件：

; (function($) {
    $.extend($.fn, {
        foo: function() {
            // `this` refers to the current Zepto collection.
            // When possible, return the Zepto collection to allow chaining.
            return  this.html('bar');
        }
    })
})(Zepto)

核心方法

$(selector, [context])

$(selector, [context]); // => collection
$( zeptoCollection ); // => same collection
$( domNodes ); // => collection
$( htmlString ); // => collection
$( htmlString,  attributes); // => collection v1 .0 +

Zepto(function($) {... });

通过css选择器 包装dom节点 创建元素 html片段 来创建一个Zepto对象。

Zepto集合是一个类似数组的对象，它具有链式方法来操作它指向的dom，除了$对象上的直接方法外(如$.extend)，文档对象中的所有方法都是集合方法。

如果选择器中存在content参数(css选择器，dom，或者Zepto集合对象)，那么只在所给的节点背景下进行css选择器；这个功能有点像使用$(context).find(selector)。

$('div') ; //=> all DIV elements on the page
$('#foo');  //=> element with ID "foo"

// create element:
$("<p>Hello</p>")  //=> the new P element

// create element with attributes:
$("<p />", {text: "Hello", id: "greeting", css: { color: 'darkblue' } })   //=> <p id=greeting style="color:darkblue">Hello</p>

// execute callback when the page is ready:
Zepto(function($) {
    alert('Ready to Zepto!')
});

不支持jQuery CSS 扩展，但是可以选的“selector”模块有限提供支持，如一些常用的伪选择器，可以与现有的代码或插件兼容执行。

$.camelCase

将一组字符串变成“骆驼”命名法的新字符串，如果该字符已经是“骆驼”命名法，则不变化。

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

$.contains

检查父节点是否包含给定的dom节点，如果两者相同，则返回 false。

$.contains(parent, node)  //=> boolean

$.each

遍历数组元素或以key-value值对方式遍历对象。回调函数返回 false 时停止遍历。

$.each(collection, function(index, item){ ... })  //=> collection
$.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

通过源对象扩展目标对象的属性，源对象属性将覆盖目标对象属性。

默认情况下为，复制为浅复制。如果第一个参数为true表示深度复制。

$.extend(target, [source, [source2, ...]]) //=> target
$.extend(true, target, [source, ...]) //=> target

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

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

$.fn

Zepto.fn是一个对象，它拥有Zepto对象上所有可用的方法。如 addClass()， attr()，和其它方法。在这个对象添加一个方法，所有的Zepto对象上都能用到该方法。

// 这里有一个实现 empty() 方法的例子：
$.fn.empty = function() {
    return this.each(function() {
        this.innerHTML = '';
    });
};

$.grep

获取一个新数组，新数组只包含回调函数中返回 ture 的数组项。

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

$.inArray

搜索数组中指定值并返回它的索引（如果没有找到则返回-1）。

// 同 indexOf
$.inArray(element, array, [fromIndex])  //=> number
// [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

// 同 es5 Array.isArray
$.isArray(object)  //=> boolean

$.isFunction

$.isFunction(object)  //=> boolean

$.isPlainObject

测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的），如果是，则返回true。

$.isPlainObject(object)  //=> boolean

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

$.isWindow

确定参数是否为一个窗口（window对象），如果是则返回true。

这在处理iframe时非常有用，因为每个iframe都有它们自己的window对象，使用常规方法obj==window校验这些objects的时候会失败。

$.isWindow(object)  //=> boolean

$.map

通过遍历集合中的元素，通过函数返回一个新的数组，null and undefined 将被过滤掉。

// 同 map  迭代函数的参数1为 value, 参数2为key, 这点上与$.each有区别
$.map(collection, function(item, index){ ... })  //=> collection
$.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

类似本地JSON.parse 方法，接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象。

$.parseJSON(string)  //=> object

$.trim

删除字符串开始和末尾的空白符。类似String.prototype.trim()。

$.trim(string)  //=> string

$.type

获取JavaScript 对象的类型。可能的类型有： null undefined boolean number string function array date regexp object error。

对于其它对象，它只是简单报告为“object”，如果你想知道一个对象是否是一个javascript普通对象，使用isPlainObject。

// jq原来也有 $.type方法..
$.type(object)  //=> string

zepto对象的方法

add

添加元素到匹配的元素集合。如果content参数存在，只在content中进行查找，否则在document中查找。

$ele.add(selector, [context])  //=> self

<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

为每个匹配的元素添加指定的class类名。多个class类名通过空格分隔。

$ele.addClass(name)  //=> self
$ele.addClass(function(index, oldClassName){ ... })  //=> self

after

在每个匹配的元素后插入内容。内容可以为html字符串，dom节点，或者节点组成的数组。

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

append

在每个匹配的元素末尾插入内容。内容可以为html字符串，dom节点，或者节点组成的数组。

$ele.append(content)  //=> self
$('ul').append('<li>new list item</li>')

appendTo

将匹配的元素插入到目标元素的末尾（里面的后面）。这个有点像 append，但是插入的目标与其相反。

$ele.appendTo(target)  //=> self
$('<li>new list item</li>').appendTo('ul')

attr

读取或设置dom的属性。如果没有给定value参数，则读取Zepto对象第集合一个元素的属性值。当给定了value参数。则设置Zepto对象集合中所有元素所有元素的属性值。当value参数为null，那么这个属性将被移除(类似removeAttr)，多个属性能以通过对象值对的方式进行设置。

$ele.attr(name) //=> string
$ele.attr(name, value) //=> self
$ele.attr(name, function(index, oldValue) {... }) //=> self
$ele.attr({ name: value, name2: value2, ... }) //=> self

要读取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

在匹配每个元素的前面（外面）插入内容。内容可以为html字符串，dom节点，或者节点组成的数组。

$ele.before(content)  //=> self
$('table').before('<p>See the following table:</p>')

children

获得每个匹配元素集合元素的直接子元素，如果selector存在，只返回符合css选择器的元素。

$ele.children([selector])  //=> collection
$('ol').children('*:nth-child(2n)');  //=> every other list item from every ordered list

clone

通过深度克隆来复制集合中的所有元素。

此方法不会有数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。

$ele.clone()  //=> collection

closest

从元素本身开始，逐级向上级元素匹配，并返回最先匹配selector的祖先元素。如果context节点参数存在。那么直考虑该节点的后代。这个方法与 parents(selector)有点相像，但他只返回最先匹配的祖先元素。

$ele.closest(selector, [context]) //=> collection
$ele.closest(collection) //=> collection
$ele.closest(element) //=> collection

如果参数是一个Zepto对象集合或者一个元素，结果必须匹配给定的元素而不是选择器。

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

concat

添加元素到一个Zepto对象集合形成一个新数组。如果参数是一个数组，那么这个数组中的元素将会合并到Zepto对象集合中。

这是一个Zepto提供的方法，不是jquey的API 。

// 类似 $ele.add(selector, [context])
$ele.concat(nodes, [node2, ...])  //=> self

contents

获得每个匹配元素集合元素的子元素，包括文字和注释节点。.contents()和.children()方法类似，只不过前者包括文本节点以及注释等，后者只包含子元素。

$ele.contents()  //=> collection

css

读取或设置dom元素的css属性。当value参数不存在的时候，返回Zepto对象集合中第一个元素的css属性。当value参数存在时，设置Zepto对象集合中每一个元素的对应css属性。多条css属性可以利用对象值对的方式进行设置。

$ele.css(property) //=> value
$ele.css(property, value) //=> self
$ele.css({ property: value, property2: value2, ... }) //=> self

当value为空(空字符串，null 或 undefined)，那个css属性将会被移出。当value参数为一个无单位的数字，如果该css属性需要单位，“px”将会自动添加到该属性上。

var elem = $('h1');
elem.css('background-color') ; // read property
elem.css('background-color', '#369') // set property
elem.css('background-color', '') // remove property

// set multiple properties:
elem.css({backgroundColor: '#8EE', fontSize: 28 });

data

读取或写入dom的 data-* 属性。行为有点像 attr ，但是属性名称前面加上 data-。

$ele.data(name)  //=> value
$ele.data(name, value)  //=> self

当读取属性值时，会有下列转换：v1.0+

1. “true”, “false”, and “null” 被转换为相应的类型； 转换逻辑值和null
2. 数字值转换为实际的数字类型；
3. JSON值将会被解析，如果它是有效的JSON；
4. 其它的一切作为字符串返回。

Zepto 基本实现data()只能存储字符串。如果你要存储任意对象，请引入可选的“data”模块到你构建的Zepto中。

each

遍历一个Zepto集合对象，为每一个匹配元素执行一个函数。this关键字指向当前item(作为函数的第二个参数传递)。如果函数返回 false，遍历结束。

$ele.each(function(index, item){ ... })  //=> self

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

$ele.empty() //=> self

eq

从当前Zepto对象集合中获取给定索引号的元素。

$ele.eq(index)  //=> collection
$('li').eq(0);  //=> only the first list item
$('li').eq(-1);  //=> only the last list item

filter

过滤Zepto集合对象，返回的Zepto集合对象里面的项满足参数中的css选择器。如果参数为一个函数，函数返回有实际值得时候，元素才会被返回。在函数中， this 关键字指向当前的元素。

$ele.filter(selector)  //=> collection
$ele.filter(function(index){ ... })  //=> collection

find

获得当前Zepto集合对象内查找符合css选择器的每个元素的后代。

如果参数为Zepto集合对象或者元素，过滤它们，只有当它们在当前Zepto集合对象中时，才被返回。

$ele.find(selector) //=> collection
$ele.find(collection) //=> collection
$ele.find(element) //=> collection

var form = $('#myform');

form.find('input, select')

first

$ele.first()  //=> collection
// 获取当前Zepto对象集合中的第一个元素。
$('form').first()

forEach

遍历当前Zepto集合对象的买个元素，有点类似 each，但是遍历函数的参数不一样，当函数返回 false 的时候，遍历不会停止。

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

这是一个Zepto提供的方法，不是jquery的API。

get

get()  //=> array
get(index)  //=> DOM node

var elements = $('h2');
elements.get();  //=> get all headings as an array
elements.get(0);  //=> get first heading node

从当前Zepto对象集合中获取所有元素或单个元素。当index参数不存在的时候，以普通数组的方式返回所有的元素。当指定index时，只返回该置的元素。这点与与eq不同，该方法返回的不是Zepto集合对象。

has

$ele.has(selector)  //=> collection
$ele.has(node)  //=> collection

判断当前Zepto对象集合的子元素是否有符合选择器的元素，或者是否包含指定的dom节点，如果有，则返回新的Zepto集合对象，该对象过滤掉不含有选择器匹配元素或者不含有指定dom节点的对象。

// __返回值非boolean值，而是匹配的dom__
$('ol > li').has('a[href]'); //=> get only LI elements that contain links

hasClass

$ele.hasClass(name)  //=> boolean

检查Zepto对象集合中是否有元素含有指定的class。

<ul>
    <li>list item 1</li>
    <li class="yaotaiyang">list item 2</li>
    <li>list item 3</li>
</ul>
<p>a paragraph</p>

<script type="text/javascript">
    $("li").hasClass("yaotaiyang");  //=> true
</script>

height

$ele.height() //=> number

$ele.height(value) //=> self

$ele.height(function(index, oldHeight){ ... }) //=> self

获取Zepto对象集合中第一个元素的高度；或者设置Zepto对象集合中所有元素的高度。

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

hide

$ele.hide()  //=> self

通过设置css的属性 display: none 来将Zepto对象集合中的元素隐藏。

html

$ele.html()  //=> string
$ele.html(content)  //=> self
$ele.html(function(index, oldHtml){ ... })  //=> self

获取或设置Zepto对象集合中元素的HTML内容。当content参数没有给定时，返回IZepto对象集合中第一个元素的innerHtm。当content参数给定时。用其替换Zepto对象集合中每个元素的content。content可以是append中描述的所有类型。

// autolink everything that looks like a Twitter username
$('.comment p').html(function(idx, oldHtml) {
    return oldHtml.replace(/(^|\W)@(\w{1,15})/g, '$1@<a href="http://twitter.com/$2">$2</a>');
});

index

$ele.index([element])  //=> number
$('li:nth-child(2)').index() //=> 1

获取一个元素的位置。当elemen参数没有给出时，返回当前元素在兄弟节点中的位置。当element参数给出时，返回它在当前Zepto对象集合中的位置。如果没有该元素，则返回-1。

indexOf

$ele.indexOf(element, [fromIndex])  //=> number

在当前Zepto中获取一个元素的位置。如果formindex参数给出，从该位置往后查找，返回基于0的位置，如果没找到，则返回-1。index 方法是基于这个方法实现的。

这是一个Zepto的方法，不是jquer的api。

insertAfter

$ele.insertAfter(target)  //=> self
$('<p>Emphasis mine.</p>').insertAfter('blockquote')

插入Zepto对象集合中的元素到指定的每个元素后面的dom中。这个有点像 after，但是使用方式相反。

insertBefore

$ele.insertBefore(target)  //=> self
$('<p>See the following table:</p>').insertBefore('table')

插入Zepto对象集合中的元素到指定的每个元素前面的dom中。这个有点像 before，但是使用方式相反。

is

$ele.is(selector) //=> boolean

判断当前Zepto元素集合中的第一个元素是否符css选择器。对于基础支持jquery的非标准选择器类似：:visible包含在可选的“selector”模块中。

jQuery CSS extensions 不被支持。 选择“selector”模块仅仅能支持有限几个最常用的方式。

last

$ele.last()  //=> collection
$('li').last()

获取Zepto集合对象中最后一个元素。

map

// $.map(function(item, index))
$ele.map(function(index, item){ ... })  //=> collection 

// get text contents of all elements in collection
elements.map(function() {
    return $(this).text();
}).get().join(', ');

遍历Zepto对象集合中的所有元素。通过遍历函数返回值形成一个新的集合对象。在遍历函数中this关键之指向当前循环的item（遍历函数中的第二个参数）。遍历中返回 null和undefined，遍历将被打断。

next

$ele.next()  //=> collection
$ele.next(selector)  //=> collection
$('dl dt').next();  //=> the DD element

获取Zepto对象集合中每一个元素的下一个兄弟节点(可以选择性的带上过滤选择器)。

not

$ele.not(selector)  //=> collection
$ele.not(collection)  //=> collection
$ele.not(function(index){ ... })  //=> collection

过滤当前Zepto对象集合，获取一个新的Zepto对象集合，它里面的元素不能匹配css选择器。如果另一个参数为Zepto集合对象，那么返回的新Zepto对象中的元素都不包含在该参数对象中。如果参数是一个函数。仅仅包含函数执行为false值得时候的元素，函数的 this 关键字指向当前循环元素。

与它相反的功能，查看 filter.

offset

$ele.offset()  //=> object
$ele.offset(coordinates)  //=> self
$ele.offset(function(index, oldOffset){ ... })  //=> self

获得当前元素相对于document的位置。返回一个对象含有： top, left, width和height

当给定一个对象属性left和top使用这些值来相对于document对每一个元素进行定位。

offsetParent

$ele.offsetParent()  //=> collection

找到第一个定位过的祖先元素，在ccs中意味着它的position 值为“relative”, “absolute” or “fixed”

parent

$ele.parent([selector])  //=> collection

获取Zepto对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。

parents

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

获取Zepto对象集合每个元素所有的祖先元素。如果css选择器参数给出，过滤出符合条件的元素。

如果想获取直接父级元素，使用 parent。如果只想获取到第一个符合css选择器的元素，使用closest。

pluck

$ele.pluck(property)  //=> array
$('body > *').pluck('nodeName') ; // => ["DIV", "SCRIPT"]

// implementation of Zepto's `next` method
$.fn.next = function() {
    return $(this.pluck('nextElementSibling'));
};

获取Zepto对象集合中每一个元素的属性值。返回值为 null或undefined值得过滤掉。

这是一个Zepto的方法，不是jquery的api

position

$ele.position()  //=> object
var pos = element.position();

// position a tooltip relative to the element
$('#tooltip').css({position: 'absolute', top: pos.top - 30, left: pos.left });

获取Zepto对象集合中第一个元素的位置。相对于 offsetParent。当绝对定位的一个素靠近另一个元素的时候，这个方法是有用的。

返回一个的对象有这些属性：top, left。

prepend

$ele.prepend(content)  //=> self
$('ul').prepend('<li>first list item</li>');

将参数内容插入到每个匹配元素的前面（元素内部）。插入d的元素可以试html字符串片段，一个dom节点，或者一个节点的数组。

prependTo

$ele.prependTo(target)  //=> self
$('<li>first list item</li>').prependTo('ul')

将所有元素插入到目标前面（元素内）。这有点像prepend，但是是相反的方式。

prev

$ele.prev()  //=> collection
$ele.prev(selector)  //=> collection

获取Zepto对象集合中每一个元素的前一个兄弟节点，通过选择器来进行过滤。

prop

$ele.prop(name)  //=> value
$ele.prop(name, value)  //=> self
$ele.prop(name, function(index, oldValue){ ... })  //=> self

读取或设置dom元素的属性值。它在读取属性值的情况下优先于 attr，因为这些属性值会因为用户的交互发生改变，如checked and selected。

<input class="taiyang" id="check1" type="checkbox" checked="checked">
<input class="yaotaiyang" id="check2" type="checkbox">

<script type="text/javascript">
	$("#check1").attr("checked"); //=> "checked"
	$("#check1").prop("checked"); //=> "true"
	$("#check2").attr("checked"); //=> "false"
	$("#check2").prop("checked"); //=> "false"
	$("input[type='checkbox']").prop("type",function(index,oldvalue){
		console.log(index+"|"+oldvalue);
	});
	//=> 0|checkbox
	//=> 1|checkbox
	$("input[type='checkbox']").prop("className",function(index,oldvalue){
		console.log(index+"|"+oldvalue);
	});
	//=> 0|taiyang
	//=> 1|yaotaiyang
</script>

push

$ele.push(element, [element2, ...])  //=> self

添加元素到当前Zepto对象的最后。

这是一个zepto的方法，不是jquery的api

ready

$(document).ready(function($){ ... })  //=> self

添加一个事件侦听器，当页面dom加载完毕 “DOMContentLoaded” 事件触发时触发。建议使用 $()来代替这种用法。

reduce

$ele.reduce(function(memo, item, index, array){ ... }, [initial])  //=> value

与 Array.reduce有相同的用法，遍历当前Zepto对象集合。memo是函数上次的返回值。迭代进行遍历。

这是一个zepto的方法，不是jquery的api

remove

$ele.remove()  //=> self

移出当前Zepto对象中的元素。有效的从dom中移除。

removeAttr

$ele.removeAttr(name)  //=> self

移动当前Zepto对象集合中所有元素的指定属性。

removeClass

$ele.removeClass([name])  //=> self
$ele.removeClass(function(index, oldClassName){ ... })  //=> self
$("#check1").removeClass("taiyang yueliang")

移动当前Zepto对象集合中所有元素的指定class。如果name参数未给出。将移出所有的class。多个class参数名称可以利用空格分隔。下例移除了两个class。

replaceWith

$ele.replaceWith(content)  //=> self

用提供的内容替换所有匹配的元素。(包含元素本身)。content参数可以为 before中描述的类型。

scrollTop

$ele.scrollTop()  //=> number

获取页面上的滚动元素或者整个窗口已经滚动的像素值。

show

$ele.show()  //=> self

恢复Zepto对象集合中每个元素默认的“display”值。如果你用 hide将元素隐藏，用该属性可以将其显示。相当于干掉了display：none。

siblings

$ele.siblings([selector])  //=> collection

获取Zepto集合对象所有兄弟节点。如果css选择器参数给出。过滤出符合选择器的元素。

size

$ele.size()  //=> number

获取Zepto对象集合中元素的数量。

slice

$ele.slice(start, [end])  //=> array

array中提取的方法。从start开始，如果end 指出。提取不包含end位置的元素。

text

$ele.text()  //=> string
$ele.text(content)  //=> self

获取或者设置所有Zepto对象的文本内容。当content参数未给出。返回当前Zepto对象集合中第一个元素的文本内容（包含子节点中的文本内容）。当content参数给出，使用它替换Zepto对象集合中所有元素的文本内容。它有待点似 html，与它不同的是它不能用来获取或设置 HTML。

toggle

$ele.toggle([setting])  //=> self

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

显示或隐藏匹配元素。如果 setting为true，相当于show 法。如果setting为false。相当于 hide方法。

toggleClass

$ele.toggleClass(names, [setting])  //=> self
$ele.toggleClass(function(index, oldClassNames){ ... }, [setting])  //=> self

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它，如果不存在，就添加它。如果 setting的值为真，这个功能类似于 addClass，如果为假，这个功能类似与 removeClass。

unwrap

$ele.unwrap()  //=> self

$(document.body).append('<div id=wrapper><p>Content</p></div>');
$('#wrapper p').unwrap().parents();   //=> [<body>, <html>]

将匹配元素的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

val

$ele.val()  //=> string
$ele.val(value)  //=> self
$ele.val(function(index, oldValue){ ... })  //=> self

获取或设置匹配元素的值。当value参数不存在。返回第一个元素的值。如果是<select multiple>标签，则返回一个数组。

width

$ele.width()  //=> number
$ele.width(value)  //=> self
$ele.width(function(index, oldWidth){ ... })  //=> self

获取Zepto对象集合中第一个元素的宽；或者设置Zepto对象集合所有元素的宽。

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

wrap

$ele.wrap(structure)  //=> self
$ele.wrap(function(index){ ... })  //=> self

在每个匹配的元素外层包上一个html元素。structure参数可以是一个单独的元素或者一些嵌套的元素。也可以是一个html字符串片段或者dom节点。还可以是一个生成用来包元素的回调函数，这个函数返回前两种类型的包裹片段。

需要提醒的是：该方法对于dom中的节点有着很好的支持。如果将wrap() 用在一个新的元素上，然后再将结果插入到document中，此时该方法无效。

// wrap each button in a separate span:
$('.buttons a').wrap('<span>')

// wrap each code block in a div and pre:
$('code').wrap('<div class="highlight"><pre /></div>')

// wrap all form inputs in a span with classname
// corresponding to input type:
$('input').wrap(function(index){
return '<span class=' +
this.type +
'field />'
})
//=> <span class="textfield"><input type=text /></span>,
//   <span class="searchfield"><input type=search /></span>

// WARNING: will not work as expected!
$('<em>broken</em>').wrap('<li>').appendTo(document.body)
// do this instead:
$('<em>better</em>').appendTo(document.body).wrap('<li>')

wrapAll

$ele.wrapAll(structure)  //=> self

在所有匹配元素外面包一层HTML结构。

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

wrapInner

$ele.wrapInner(structure)  //=> self
$ele.wrapInner(function(index){ ... })  //=> self

// 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>'); //<ol><li><p><em>old text</em></p></li></ol>

在匹配元素里的内容外包一层结构。

检测方法

该检测方法可以在不同的环境中微调你的站点或者应用程序，并帮助你识别手机和平板；以及不同的浏览器和操作系统。

// general device type
$.os.phone
$.os.tablet

// specific OS
$.os.ios
$.os.android
$.os.webos
$.os.blackberry
$.os.bb10
$.os.rimtabletos

// specific device type
$.os.iphone
$.os.ipad
$.os.touchpad
$.os.kindle

// specific browser
$.browser.chrome
$.browser.firefox
$.browser.silk
$.browser.playbook

事件处理

$.Event

$.Event(type, [properties]) //=> event

创建并初始化一个指定的dom事件。如果properties参数给出，使用它来扩展出新的事件对象。默认情况下，事件被设置为冒泡方式；这个可以通过设置bubbles为false来关闭。

初始化的事件可以使用 trigger来触发。 创建event对象的场景并不多

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

$.proxy

$.proxy(fn, context)  //=> function
$.proxy(context, property)  //=> function

var obj = {name: 'Zepto'};
var handler = function() {
        console.log("hello from + ", this.name);
    };

// ensures that the handler will be executed in the context of `obj`:
$(document).on('click', $.proxy(handler, obj));

var obj = {
    name: "world",
    test: function() {
        alert(this.name);
        $("#test").unbind("click", obj.test);
    }
};

$("#test").click(jQuery.proxy(obj, "test"));

接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境，新函数中this指向context参数。另外一种形式，原始的function是context对像的方法。

bind 用 on 替代

$ele.bind(type, function(e){ ... })  //=> self
$ele.bind({ type: handler, type2: handler2, ... })  //=> self

为一个元素绑定一个处理事件。

delegate 用on代替

$ele.delegate(selector, type, function(e){ ... }) //=> self

$ele.delegate(selector, { type: handler, type2: handler2, ... }) //=> self

基于一组特定的根元素为所有选择器匹配的元素附加一个处理事件，匹配的元素可能现在或将来才创建。

die

$ele.die(type, function(e){ ... })  //=> self
$ele.die({ type: handler, type2: handler2, ... })  //=> self

删除通过 live 添加的事件。

live

$ele.live(type, function(e){ ... })  //=> self
$ele.live({ type: handler, type2: handler2, ... })  //=> self

类似delegate，添加一个个事件处理器到符合目前选择器的所有元素匹配，匹配的元素可能现在或将来才创建。

off

$ele.off(type, [selector], function(e){ ... })  //=> self off委托事件的某个回调
$ele.off({ type: handler, type2: handler2, ... }, [selector])  //=> self  off多个事件回调
$ele.off(type, [selector])  //=> self  off委托的事件
$ele.off()  //=> self off所有事件

移除通过 on 注册的事件(用bind或者用on注册的事件)。如果没有参数，将移出当前元素上所有的注册事件。

//如果selector存在，则相当于delegate。
$ele.off(type, [selector], function(e){ ... }) //=> self
$("ul").on("click","li",function(){alert("yaotaiyang")});
//相当于将li的事件代理到ul上。后续添加的li也能拥有以上方法。该事件可以通过undelegate来移除。
$("ul").undelegate();  //也可用:$("ul").off();

on 集成bind和delegate方法。

$ele.on(type, [selector], function(e){ ... })  //=> self
$ele.on({ type: handler, type2: handler2, ... }, [selector])  //=> self

添加事件到Zepto对象集合上。多个事件可以通过空格的字符串方式添加。或者以事件类型、函数对象的 方式。如果css选择器给出，事件的对象满足选择器条件时。事件才会被触发。

事件处理程序在触发事件元素或者css选择器匹配的元素的上下文中执行(this指向触发事件的元素)。

当事件处理程序返回false, 或调用preventDefault()，浏览器的默认事件将会被阻止。

var elem = $('#content');  // observe all clicks inside #content:
elem.on('click', function(e) {... }) ; // observe clicks inside navigation links in #content
elem.on('click', 'nav a', function(e) {... }) // all clicks inside links in the document

one

$ele.one(type, function(e){ ... }) //=> self

$ele.one({ type: handler, type2: handler2, ... }) //=> self

添加一个处理事件到元素。处理函数在每个元素上最多执行一次。

trigger

$ele.trigger(event, [data])

在Zepto对象集合的元素上触发指定的事件。事件可以是一个字符串，也可以是一个 $.Event 对象。如果data参数存在，它会作为参数传递给事件函数。

// add a handler for a custom event
$(document).on('mylib:change', function(e, from, to) {
        console.log('change on %o with data %s, %s', e.target, from, to);
});
 // trigger the custom event
$(document.body).trigger('mylib:change', ['one', 'two']);

triggerHandler

$ele.triggerHandler(event, [data])  //=> self
$input.triggerHandler('focus');

像 trigger，它只触发事件回调，没有浏览器的默认行为。

unbind

$ele.unbind(type, function(e){ ... })  //=> self
$ele.unbind({ type: handler, type2: handler2, ... })  //=> self

移除通过 bind 注册的事件。

undelegate

$ele.undelegate(selector, type, function(e){ ... })  //=> self
$ele.undelegate(selector, { type: handler, type2: handler2, ... })  //=> self

移除通过delegate 注册的事件。

Ajax请求

$.ajax

$.ajax(options)  //=> XMLHttpRequest

执行Ajax请求。请求地址可以是本地的或者跨域的，在支持的浏览器中通过 HTTP access control或者通过JSONP来完成。

参数:

• type (默认： “GET”)：请求方法 (“GET”, “POST”, or other)
• url (默认： 当前地址)：发送请求的地址
• data (默认：none)：发送到服务器的数据；如果是get请求，它会自动被作为参数拼接到url上。非String对象将通过 $.param 得到序列化字符串。
• processData (默认： true)： 对于非Get请求。是否自动将 data 转换为字符串。
• contentType (默认： “application/x-www-form-urlencoded”)： 发送信息至服务器时内容编码类型。 (这也可以通过设置headers headers)。通过设置 false 跳过设置默认值。
• dataType (默认： none)：预期服务器返回的数据类型(“json”, “jsonp”, “xml”, “html”, or “text”)
• timeout (默认： 0)： 设置请求超时时间（毫秒），0表示不超时。
• headers (默认：{})： 一个额外的"{键:值}"对映射到请求一起发送
• async (默认： true)：默认设置下，所有请求均为异步。如果需发送同步请求，请将此设置为 false。
• global (默认： true)：请求将触发全局AJAX事件处理程序，设置为 false 将不会触发全局 AJAX 事件。
• context (默认： window)： 这个对象用于设置Ajax相关回调函数的上下文(this指向)。
• traditional (默认：false)：激活传统的方式通过$.param来得到序列化的 data。
  
  如果URL中含有 =?或者dataType是“jsonp”，这讲求将会通过注入一个 <script>标签来代替使用 XMLHttpRequest (查看 JSONP)。此时对 contentType, dataType, headers有限制，async 不被支持。

Ajax 回调函数

你可以指定以下的回调函数，给出的执行顺序：

• beforeSend(xhr, settings)：请求发出前调用，它接收xhr对象和settings作为参数对象。如果它返回false ，请求将被取消。

• success(data, status, xhr)：请求成功之后调用。传入返回后的数据，以及包含成功代码的字符串。

• error(xhr, errorType, error)：请求出错时调用。 (超时，解析错误，或者状态码不在HTTP 2xx)。

• complete(xhr, status)：请求完成时调用，无论请求失败或成功。

Ajax 事件

当global: true时。在Ajax请求生命周期内，以下这些事件将被触发。

• ajaxStart (global)：如果没有其他Ajax请求当前活跃将会被触发。

• ajaxBeforeSend (data: xhr, options)：再发送请求前，可以被取消。

• ajaxSend (data: xhr, options)：像 ajaxBeforeSend，但不能取消。

• ajaxSuccess (data: xhr, options, data)：当返回成功时。

• ajaxError (data: xhr, options, error)：当有错误时。

• ajaxComplete (data: xhr, options)：请求已经完成后，无论请求是成功或者失败。

• ajaxStop (global)：如果这是最后一个活跃着的Ajax请求，将会被触发。

默认情况下，Ajax事件在document对象上触发 然而，如果请求的 context 是一个dom节点，该事件会在此节点上触发然后再dom中冒泡。唯一的例外是 ajaxStart & ajaxStop这两个全局事件。

$(document).on('ajaxBeforeSend', function(e, xhr, options) {
        // This gets fired for every Ajax request performed on the page.
        // The xhr object and $.ajax() options are available for editing.
        // Return false to cancel this request.
});

$.ajax({
    type: 'GET',
    url: '/projects',
    data: {name: 'Zepto.js'},
    dataType: 'json',  // type of data we are expecting in return:
    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',
    data: JSON.stringify({name: 'Zepto.js'}),
    contentType: 'application/json'
});

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

$.get('/whatevs.html', function(response){  $(document.body).append(response); });

执行一个Ajax GET请求。这是一个 $.ajax的简写方式。

$.getJSON

$.getJSON(url, function(data, status, xhr){ ... })  //=> XMLHttpRequest
$.getJSON(url, [data], function(data, status, xhr){ ... })  //=> XMLHttpRequest

通过 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查询字符串；如果shallow设置为true。嵌套对象不会被序列化，嵌套数组的值不会使用放括号在他们的key上。

此外，还接受 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]"

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

$ele.load(url, function(data, status, xhr){ ... })  //=> self

通过GET Ajax载入远程 HTML 文件代码并插入至 DOM 中。另外，一个css选择器可以在url中指定，像这样，可以使用匹配selector选择器的HTML内容来更新集合。

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

当这种方法执行, 它将检索 foo.html 页面的内容，Zepto会获取ID为bar元素的内容，并且插入到ID为 some_element 元素，而其他的被检索到的元素将被废弃。

如果css选择器不存在。将使用完整的返回文本。

请注意，在没有选择器的情况下，任何javascript块都会执行。如果带上选择器，匹配选择器内的script将会被删除。

表单方法

serialize

$form.serialize()  //=> string

在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。

serializeArray

$form.serializeArray()  //=> array

将用作提交的表单元素的值编译成拥有name和value对象组成的数组。不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。结果不包含file inputs的数据。

//表单序列化为对象数组
$('form').serializeArray();  //=> [{ name: 'size', value: 'micro' }, { name: 'name', value: 'Zepto' }]

submit

$form.submit()  //=> self
$form.submit(function(e){ ... })  //=> self

为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非调用了 preventDefault()。

当function参数给出时，在当前元素上它简单得为其在“submit”事件绑定一个处理函数。

效果

$.fx

全局动画设置：

• $.fx.off (在支持css transition 的浏览器中默认为false)：设置true来禁止所有animate() transitions。

• $.fx.speeds：用来设置动画时间的对象。

    _default (400 ms)
    fast (200 ms)
    slow (600 ms)
  

animate

$ele.animate(properties, [duration, [easing, [function(){ ... }]]])  //=> self
$ele.animate(properties, { duration: msec, easing: type, complete: fn })  //=> self
$ele.animate(animationName, { ... })  //=> self

对当前Zepto集合对象中元素进行css transition属性平滑过渡。

• properties: 一个对象，该对象包含了css动画的值，或者css帧动画的名称。

• duration (默认 400)：以毫秒为单位的时间，或者一个字符串 ( fast, slow)。
  
  fast (200 ms), slow (600 ms), 任何$.fx.speeds自定义属性

• easing (默认 linear)：指定动画的缓动类型
  
  使用以下一个： ease/ linear / ease-in / ease-out /ease-in-out /cubic-bezier(...)

• complete：动画完成时的回调函数
  
  Zepto 还支持以下 CSS transform 属性：

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

  如果duration参数为 0 或 $.fx.off 为 true(在不支持css transitions的浏览器中默认为true)
  
  如果第一个参数是字符串而不是一个对象，它将被当作一个css关键帧动画 CSS keyframe animation的名称。

        $("#some_element").animate({opacity: 0.25, left: '50px', color: '#abcdef', rotateZ: '45deg', translate3d: '0,10px,0'}, 500, 'ease-out');
  
        >  Zepto只使用css过渡效果的动画。jquery的相对变化("=+10px") syntax 也不支持。
  

触控

Touch events

• tap —元素tap的时候触发。
• singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)。
• longTap — 当一个元素被按住超过750ms触发。
• swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)