Zepto1.1.2 中文api

LION查看全部>> 09-18

人气 6,120

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

文章目录
[隐藏]

Zepto.js

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

文档声明:

  • 本文档绝大部分的内容来自yaotaiyang翻译的Zepto.js (1.0)版本的api,感谢!;
  • 根据官方最新的1.1.2版本做了翻译补全;
  • 改正了 yaotaiyang翻译的Zepto.js (1.0)文档中极少数的翻译笔误和错误,和语句不通顺的地方;

如果您有任何建议,或者拍砖,欢迎在微博上@愚人码头 联系我。

设计的目的是提供jquery的类似的API,但并不是100%覆盖jquery为目的。zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API,所以你能把你主要的精力放到应用开发上

Zepto 是一款开源软件,它可以被开发者和商业发布。 MIT license.

Tweet

Download Zepto

默认构建包含以下模块:
Core, Ajax, Event, Form, IE.

Zepto v1.0 默认捆绑了Effects, iOS3, 和 Detect 模块。
请参阅下面的 可选模块(optional modules)

Or grab the latest version on GitHub.

用一个script标签引入Zepto到你的页面的底部:

如果$变量尚未定义,Zepto只设置了全局变量$指向它本身。 没有Zepto.noConflict方法。

如果你需要支持旧的浏览器,如Internet Explorer 9或以下,你可以退回到jQuery的1.x。

浏览器支持

初级 (100% 支持)

  • Safari 6+ (Mac)
  • Chrome 30+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
  • Firefox 24+ (Windows, Mac, Android, Linux, Firefox OS)
  • iOS 5+ Safari
  • Android 2.3+ Browser
  • Internet Explorer 10+ (Windows, Windows Phone)

次要目标(完全或大部分支持)

  • iOS 3+ Safari
  • Chrome <30
  • Firefox 4+
  • Safari <6
  • Android Browser 2.2
  • Opera 10+
  • webOS 1.4.5+ Browser
  • BlackBerry Tablet OS 1.0.7+ Browser
  • Amazon Silk 1.0+
  • Other WebKit-based browsers/runtimes

需要注意的是Zepto的一些可选功能是专门针对移动端浏览器的;因为它的最初目标在移动端提供一个精简的类似jquery的js库。

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

 

总之,Zepto希望在所有的现代浏览器中作为一种基础环境来使用。Zepto不支持旧版本的Internet Explorer浏览器(<10)。

手动建立Zepto

zepto.jszepto.min.js提供以上使用方式。 然而,为了更好的程序效果和自由性,可以在使用Zepto源码构建Zepto.js和zepto.min.js的时候选择模块并作测试, 使用UglifyJS根据你的需要来生成(当服务端开启gzipped后,最精简的代码)代码。

关于如何建立Zepto的the README,包含运行测试和补丁。

Zepto 模块

module default description
zepto 核心模块;包含许多方法
event 通过on()& off()处理事件
ajax XMLHttpRequest 和 JSONP 实用功能
form 序列化 & 提交web表单
ie 增加支持桌面的Internet Explorer 10+和Windows Phone 8。
detect 提供 $.os$.browser消息
fx The animate()方法
fx_methods 以动画形式的 show, hide, toggle, 和 fade*()方法.
assets 实验性支持从DOM中移除image元素后清理iOS的内存。
data 一个全面的 data()方法, 能够在内存中存储任意对象。
deferred 提供 $.Deferredpromises API. 依赖"callbacks" 模块.
当包含这个模块时候, $.ajax() 支持promise接口链式的回调。
callbacks 为"deferred"模块提供 $.Callbacks
selector 实验性的支持 jQuery CSS 表达式 实用功能,比如 $('div:first')el.is(':visible')
touch 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。
gesture 在触摸设备上触发 pinch 手势事件。
stack 提供 andSelf& end()链式调用方法
ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ,以兼容 iOS 3.x.

创建插件

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

为了更好开始开发插件,先看下source of Zepto's core module,并确认读过coding style guidelines


核心方法

$()

通过执行css选择器,包装dom节点,或者通过一个html字符串创建多个元素 来创建一个Zepto集合对象。

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

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

当给定一个html字符串片段来创建一个dom节点时。也可以通过给定一组属性映射来创建节点。最快的创建但元素,使用<div><div/>形式。

当一个函数附加在 DOMContentLoaded 事件的处理流程中。如果页面已经加载完毕,这个方法将会立即被执行。

