只是常用知识点总结，不说祖宗八代，若想详细了解，请入官网：http://zeptojs.com 或中文(推荐) http://www.runoob.com/manual/zeptojs.html
1、模块
polyfill，zepto，detect，event，ajax，form，fx 这7个就是zeptojs标准版包含的模块。
但有一些常用的模块功能并没有包含在内。如：
fx_methods 有了这个模块之后，.show() .hide() 等几个方法才能支持动画了，比如 .show('fast')
fx_methods 有了这个模块之后，.show() .hide() 等几个方法才能支持动画了，比如 .show('fast')
data 提供对 .data() 方法的完整支持，像 jQuery 一样用内存对象存储
assets 移除 img 元素后做一些特殊处理，用来清理内存
selector 更多的选择器的支持，后面会提到
touch 对触摸事件的支持，比如 tap 事件
这里有完整版的zeptojs可以下载 zepto.min.js
2、不要用 click 事件，用 tap 代替
这个估计已经广为人知了，因为 click 事件有 200~300 ms 的延迟，为了更快的响应，最好用 Zepto 提供的 tap 事件
不相信的话，可以用以下代码测试一下 zepto.min.js
var t1,t2;
$('#id').tap(function () {
t1 = Date.now();
});
$('#id').click(function () {
t2 = Date.now();
alert(t2 - t1);
});
3.Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()
jQuery 使用 .width() 和 .css('width') 都返回 ，高度也一样；
Zepto 使用 .width() 返回 ，使用 .css('width') 返回 0px 。
所以，这种场景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height() 。
而这在 jQuery 里面是没有问题的，因为 jQuery 针对这种元素，会先设置其 css 样式设置为position: "absolute", visibility: "hidden", display: "block"
4、zepto在操作dom的selected和checked属性时尽量使用prop方法，但注意大小写。
5、.offset()
Zepto.js: 返回 top 、 left 、 width 、 height
jQuery: 返回 width 、 height
6、隐藏元素
Zepto.js: 无法获取宽高；
jQuery: 可以获取。
7、zepto 的each 方法只能遍历 数组，不能遍历JSON对象。
8、zepto的jsonp callback函数名无法自定义。
9、Zepto 对象 不能自定义事件
例如执行： $({}).bind('cust', function(){});
结果： TypeError: Object has no method 'addEventListener'
解决办法是创建一个脱离文档流的节点作为事件对象：
例如： $('').bind('cust', function(){});
10、Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
例如执行：$('[data-userid=123123123]') 结果：Error: SyntaxError: DOM Exception 12
解决办法： $('[data-userid="123123123"]') or $("[data-userid='123123123']")
11、zepto的选择器没有办法选出 $("div[name!='abc']") 的元素。
12、zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性
应该使用$('option').not(function(){ return !this.selected })
比如：jq:$this.find('option[selected]').attr('data-v') * 1
zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1
但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性。
13、DOM 操作区别
jq代码：
(function($) {
$(function() {
var $list = $('<ul><li>jQuery 插入</li></ul>', {
id: 'insert-by-jquery'
});
$list.appendTo($('body'));
});
})(window.jQuery);
jQuery 操作 ul 上的 id 不会被添加。
Zepto(function($) {
var $list = $('<ul><li>Zepto 插入</li></ul>', {
id: 'insert-by-zepto'
});
$list.appendTo($('body'));
});
Zepto 可以在 ul 上添加 id 。
14、事件触发区别
jq代码：
(function($) {
$(function() {
$script = $('<script />', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js',
id: 'ui-jquery'
});
$script.appendTo($('body'));
$script.on('load', function() {
console.log('jQ script loaded');
});
});
})(window.jQuery);
使用 jQuery 时 load 事件的处理函数 不会 执行
zepto代码：
Zepto(function($) {
$script = $('<script />', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
id: 'ui-zepto'
});
$script.appendTo($('body'));
$script.on('load', function() {
console.log('zepto script loaded');
});
});
使用 Zepto 时 load 事件的处理函数 会 执行。
发表评论：