zeptoAPI.docx

当一个函数附加在DOMContentLoaded事件的处理流程中。

如果页面已经加载完毕，这个方法将会立即被执行。

$（'div'）

//=>allDIVelementsonthepage

$（'#foo'）

//=>elementwithID"foo"

//createelement:

$（"

Hello

//=>thenewPelement

//createelementwithattributes:

$（"

",

{

text:

"Hello",

id:

"greeting",

css:

{color:

'darkblue'}

}）

//=>

darkblue">Hello

//executecallbackwhenthepageisready:

Zepto（function（$）{

alert（'ReadytoZepto!

'）

}）

3.2$.camelCase

$.camelCase（string）⇒string

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

$.camelCase（'hello-there'）

//=>"helloThere"

$.camelCase（'helloThere'）

//=>"helloThere"

3.3$.containsv1.0+

$.contains（parent,node）⇒boolean

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

3.4$.each

$.each（collection,function（index,item）{...}）⇒collection

遍历数组元素或以key-value值对方式遍历对象。

回调函数返回false时停止遍历。

$.each（['a',

'b',

'c'],

function（index,

item）{

console.log（'item%dis:

%s',

index,item）

}）

varhash={

name:

'zepto.js',

size:

'micro'

}

$.each（hash,

function（key,

value）{

console.log（'%s:

%s',

key,value）

}）

3.5$.extend

$.extend（target,[source,[source2,...]]）⇒target

$.extend（true,target,[source,...]）⇒targetv1.0+

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

默认情况下为，复制为浅复制。

如果第一个参数为true表示深度复制。

vartarget

={one:

'patridge'},

source={

two:

'turtledoves'

}

$.extend（target,

source）

//=>{one:

'patridge',

//two:

'turtledoves'}

3.6$.fn

Zepto.fn是一个对象，它拥有Zepto对象上所有可用的方法。

如addClass（），attr（），和其它方法。

在这个对象添加一个方法，所有的Zepto对象上都能用到该方法。

这里有一个实现empty（）方法的例子：

$.fn.empty

=function（）{

return

this.each（function（）{

this.innerHTML=

''}）

}

3.7$.grepv1.0+

$.grep（items,function（item）{...}）⇒array$.grep（[1,2,3],

function（）{

returnitem>1

}）;

//=>[2,3]

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

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

3.9$.isArray（object）⇒boolean

如果object是array，则返回ture。

3.10$.isFunction

$.isFunction（object）⇒boolean

如果object是function，则返回ture。

3.11$.isPlainObjectv1.0+

$.isPlainObject（object）⇒boolean

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

$.isPlainObject（{}）

//=>true

$.isPlainObject（new

Object）//=>true

$.isPlainObject（new

Date）//=>false

$.isPlainObject（window）

//=>false

3.12$.isWindowv1.0+

$.isWindow（object）⇒boolean

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

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

3.13$.map

$.map（collection,function（item,index）{...}）⇒collection

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

$.map（[1,2,3,4,5],function（item,index）{

if（item>1）{returnitem*item;}

}）;

//=>[4,9,16,25]

$.map（{"yao":

1,"tai":

2,"yang":

3},function（item,index）{

if（item>1）{returnitem*item;}

}）;

//=>[4,9]

3.14$.parseJSONv1.0+

$.parseJSON（string）⇒object

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

3.15$.trimv1.0+

$.trim（string）⇒string

删除字符串开始和末尾的空白符。

类似String.prototype.trim（）。

3.16$.typev1.0+

$.type（object）⇒string

获取JavaScript对象的类型。

可能的类型有：

nullundefinedbooleannumberstringfunctionarraydateregexpobjecterror。

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

3.17add

add（selector,[context]）⇒self

添加元素到匹配的元素集合。

如果content参数存在，只在content中进行查找，否则在document中查找。

• listitem1
• listitem2
• listitem3

aparagraph

$（'li'）.add（'p'）.css（'background-color','red'）;

3.18addClass

addClass（name）⇒self

addClass（function（index,oldClassName）{...}）⇒self

为每个匹配的元素添加指定的class类名。

多个class类名通过空格分隔。

3.19after

after（content）⇒self

在每个匹配的元素后插入内容。

内容可以为html字符串，dom节点，或者节点组成的数组。

$（'formlabel'）.after（'

Anotebelowthelabel

3.20append

append（content）⇒self

在每个匹配的元素末尾插入内容。

内容可以为html字符串，dom节点，或者节点组成的数组。

$（'ul'）.append（'

3.21appendTo

appendTo（target）⇒self

将匹配的元素插入到目标元素的末尾（里面的后面）。

这个有点像append，但是插入的目标与其相反。

$（'

3.22attr

attr（name）⇒string

attr（name,value）⇒self

attr（name,function（index,oldValue）{...}）⇒self

attr（{name:

value,name2:

value2,...}）⇒self

读取或设置dom的属性。

如果没有给定value参数，则读取Zepto对象第集合一个元素的属性值。

