zepto和jquery的区别以及zepto的不同用法

首先是效果：

jquery中有fadeIn和fadeOut效果，用来实现淡入淡出效果，这在PC端自然是常见的效果。然后我们前端组的黄先生自然觉得手机页面可以更炫目，于是加了登录框的褪色效果。对用户的缓冲效果不错。

但是，在zepto中不存在fadeIn和fadeOut。我该怎么办？满足黄先生的愿望真的不可能吗？不，我会做的。泽普托有一个动画效果。利用这种效果实现掉色就不错了。让我们引用中文文档中的描述。动画可以实现的动画效果在http://www.html-5.cn/Manual/Zepto/#animate文档中有详细介绍。当然，animate也不是万能的，有很多效果jquery可以做到，但zepto做不到。当然，考虑到褪色效果比较美观，在安卓机器上，由于性能原因，经常会出现卡壳的现象，而且由于一些Roms随意修改浏览器的原生效果，那些眼花缭乱的动画看起来也比较尴尬和变形。博主和黄先生商量后决定放弃褪色，直接隐藏的形式更简洁明了。

奇怪的ajax:

任何会使用jquery的人都知道$。Ajax()；这种异步请求数据的方法经常被使用。当然，这也是zepto中的一个刚需函数，zepto的使用几乎与jquery相同。让我们编写最简单的ajax。

$.ajax('test.php '，{ ' data ' :[{ ' name ' : ' systme '，' hacked':'systme'}]}，function(){ alert(' ok ')})；OK就是这么简单的要求。php直接转储我传递的数据。让我们来看看发生了什么奇怪的事件。

首先，jquery的请求。

我们可以清楚地看到它是一个数组，所以我们应该以数据的形式来勾画它[{ ' name ' : ' systeme '，' hacked ' : ' systeme ' }]，这是完全没有问题的。

让我们再次看看zepto的ajax请求。

看一下，下标0没了，下标0没了意味着什么？让我们恢复阵列数据[{ ' name ' : ' systeme ' }，{ ' hacked ' : ' systeme ' }]。是的，你是对的。zepto的ajax直接改变了原来的数组结构。zepto的ajax在序列化数组时存在问题，这导致解析数组时出现问题。这个问题给我带来了很大的麻烦。如果这个问题让我没有必要重用jquery，那博主和后端攻城尸商量后决定直接将字符串发送到后端，后端会解析字符串。至此，这个奇怪的问题已经解决，但这个解决方案并不完美，需要继续研究其源代码的实现原理。

博主在这里有另一个解决方案。我们可以用纯js实现一个post请求。纯js的post请求不如$.ajax方便，参数传输应该使用连接器。这里的参数实际上是data[0][name]=syst me data[0][hacked]=syst me。如果我们使用纯js的帖子，我们会没事的。

1.Zepto对象无法自定义事件

例如：$({})。bind('cust '，function(){ })；

结果：类型错误：对象没有方法“添加事件侦听器”

解决方案是从文档流中创建一个节点作为事件对象：

例如：$(' ')。bind('cust '，function(){ })；

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

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

结果：错误：语法错误：异常12

解决方法：

$ ('[data-userid=' 123123123]' ')或$ ('[data-userid=' 123123']') 2-1。Zepto的选择器无法选择$('div[name！='abc']')

2-2.zepto不能使用类似于jq的方法$('option[selected]')来获取select元素的所选选项，因为所选属性不是css的标准属性

$(“选项”)。not (function () {return！this.selected })

比如：jq:美元这个。查找('选项[选定])。attr ('data-v') * 1

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

但是获取有挑选中含有有缺陷的属性的元素可以用这个。查找('选项：不可用(:已禁用)')因为有缺陷的是标准属性

参考网址：https://github。com/mad robby/zepto/issues/503

2-3、泽普托在操作数字正射影像图的挑选和检查属性时尽量使用支柱方法，以下是官方说明：

3.泽普托是根据标准浏览器写的，所以对于节点尺寸的方法只提供宽度()和高度(),省去了内宽(),内高(),外宽(),外高()

Zepto.js:由盒模型（盒子大小)决定jQuery:忽略盒模型，始终返回内容区域的宽/高（不包含填充、边框)解决方式就是使用css(')宽度)而不是。宽度().

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

假设用下面的超文本标记语言和半铸钢钢性铸铁(铸造半钢)画了一个小三角形：

1.div class='caret'/div 2.插入符号{ 3。宽度： 0;4.高度： 0;5.边框宽度： 0 20px 20px6.边框-颜色：透明透明蓝；7 .边框样式：无虚线实心；8.} jQuery使用。宽度()和css(')宽度)都返回，高度也一样；

泽普托使用。宽度()返回，使用css(')宽度)返回0px。

所以，这种场景，jQuery使用outwidth()/.outhealth()；泽普托使用宽度()/.高度().

3-2 .偏移量()

Zepto.js:返回顶部、左侧、宽度、高度jQuery:返回宽度、高度

3-3.隐藏元素

Zepto.js:无法获取宽高；

jQuery:可以获取。

4.泽普托的每个方法只能遍历数组，不能遍历JSON对象

5.泽普托的有生命的方法参数说明：详情点击-

泽普托中有生命的的用法

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

7.数字正射影像图操作区别

日本季刊日本季刊代码：

1.（函数($) { 2。$(function() { 3 .var $list=$('ullijQuery插入/li/ul '，{ 4 .id: "按jquery插入"5。});6.$列表。appendo($(“body”)；7.});8.})(窗口。jquery)；jQuery操作保险商实验所上的编号不会被添加。

泽普托代码：

1.Zepto(函数($) { 2。var $list=$('ulliZepto插入/li/ul '，{ 3 .id: "由泽普托插入"4。});5.$列表。appendo($(“body”)；6.});泽普托可以在保险商实验所上添加身份证。

8.事件触发区别

日本季刊日本季刊代码：

1.（函数($) { 2。$(函数(){ 3 .$ script=$(“script/”，{ 4 .src : ' http://cdn。亚马逊。org/amazeui/1。0 .1 js/amaze ui。量滴js '，5 .id: 'ui-jquery' 6 .});7.8.$脚本。appendo($(“body”)；9.10.$script.on('load '，function() { 11 .console.log('jQ脚本已加载');12.});13.});14.})(窗口。jquery)；使用jQuery时负荷事件的处理函数不会执行

泽普托代码：

1.Zepto(函数($) { 2。$ script=$(“script/”，{ 3 .src : ' http://cdn。亚马逊。org/amazeui/1。0 .1 js/amaze ui。js '，4 .id: 'ui-zepto' 5 .});6.7.$脚本。appendo($(“body”)；8.9.$script.on('load '，function() { 10 .console.log('zepto脚本已加载');11.});12.});使用泽普托时负荷事件的处理函数会执行。