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修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
Element Input组件分析小结
2018/10/11 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python抓取百度首页的方法
2015/05/19 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
django中forms组件的使用与注意
2019/07/08 Python
python从PDF中提取数据的示例
2020/10/30 Python
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
小学中队委竞选稿
2015/11/20 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL