zepto.js ——移动端轻量级类jQuery库

什么是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();）。