Zepto Api参考

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 — 当元素被划过时触发。(可选择给定的方向)
相关阅读:
WPF学习之路（八）页面
 面试题整理:C#（一）
[转载] Tomcat架构分析
 [转载] ConcurrentHashMap原理分析
 [转载] Java并发编程：Lock
[转载] KAFKA分布式消息系统
 [转载] Java并发编程：Callable、Future和FutureTask
[转载] Java线程池框架源码分析
 [转载] 红黑树（Red Black Tree）- 对于 JDK TreeMap的实现
 [转载] RED-BLACK(红黑)树的实现TreeMap源码阅读
原文地址：https://www.cnblogs.com/stephenykk/p/5376505.html

zepto API参考

核心方法

$(selector, [context])

$.camelCase

$.contains

$.each

$.extend

$.fn

$.grep

$.inArray

$.isArray

$.isFunction

$.isPlainObject

$.isWindow

$.map

$.parseJSON

$.trim

$.type

zepto对象的方法

add

addClass

after

append

appendTo

attr

before

children

clone

closest

concat

contents

css

data

each

eq

filter

find

first

forEach

get

has

hasClass

height

hide

html

index

indexOf

insertAfter

insertBefore

is

last

map

next

not

offset

offsetParent

parent

parents

pluck

position

prepend

prependTo

prev

prop

push

ready

reduce

remove

removeAttr

removeClass

replaceWith

scrollTop

show

siblings

size

slice

text

toggle

toggleClass