在移动端开发应用时，Zepto.js 被广泛应用。 Zepto.js 提供 jQuery 的类似的 API 但是体积远远小于 jQuery 。但是在使用过程中你可能会碰到一些问题，本文做了详细的总结，供你参考。

首先推荐一下 Zepto.js API 中文文档 (1.2.0)

问题1：判断当前对象是否是Zepto实例化对象的方法

在 jQuery 中，判断是不是 jQuery 实例化对象，直接用 instanceof 就行，即：

var a=$("body");
if(a instanceof jQuery){
    //...  
}

在 Zepto 中这样用是无效的，一般 Zepto 是如下来判断的即：

var a=$("body");
if(Zepto.zepto.isZ(a)){
    //...
}

问题2：Zepto 中不存在的方法

Zepto 并没有 100% 覆盖 jQuery，例如 nextAll(), prevAll() 这些方法在 Zepto 中不存在

问题3：Zepto.js 中的点透问题

案例如下：

<div id="css88">点头事件测试</div>

<a href="">www.css88.com</a>

div 是绝对定位的蒙层,并且 z-index 高于 a。而 a 标签是页面中的一个链接，我们给 div 绑定 tap 事件：

$('#css88').on('tap',function(){
  $('#css88').hide();
});

我们点击蒙层时 div 正常消失，但是当我们在 a 标签上点击蒙层时，发现 a 链接被触发，这就是所谓的点透事件。

原因：

touchstart 早于 touchend 早于 click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click 还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。

解决：

1. 尽量都使用 touch 事件来替换 click 事件。例如用 touchend 事件(推荐)。
2. 用fastclick，https://github.com/ftlabs/fastclick
3. 用preventDefault阻止a标签的click
4. 延迟一定的时间(300ms+)来处理事件 （不推荐）
5. 以上一般都能解决，实在不行就换成click事件。

下面介绍一下 touchend 事件，如下：

$("#css88").on("touchend", function (event) {
    event.preventDefault();
});

问题4：移动端点击300ms延迟

300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。

推荐两个js，一个是 fastclick，一个是 tap.js

问题5：Zepto 对象 不能自定义事件

例如执行：

$({}).bind('haorooms', function(){});

结果： TypeError: Object has no method ‘addEventListener’

解决办法是创建一个脱离文档流的节点作为事件对象： 例如：

$('').bind('haorooms', function(){});

问题6：Zepto 获取select元素的选中 option

获取select元素的选中 option ，可以用$(‘option[selected]’),但是不能用$(‘option:selected’)。

测试发现jQuery可以用 $(‘option:selected’) 获取选中的选项，但是zepto会报错！ 会报如下错误：

Uncaught DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘option:selected’ is not a valid selector.

但是获取有select中含有disabled属性的元素可以用 $(this).find(“option:not(:disabled)”) 因为disabled是标准属性

另外：zepto 在操作 Dom 的 selected 和 checked 属性时尽量使用 prop 方法

问题7：Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 ” or 单引号 ‘ 括起来

例如执行：

$('[data-userid=haorooms]')

结果：Error: SyntaxError: DOM Exception 12

解决办法：

$('[data-userid="haorooms]"') or $("[data-userid='haorooms']")

问题8：隐藏元素尺寸

Zepto.js: 无法获取宽高；jQuery: 可以获取。

问题9：innerWidth(), innerHeight(),outerWidth(),outerHeight()

Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()