zepto和jquery的区别，zepto的不同使用8条小结

1.Zepto对象不能自定义事件例如执行：$({}).bind('cust',function(){});结果：TypeError:Objecthasnomethod'addEventListener'解决法是创建一个脱离文档流的节点作为事件对象：例如：$('').bind('cust',function(){});2.Zepto的选择器表达式:[name=value]中value必须用双引号"or单引号'括起来例如执行：$('[data-userid=123123123]')结果：Error:SyntaxError:DOMException12解决法：$('[data-userid="123123123]"')or$("[data-userid='123123123']")2-1.zepto的选择器没有法选出$("div[name!='abc']")的元素2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性应该使用$('option').not(function(){return!this.selected})比如：jq:$this.find('option[selected]').attr('data-v')*1zepto:$this.find('option').not(function(){return!this.selected}).attr('data-v')*1但是获取有select中含有disabled属性的元素可以用$this.find("option:not(:disabled)")因为disabled是标准属性2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法，以下是官方说明：3.Zepto是根据标准浏览器写的，所以对于节点尺寸的方法只提供width()和height()，省去了innerWidth(),innerHeight(),outerWidth(),outerHeight()Zepto.js:由盒模型（box-sizing）决定jQery:忽略盒模型，始终返回内容区域的宽/高（不包含padding、border）解决方式就是使用.css('width')而不是.width()。3-1.边框三角形宽高的获取假设用下面的HTML和CSS画了一个小三角形：.caret{width:0;height:0;border-width:020px20px;border-color:transparenttransparentblue;border-style:nonedottedsolid;}jQuery使用.width()和.css('width')都返回，高度也一样；Zepto使用.width()返回，使用.css('width')返回0px。所以，这种场景，jQuery使用.outerWidth()/.outerHeight()；Zepto使用.width()/.height()。3-2.offset()Zepto.js:返回top、left、width、heightjQuery:返回width、height3-3.隐藏元素Zepto.js:无法获取宽高；jQuery:可以获取。4.Zepto的each方法只能遍历数组，不能遍历JSON对象5.Zepto的animate方法参数说明：详情点击->zepto中animate的用法6.zepto的jsonpcallback函数名无法自定义7.DOM操作区别jq代码：(function($){$(function(){var$list=$('jQuery插入',{id:'insert-by-jquery'});$list.appendTo($('body'));});})(window.jQuery);jQuery操作ul上的id不会被添加。zepto代码：Zepto(function($){var$list=$('Zepto插入',{id:'insert-by-zepto'});$list.appendTo($('body'));});Zepto可以在ul上添加id。8.事件触发区别jq代码：(function($){$(function(){$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('jQscriptloaded');});});})(window.jQuery);使用jQuery时load事件的处理函数不会执行zepto代码：Zepto(function($){$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('zeptoscriptloaded');});});使用Zepto时load事件的处理函数会执行。