什么是zepto?

  • zepto是轻量级的JavaScript库,专门为移动端定制的框架 与jquery有着类似的API,俗称:会jquery就会用zepto

zepto的特点

  1. 针对移动端 轻量级,压缩版本只有8kb左右 响应,执行快 语法,API大部分同jquery一样,学习难度低,上手快
    目前API完善的框架中体积最小的一个

zepto官网

  • http://zeptojs.com/ https://github.com/madrobby/zepto

zepto与jquery的前世今生

相同点

  • 都是优秀的js函数库
  • 语法,API大部分都一样(zepto是按照jquery的思路来设计的)
  • zepto相当于jquery的子集
  • 同jquery一样都是以$为核心函数

不同点
jquery

  1. 针对的更多的是PC端 体积较重 API较为完善

zepto

  1. 针对的是移动端 体积较轻 有自己独特的移动端事件

核心函数 $

  • 作为函数调用
    1、参数为函数 function(){} 2、参数为选择器字符串
    3、参数为DOM code
    4、参数为html标签字符串
  • 作为对象使用
    发送ajax请求
$.ajax()
 $.get()
 $.post()

其他api方法

$.each()
 $.isArray()
 $.trim()
 ......

jquery对象/zepto对象
概念:$调用返回的就是 jquery对象/zepto对象 伪数组(有时候只有一个元素)

与jquery相同的API

add()
addClass()
css()
index()
......

与jquery不同的API

DOM操作

  • 配置对象 : jquery 不能使用配置对象添加id,class。。。
    zepto 插入DOM元素的时候添加配置对象的时候可以添加进去,并且添加的配置对象的内容会直接反应在标签属性内,且可以操作,影响对应的DOM元素。
$(function () {
 var $insert = $('<p>我是新添加的p标签</p>', { //配置对象
   id:'insert',
   class:'insert'
 });
 $('#box').append($insert)  });

offset()

  • 用来获取目标元素相对于视口的偏移量
  • jquery:返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。获取width,height时为undefine
  • zeptop:top,left,width,height(content,补白,border)均可获取

width()height()

  • jquery:
    1、width(),height() 获取content内容区的值,没有单位
    2、.css 获取content内容区的值,有单位px
    3、也可以利用innerHeight(),outerHeight(),innerWidth(),outerWidth()等来获取padding和border的值
  • zepto:
    1、zepto用width(),height()是根据盒模型决定的,并且不包含单位PX
    2、可以直接获取padding的值,border的值
    3、zepto中没有innerHeight(),innerWidth()—outerHeight(),outerWidth()

事件委托

  • 原理:利用冒泡的原理将事件绑定到父元素/祖先元素身上,event.target指向的是子元素
  • 在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。
  • zepto:
    坑!!! 委托的事件先被依次放入数组队列里,然后由自身开始往后找直到找到最后,期间符合以下条件的元素委托的事件都会执行。
    1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
    2、同一个事件
    3、委托关联 操作的类要进行关联
    4、绑定顺序—从当前的位置往后看

隐藏元素

  • jquery:jquery可以获取隐藏元素的宽高
  • zepto: zepto无法获取隐藏元素宽高

attr与prop

  • jquery:标签的固有属性,布尔值属性用 prop 。 比如:a标签的href,class,selected等。且会随着标签属性变化而变化。
    在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候,会返回undefined
    官方建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
  • zepto: attr 同样获取布尔值属性。
    在zepto中用attr也可以获取布尔值属性.
    prop在读取属性的时候优先级高于attr,布尔值属性的读取还是建议用prop
    坑!------zepto中removeProp()的方法。在1.2及以上才支持。

each

  • jquery:能遍历数组,对象,不能遍历字符串/json对象/json数组
    zepto:能遍历数组,对象,字符串

zepto事件机制

zepto有自己的一套事件机制,并且对不同的浏览器做了内部的封装处理。
舍弃了bind,delegate,die,同样jquery中舍弃了live,delegate等
统一使用on,off等标准事件

//on的事件委托
    $('#box1').on('touchstart','p',function(){
      alert($(this).text());
    });

与jQuery类似的事件处理
            on()  绑定事件处理程序
    		off() 方法移除用目标oon绑定的事件处理程序。
    		bind()  为每个匹配元素的特定事件绑定自定义的事件处理函数,可同时绑定多个事件,也可以自定义事件。
    		one() 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。只执行一次。
    		trigger() 触发有bind定义的事件(通常是自定义事件)
    		unbind()  bind的反向操作,删除匹配元素所绑定的bind事件

touch Event
	tap()          //点击事件,利用在document上绑定touch事件来模拟tap事件的,并且tap事件会冒泡到document上
	singleTap()    //单击事件
	doubleTap()    //双击事件
	longTap()      //长按事件(手指按屏幕超过750ms)
	swipe()、swipeLeft, swipeRight, swipeUp, swipeDown        //滑动事件(手指在屏幕滑动距离在同一个方向超过30px即为滑动,否则算点击)
	* 滑动事件(浏览器的默认行为---翻页---touch-action)

zepto 中的 form

serialize()

  • 在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。—key(name)/value 如:pw=123&val=kobe&rember=on

serializeArray()

  • 将用作提交的表单元素的值编译成拥有name和value对象组成的数组
  • 不能使用的表单元素,buttons,未选中的radio 、buttons/checkboxs 将会被跳过

submit()

  • 为 “submit” 事件绑定一个处理函数,或者触发元素上的 “submit” 事件。
  • 当参数function没有给出时,触发当前表单“submit”事件,并且执行默认的提交表单行为,除非阻止默认行为(e.preventDefault();)。