zepto与jquery的区别及zepto的不同使用8条小结


Posted in Javascript onJuly 28, 2016

首先是效果:

jquery中有fadeIn和fadeOut两个效果,用来实现渐隐渐显的效果,这个在PC端自然是常用的效果。然后我们前端组的组员Mr Huang自然是想到手机页面也可以更加炫丽,于是加上了登录框的渐隐效果。给用户缓冲的效果不错。

但是,zepto中并没有fadeIn和fadeOut,怎么办?难道真的就无法满足Mr Huang的愿望了吗?No. I will do it.在zepto中有个动画效果(animate),用这个效果来实现渐隐还是不错的。咱们引用中文文档中的说明 http://www.html-5.cn/Manual/Zepto/#animate 文档里面详细介绍了animate能实现的动画效果。当然animate也不是万能的,也有很多jquery能做的zepto无能为力的效果。当然,在这考虑到渐隐效果虽然漂亮,但是在安卓机器上面,由于性能的原因,经常出现卡顿的现象,而且由于某些ROM随便修改浏览器原生的效果,导致那些炫丽的动画看起来很别扭很畸形,博主在这和Mr Huang商量后决定弃用渐隐,直接隐藏的形式更加简洁明了。

诡异的ajax:

会用jquery的都知道$.ajax();这个方法,用来实现异步请求数据,使用想当频繁。当然,这在zepto中也是一个刚需的功能,而且zepto的使用方法跟jquery几乎是一模一样。咱们写个最简单的ajax.

$.ajax('test.php',{"data":[{"name":"systme","hacked":"systme"}]},function(){alert("ok")});

OK,就是这样一个简单的请求,php那边是直接dump出我传过去的数据。咱们来看一下出现了什么诡异的事件。

首先,jquery的请求。

zepto与jquery的区别及zepto的不同使用8条小结

咱们很清楚的看到传过去的是一个数组,那么我们把他写生数组形式应该是data[{"name":"systme","hacked":"systme"}]这样是完全没有问题的。

咱们再来看zepto的ajax请求。

zepto与jquery的区别及zepto的不同使用8条小结

,看一下,下标0没有了,下标0没有了意味着什么呢。我们来还原一下数组data[{"name":"systme"},{"hacked":"systme"}],没错,你真的没看错,zepto的ajax直接改变了原来的数组结构,zepto的ajax对数组的序列化存在问题导致解析数组出现问题。这个问题给我带来了很大的困扰,如果是因为这个问题让我重新使用jquery尚无必要,所以,博主在与后端攻城尸商讨之后决定我这直接传字符串到后端,由后端对字符串进行解析。至此,诡异的问题解决,但是这样的解决方式并不是完美的,还需要继续研究其源码的实现原理。

博主在这有一另外一种解决方案,咱们可以用纯js实现一个post请求,纯js的post请求不像$.ajax那么方便,在参数传递上面要使用&连接符,咱们这的参数实际上是 data[0][name]=systme&data[0][hacked]=systme 这个样子的,我们使用纯js的post传过去就OK了

1. Zepto 对象 不能自定义事件

例如执行: $({}).bind('cust', function(){});

结果: TypeError: Object has no method 'addEventListener'

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

例如: $('').bind('cust', function(){});

2. Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来

例如执行:$('[data-userid=123123123]')

结果:Error: SyntaxError: DOM Exception 12

解决办法:

$('[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') * 1

zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1

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

参考网址:https://github.com/madrobby/zepto/issues/503

2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法,以下是官方说明:

zepto与jquery的区别及zepto的不同使用8条小结

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

Zepto.js: 由盒模型( box-sizing )决定
jQuery: 忽略盒模型,始终返回内容区域的宽/高(不包含 padding 、 border )解决方式就是使用 .css('width') 而不是 .width() 。

3-1.边框三角形宽高的获取

假设用下面的 HTML 和 CSS 画了一个小三角形:

1.<div class="caret"></div> 
2..caret { 
3. width: 0; 
4. height: 0; 
5. border-width: 0 20px 20px; 
6. border-color: transparent transparent blue; 
7. border-style: none dotted solid; 
8.}

jQuery 使用 .width() 和 .css('width') 都返回 ,高度也一样;

Zepto 使用 .width() 返回 ,使用 .css('width') 返回 0px 。

所以,这种场景,jQuery 使用 .outerWidth() / .outerHeight() ;Zepto 使用 .width() / .height() 。

3-2.offset()

Zepto.js: 返回 top 、 left 、 width 、 height
jQuery: 返回 width 、 height

3-3.隐藏元素

Zepto.js: 无法获取宽高;

jQuery: 可以获取。

4.Zepto 的each 方法只能遍历 数组,不能遍历JSON对象

5.Zepto 的animate 方法参数说明 :详情点击->

zepto中animate的用法

6.zepto的jsonp callback函数名无法自定义

7.DOM 操作区别

jq代码:

1.(function($) { 
2. $(function() { 
3. var $list = $('<ul><li>jQuery 插入</li></ul>', { 
4. id: 'insert-by-jquery' 
5. }); 
6. $list.appendTo($('body')); 
7. }); 
8.})(window.jQuery);

jQuery 操作 ul 上的 id 不会被添加。

zepto代码:

1.Zepto(function($) { 
2. var $list = $('<ul><li>Zepto 插入</li></ul>', { 
3. id: 'insert-by-zepto' 
4. }); 
5. $list.appendTo($('body')); 
6.});

Zepto 可以在 ul 上添加 id 。

8.事件触发区别

jq代码:

1.(function($) { 
2. $(function() { 
3. $script = $('<script />', { 
4. src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js', 
5. id: 'ui-jquery' 
6. }); 
7. 
8. $script.appendTo($('body')); 
9. 
10. $script.on('load', function() { 
11. console.log('jQ script loaded'); 
12. }); 
13. }); 
14.})(window.jQuery);

使用 jQuery 时 load 事件的处理函数 不会 执行

zepto代码:

1.Zepto(function($) { 
2. $script = $('<script />', { 
3. src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js', 
4. id: 'ui-zepto' 
5. }); 
6. 
7. $script.appendTo($('body')); 
8. 
9. $script.on('load', function() { 
10. console.log('zepto script loaded'); 
11. }); 
12.});

使用 Zepto 时 load 事件的处理函数 会 执行。

Javascript 相关文章推荐
JS不间断向上滚动效果代码
Dec 25 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 #Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 #Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 #Javascript
轮播的简单实现方法
Jul 28 #Javascript
关于JS变量和作用域详解
Jul 28 #Javascript
jquery轮播的实现方式 附完整实例
Jul 28 #Javascript
AngularJS入门教程中SQL实例详解
Jul 27 #Javascript
You might like
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python实现归并排序算法
2018/11/22 Python
python实现简易淘宝购物
2019/11/22 Python
PyTorch中permute的用法详解
2019/12/30 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Java程序员面试题
2016/09/27 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
公务员年度考核评语
2014/12/31 职场文书
关于长城的导游词
2015/01/30 职场文书
导游词欢迎词
2015/02/02 职场文书
消费者投诉书范文
2015/07/02 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers