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.
在浏览器上(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:
$("
Hello
") //=> the new P element// create element with attributes:
$("
", {text: "Hello", id: "greeting", css: { color: 'darkblue' } }) //=>
Hello
// 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
- list item 1
- list item 2
- list item 3
a paragraph
addClass
为每个匹配的元素添加指定的class类名。多个class类名通过空格分隔。
$ele.addClass(name) //=> self
$ele.addClass(function(index, oldClassName){ ... }) //=> self
after
在每个匹配的元素后插入内容。内容可以为html字符串，dom节点，或者节点组成的数组。
$ele.after(content) //=> self
$('form label').after('
A note below the label
')append
在每个匹配的元素末尾插入内容。内容可以为html字符串，dom节点，或者节点组成的数组。
$ele.append(content) //=> self
$('ul').append('
appendTo
将匹配的元素插入到目标元素的末尾（里面的后面）。这个有点像 append，但是插入的目标与其相反。
$ele.appendTo(target) //=> self
$('
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('
See the following table:
')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+
- “true”, “false”, and “null” 被转换为相应的类型； 转换逻辑值和null
- 数字值转换为实际的数字类型；
- JSON值将会被解析，如果它是有效的JSON；
- 其它的一切作为字符串返回。
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。
- list item 1
- list item 2
- list item 3
a paragraph
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@$2');
});
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
$('
Emphasis mine.
').insertAfter('blockquote')插入Zepto对象集合中的元素到指定的每个元素后面的dom中。这个有点像 after，但是使用方式相反。
insertBefore
$ele.insertBefore(target) //=> self
$('
See the following table:
').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>, , ]
获取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('
将参数内容插入到每个匹配元素的前面（元素内部）。插入d的元素可以试html字符串片段，一个dom节点，或者一个节点的数组。
prependTo
$ele.prependTo(target) //=> self
$('
将所有元素插入到目标前面（元素内）。这有点像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。
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('
Content
$('#wrapper p').unwrap().parents(); //=> [, ]
将匹配元素的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
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('')
// wrap each code block in a div and pre:
$('code').wrap('
// wrap all form inputs in a span with classname
// corresponding to input type:
$('input').wrap(function(index){
return '<span class=' +
this.type +
'field />'
})
//=> ,
//
// WARNING: will not work as expected!
$('broken').wrap('
// do this instead:
$('better').appendTo(document.body).wrap('
wrapAll
$ele.wrapAll(structure) //=> self
在所有匹配元素外面包一层HTML结构。
// wrap all buttons in a single div:
$('a.button').wrapAll('
浙公网安备 33010602011771号