zepto入门

zepto:

安装了node.js可以通过

npm install zepto; 或者grab the latest version on GitHub安装

否则可以通过在zepto的官网上复制粘贴。

 

它是专门为移动端定制的框架：轻量级的javascript库

zepto与jQuery类似的api：会jQuery就会zepto

 

zepto的特点：

针对移动端：

轻量级压缩版只有8kb

响应执行速度快

语法，大多数语法和jQuery一样，学习难度低，上手快

目前api完善的框架中体积最小的一个

 

官网：zeptojs.com

需要将touch.js下载下来；适配移动端

与jQuery相同的api

核心：$

1.做函数使用：

function(){}

选择器字符串

dom code

html字符串

2.做对象使用：

$.isArray();

$.ajax();

等等

 

与jQuery不同的API

attr一般用于自定义属性

prap一般用于boolean值属性（当没有选中就可以没有这个属性，如class何selected等）

attr在属性没有定义的情况下会得到undefined

prap在读取属性的优先级要高于attr

removeProp（）移除属性；这个属性在1.2以上才有

 

dom操作：

jQuery在插入配置对象的时候会发生失败；

但zepto可以

 

在vue中遇到class会写成className进行插入；

 

var $p=$("<p>hello</p>",{id:"insert",background:"red"})使用配置对象对前面的内容进行修饰。

 

jQuery：可以遍历数组、对象但不能遍历字符串

zepto：中可以遍历字符串.比如需要转换成字符串在逐个遍历

 

zepto:可以通过offset()获取没有单位的值，可以用来计算。

 

jQuery获取宽高：

width().height()内容区的宽高，不带单位

.css("width")

 

innerHeight(),innerWidth();包括padding

outerHeight(),outWidth()包括边框，传true包含margin

 

zepto：

width(),height()相当于jQuery的innerHeight,和innerWidth,并且没有单位

没有inner~

获取单独的值

.css("width")

.css("height")

.css("border-width")://border是一个复合属性，里面包含了

.css("padding")

 

jQuery:可以获得隐藏元素的宽高

 

display为none的话

zepto:获取不到隐藏元素的属性值

 

事件委托：live已经废除了

jQuery中的事件委托使用delegate

$().delegate("事件","选择器",function())；

也可以

$().on("事件","选择器",function())；

 

zepto中

delegate已经要废除了

用on就行了；

 

这里有一个坑

 

在zepto中，它是将委托事件放到一个队列之中，当触发第一个元素之后，它会将后面符合条件的元素全部触发掉。

点击第二个元素会触发后面的元素。

 

click相对于touch事件会有300毫秒的延迟；

 

与jQuery类似的事件：

on()绑定事件

off（）关闭绑定事件

bind()绑定事件处理函数，通常用在自定义事件上。

one()绑定一次性事件

trigger()触发用bind()的事件通常用于自定义事件。

unbind()删除所有绑定的bind事件

bind("函数名",function())

trigger(函数名)

 

zepto独特的touch事件

tap()，利用在document绑定touch来模拟tap事件，并且tap事件会冒泡到document上

singleTap()点击事件

doubleTap（）双击事件

longTap()当一个元素被按住超过750毫秒,这个事件可以修改

 

swipe（可以通过css的touch-action：none禁止默认的滑动）（滑动超过30px算滑动事件）

对滑动的方向进行滑动

swipeLeft

swipeRight

swipeTop

swipeDown

 

zeptoform表单：get没必要；它在地址栏就显示了。

serialize()在Ajax请求中post请求用来将提交的表单元素转化成URL-encoded字符串key(name)/value

不能使用的表单元素和未选中的选项将会被跳过

serializeArray()将表单元素编译成name/value对象的数组

不能使用的表单元素和未选中的选项将会被跳过

submit()为submit绑定一个单处理函数，默认情况是提交表单；除非阻止默认行为；

 

 

id的寻找的速度比class块：原因是找到id之后不会向下寻找；

 

在开发的时候需要对类进行划分，最好不要使用重复的名字（在命名中可以使用-等命名，需要具体，如果多人开发可以通过在前面添加自己最鲜明的符号）