不支持jQuery CSS 扩展, 然而,可选的“selector”模块有限提供了支持几个最常用的伪选择器,而且可以被丢弃,与现有的代码或插件的兼容执行。

如果$变量尚未定义,Zepto只设置了全局变量$指向它本身。允许您同时使用的Zepto和有用的遗留代码,例如,prototype.js。只要首先加载Prototype,Zepto将不会覆盖Prototype的 $ 函数。Zepto将始终设置全局变量Zepto指向它本身。

$.camelCase v1.0+

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

$.contains v1.0+

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

$.each

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

$.extend

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

默认情况下为,复制为浅拷贝(浅复制)。如果第一个参数为true表示深度拷贝(深度复制)。

$.fn

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

这里有一个实现 Zepto 的 empty() 方法的例子:

$.grep v1.0+

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

$.inArray v1.0+

返回数组中指定元素的索引值(愚人码头注:以0为基数),如果没有找到该元素则返回-1

愚人码头注:[fromIndex] 参数可选,表示从哪个索引值开始向后查找。

$.isArray

如果object是array,则返回ture。

$.isFunction

如果object是function,则返回ture。

$.isPlainObject v1.0+

测试对象是否是“纯粹”的对象,这个对象是通过 对象常量("{}") 或者 new Object 创建的,如果是,则返回true。

$.isWindow v1.0+

如果object参数是否为一个window对象,那么返回true。这在处理iframe时非常有用,因为每个iframe都有它们自己的window对象,使用常规方法obj === window校验这些objects的时候会失败。

$.map

通过遍历集合中的元素,返回通过迭代函数的全部结果,(愚人码头注:一个新数组)nullundefined 将被过滤掉。

$.parseJSON v1.0+

原生JSON.parse方法的别名。(愚人码头注:接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。)

$.trim v1.0+

删除字符串首尾的空白符。类似String.prototype.trim()。

$.type v1.0+

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

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

add

添加元素到当前匹配的元素集合中。如果给定content参数,将只在content元素中进行查找,否则在整个document中查找。

addClass

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

after

在每个匹配的元素后插入内容(愚人码头注:外部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。

append

在每个匹配的元素末尾插入内容(愚人码头注:内部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。

appendTo

将匹配的元素插入到目标元素的末尾(愚人码头注:内部插入)。这个有点像 append,但是插入的目标与其相反。

attr

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

要读取DOM的属性如 checkedselected, 使用 prop

before

在匹配每个元素的前面插入内容(愚人码头注:外部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。

children

获得每个匹配元素集合元素的直接子元素,如果给定selector,那么返回的结果中只包含符合css选择器的元素。

clone v1.0+

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

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

closest

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

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

concat

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

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

contents v1.0+

获得每个匹配元素集合元素的子元素,包括文字和注释节点。(愚人码头注:.contents()和.children()方法类似,只不过前者包括文本节点以及jQuery对象中产生的HTML元素。)

css

Read or set CSS properties on DOM elements. When no value is given, returns the CSS property from the first element in the collection. When a value is given, sets the property to that value on each element of the collection.

读取或设置DOM元素的css属性。当value参数不存在的时候,返回对象集合中第一个元素的css属性。当value参数存在时,设置对象集合中每一个元素的对应css属性。

多个属性可以通过传递一个属性名组成的数组一次性获取。多个属性可以利用对象键值对的方式进行设置。

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

data

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

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

  • “true”, “false”, and “null” 被转换为相应的类型;
  • 数字值转换为实际的数字类型;
  • JSON值将会被解析,如果它是有效的JSON;
  • 其它的一切作为字符串返回。Zepto 基本实现data()只能存储字符串。如果你要存储任意对象,请引入可选的“data”模块到你构建的Zepto中。

each

遍历一个对象集合每个元素。在迭代函数中,this关键字指向当前项(作为函数的第二个参数传递)。如果迭代函数返回 false,遍历结束。

empty

清空对象集合中每个元素的DOM内容。

eq

从当前对象集合中获取给定索引值(愚人码头注:以0为基数)的元素。

filter

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

与此相反的功能,查看not.

find

在当对象前集合内查找符合CSS选择器的每个元素的后代元素。

如果给定Zepto对象集合或者元素,过滤它们,只有当它们在当前Zepto集合对象中时,才回被返回。

first

获取当前对象集合中的第一个元素。

forEach

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

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

get

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

has v1.0+

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

hasClass

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

height

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

hide

Hide elements in this collection by setting their display CSS property to none.

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

html

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

index

获取一个元素的索引值(愚人码头注:从0开始计数)。当elemen参数没有给出时,返回当前元素在兄弟节点中的位置。当element参数给出时,返回它在当前对象集合中的位置。如果没有找到该元素,则返回-1

indexOf

Get the position of an element in the current collection. If fromIndex number is given, search only from that position onwards. Returns the 0-based position when found and -1 if not found. Use of index is recommended over this method.

在当前对象集合中获取一个元素的索引值(愚人码头注:从0开始计数)。如果给定formindex参数,从该位置开始往后查找,返回基于0的索引值,如果没找到,则返回-1index 方法是基于这个方法实现的。

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

insertAfter

将集合中的元素插入到指定的目标元素后面(愚人码头注:外部插入)。这个有点像 after,但是使用方式相反。

insertBefore

将集合中的元素插入到指定的目标元素前面(愚人码头注:外部插入)。这个有点像 before,但是使用方式相反。

is

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

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

last

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

map

遍历对象集合中的所有元素。通过遍历函数返回值形成一个新的集合对象。在遍历函数中this关键之指向当前循环的项(遍历函数中的第二个参数)。

遍历中返回 nullundefined,遍历将结束。

next

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

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

not

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

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

offset

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

当给定一个含有lefttop属性对象时,使用这些值来对集合中每一个元素进行相对于document的定位。

offsetParent v1.0+

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

parent

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

parents

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

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

pluck

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

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

position v1.0+

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

Returns an object with properties: top, left.

prepend

将参数内容插入到每个匹配元素的前面(愚人码头注:元素内部插入)。插入d的元素可以试html字符串片段,一个dom节点,或者一个节点的数组。

prependTo

将所有元素插入到目标前面(愚人码头注:元素内部插入)。这有点像prepend,但是是相反的方式。

prev

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

prop v1.0+

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

简写或小写名称,比如for, class, readonly及类似的属性,将被映射到实际的属性上,比如htmlFor, className, readOnly, 等等。

push

Add elements to the end of the current collection.

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

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

ready

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

reduce

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

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

remove

从其父节点中删除当前集合中的元素,有效的从dom中移除。

removeAttr

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

removeClass

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

replaceWith

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

scrollLeft v1.1+

获取或设置页面上的滚动元素或者整个窗口向右滚动的像素值。

scrollTop v1.0+

获取或设置页面上的滚动元素或者整个窗口向下滚动的像素值。

show

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

siblings

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

size

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

slice

提取这个数组array的子集,从start开始,如果给定end,提取从从start开始到end结束的元素,但是不包含end位置的元素。

text

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

toggle

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

toggleClass

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

unwrap

移除集合中每个元素的直接父节点,并把他们的子元素保留在原来的位置。 基本上,这种方法删除上一的祖先元素,同时保持DOM中的当前元素。

val

获取或设置匹配元素的值。当没有给定value参数,返回第一个元素的值。如果是<select multiple>标签,则返回一个数组。当给定value参数,那么将设置所有元素的值。

width

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

wrap

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

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

wrapAll

在所有匹配元素外面包一个单独的结构。结构可以是单个元素或几个嵌套的元素,并且可以通过在作为HTML字符串或DOM节点。

wrapInner

将每个元素中的内容包裹在一个单独的结构中。结构可以是单个元件或多个嵌套元件,并且可以通过在作为HTML字符串或DOM节点,或者是一个生成用来包元素的回调函数,这个函数返回前两种类型的包裹片段。


Detect methods

Detect module

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


事件处理

$.Event

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

一个事件初始化的函数可以使用 trigger来触发。

$.proxy v1.0+

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

bind

标签
相关作品
Zepto1.1.2 中文api:已吐槽 3 次
  1. 板凳
    分离浮选:

    看完楼主的帖子,我的心情竟是久久不能平复,正如老子所云:大音希声,大象希形。

    2014-11-04 下午 8:44 [回复]
  2. 沙发
    lp:

    很有帮助哦~

    2014-09-22 下午 3:39 [回复]
    • admin:

      谢谢,如果对你有帮助,欢迎常来访问。

      2014-09-23 下午 1:46 [回复]



会员登陆还没有账号 立即注册

用户登录

忘记密码 ?

用第三方帐号直接登录

微博账号登陆 QQ账号登陆