当给定了value参数。

则设置Zepto对象集合中所有元素所有元素的属性值。

当value参数为null，那么这个属性将被移除（类似removeAttr），多个属性能以通过对象值对的方式进行设置。

要读取dom的属性如checked和selected,使用prop。

varform=

$（'form'）

form.attr（'action'）

//=>readvalue

form.attr（'action',

'/create'）//=>setvalue

form.attr（'action',

null）//=>removeattribute

//multipleattributes:

form.attr（{

action:

'/create',

method:

'post'

}）

3.23before

before（content）⇒self

在匹配每个元素的前面（外面）插入内容。

内容可以为html字符串，dom节点，或者节点组成的数组。

$（'table'）.before（'

Seethefollowingtable:

3.24children

children（[selector]）⇒collection

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

$（'ol'）.children（'*:

nth-child（2n）'）

//=>everyotherlistitemfromeveryorderedlist

3.25clonev1.0+

clone（）⇒collection

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

此方法不会有数据和事件处理程序复制到新的元素。

这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。

3.26closest

closest（selector,[context]）⇒collection

closest（collection）⇒collectionv1.0+

closest（element）⇒collectionv1.0+

从元素本身开始，逐级向上级元素匹配，并返回最先匹配selector的祖先元素。

如果context节点参数存在。

那么直考虑该节点的后代。

这个方法与parents（selector）有点相像，但他只返回最先匹配的祖先元素。

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

varinput=

$（'input[type=text]'）

input.closest（'form'）

3.27concat

concat（nodes,[node2,...]）⇒self

添加元素到一个Zepto对象集合形成一个新数组。

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

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

3.28contentsv1.0+

contents（）⇒collection

获得每个匹配元素集合元素的子元素，包括文字和注释节点。

.contents（）和.children（）方法类似，只不过前者包括文本节点以及jQuery对象中产生的HTML元素。

3.29css

css（property）⇒value

css（property,value）⇒self

css（{property:

value,property2:

value2,...}）⇒self

读取或设置dom元素的css属性。

当value参数不存在的时候，返回Zepto对象集合中第一个元素的css属性。

当value参数存在时，设置Zepto对象集合中每一个元素的对应css属性。

多条css属性可以利用对象值对的方式进行设置。

当value为空（空字符串，null或undefined），那个css属性将会被移出。

当value参数为一个无单位的数字，如果该css属性需要单位，“px”将会自动添加到该属性上。

varelem=

$（'h1'）

elem.css（'background-color'）

//readproperty

elem.css（'background-color',

'#369'）//setproperty

elem.css（'background-color',

''）//removeproperty

//setmultipleproperties:

elem.css（{

backgroundColor:

'#8EE',

fontSize:

28}）

3.30data

data（name）⇒value

data（name,value）⇒self

读取或写入dom的data-*属性。

行为有点像attr，但是属性名称前面加上data-。

当读取属性值时，会有下列转换：

v1.0+

“true”,“false”,and“null”被转换为相应的类型；

数字值转换为实际的数字类型；

JSON值将会被解析，如果它是有效的JSON；

其它的一切作为字符串返回。

Zepto基本实现`data（）`只能存储字符串。

如果你要存储任意对象，请引入可选的“data”模块到你构建的Zepto中。

3.31each

each（function（index,item）{...}）⇒self

遍历一个Zepto集合对象，为每一个匹配元素执行一个函数。

this关键字指向当前item（作为函数的第二个参数传递）。

如果函数返回false，遍历结束。

$（'forminput'）.each（function（index）{

console.log（'input%dis:

%o',

index,this）

}）

3.32empty

empty（）⇒self

从Zepto对象集合中移除所有的dom子节点。

3.33eq

eq（index）⇒collection

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

$（'li'）.eq（0）

//=>onlythefirstlistitem

$（'li'）.eq（-1）

//=>onlythelastlistitem

3.34filter

filter（selector）⇒collection

filter（function（index）{...}）⇒collectionv1.0+

过滤Zepto集合对象，返回的Zepto集合对象里面的项满足参数中的css选择器。

如果参数为一个函数，函数返回有实际值得时候，元素才会被返回。

在函数中，this关键字指向当前的元素。

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

3.35find

find（selector）⇒collection

find（collection）⇒collectionv1.0+

find（element）⇒collectionv1.0+

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

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

varform=

$（'#myform'）

form.find（'input,select'）

3.36first

first（）⇒collection

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

$（'form'）.first（）

3.37forEach

forEach（function（item,index,array）{...},[context]）

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

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

3.38get

get（）⇒array

get（index）⇒DOMnode

从当前Zepto对象集合中获取所有元素或单个元素。

当index参数不存在的时候，以普通数组的方式返回所有的元素。

当指定index时，只返回该置的元素。

这点与与eq不同，该方法返回的不是Zepto集合对象。

varelements=

$（'h2'）

elements.get（）

//=>getallheadingsasanarray

elements.get（0）

//=