zepto和jquery-CSDN博客

jQuery的定义

jQuery是一个JavaScript函数库,运行快,效率高,其中最鲜明的特点是写得少,做得多,还为我们提供了丰富的插件;jQuery库包含以下功能:HTML元素选取,HTML元素操作,CSS操作,HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改,AJAX

zepto的定义

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,它与jquery有着类似的api;如果会用jquery,那也会用zepto;Zepto的设计目的是提供jQuery类似的API,但并不是100%覆盖jQuery;Zepto设计的目的是有一个5-10k的通用库,下载并快速执行,有一个熟悉通用的API,所以你能把主要精力放到应用开发上,Zepto是一款开源软件

相同点

Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小;Zepto最大的优势是它的文件大小,只有8k多,是目前功能完备的库中最小的一个,尽管不大,Zepto所提供的工具足以满足开发程序的需要;大多数在jQuery中常用的API和方法Zepto都有,Zepto中比jQuery多出来了一些触摸屏的事件;另外,因为Zepto的API大部分都能和jQuery兼容,所以用起来极其容易,如果熟悉jQuery,就能很容易掌握Zepto;可用同样的方式重用jQuery中的很多方法,也可以方便地把方法串在一起得到更简洁的代码,甚至不用看它的文档

不同点

针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件/swipe事件),Zepto是不支持IE浏览器的,这不是Zepto的开发者Thomas Fucks在跨浏览器问题上犯了迷糊,而是经过了认真考虑后为了降低文件大小而做的决定,就像jQuery团队在2.0版中不再支持旧版的IE(6 7 8)一样,因为Zepto使用jQuery句法,所以它在文档中建议把jQuery作为IE上的后备库,那样程序仍能在IE中,而其他浏览器则能享受到Zepto在文件大小上的优势,然而它们两个的API不是完全兼容的,所以使用这种方法时一定要小心,并要做充分的测试

事件委托的区别

zepto中,选择器上所有的委托事件都依次放入到一个队列中,而在jquery中则委托成独立的多个事件

var $doc = $(document);
$doc.on('click', '.a', function () {
  alert('a事件');
  $(this).removeClass('a').addClass('b');
});
$doc.on('click', '.b', function () {
  alert('b事件');
});

在Zepto中,a被点击后依次弹出了内容为"a事件"和"b事件",说明虽然事件委托在a上可是却也触发了b上的委托;但是在jQuery中只会触发a上面的委托弹出"a事件";Zepto中,document上所有的click委托事件都依次放入到一个队列中,点击的时候先看当前元素是不是a,符合则执行,然后查看是不是b,符合则执行;而在jQuery中,document上委托了2个click事件,点击后通过选择符进行匹配,执行相应元素的委托事件

extend()

jQuery有原型定义extend方法,在原型上拓展方法使用的方式是：

(function($) {
    $.fn.extend({
        sayHello: function() {
            $(this).html('Hello !');
        }
    });
})(window.jQuery);

Zepto中并没有原型定义extend方法,所以如果要是要在Zepto的原型上拓展方法可以使用的方式是:

Zepto(function($) {
    sayHello: function() {
        $(this).html('Hello !');
    }
});

Zepto在操作dom的selected和checked属性时尽量使用prop方法,在读取属性值的情况下优先于attr,Zepto获取select元素的选中option不能用类似jQuery的方法$('option[selected]'),因为selected属性不是css的标准属性,应该使用$('option').not(function(){ return !this.selected })

Zepto对象不能自定义事件

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

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

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

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

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

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

结果:Error:SyntaxError: DOM Exception 12

解决办法:$('[data-userid="123123123"]') or $("[data-userid='123123123']")

zepto的选择器没有办法选出$("div[name!='abc']")的元素

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是标准属性

zepto在操作dom的selected和checked属性时尽量使用prop方法

zepto的官方说明:zepto在读取属性值的情况下优先于attr,因为这些属性值会因为用户的交互发生改变,如checked 和 selected

width()和height()

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

Zepto.js:由盒模型(box-sizing)决定,用.width()返回赋值的width,用.css('width')返回加border等的结果

jQery:忽略盒模型,始终返回内容区域的宽/高(不包含padding/border)

解决方式就是使用.css('width')而不是.width()

边框三角形宽高的获取

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

<div class="caret"></div>
<style>
.caret {  
  width: 0;height: 0;border-width: 0 20px 20px;border-color: transparent transparent blue;border-style: none dotted solid;  
}
</style>

jQuery用.width()/.css('width')都返回0,高度也一样;Zepto用.css('width')返回0;所以这种场景,jQuery用.outerWidth()/.outerHeight(),Zepto用.width()/.height()

offset()

Zepto.js:返回{top,left,width,height},jQuery:返回{width,height}

3-3.隐藏元素

Zepto.js:无法获取隐藏元素宽高;jQuery:可以获取

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

Zepto的animate方法参数说明

jquery中有fadeIn和fadeOut两个效果用来实现渐隐渐显的效果,这个在PC端自然是常用的效果;但是zepto中并没有fadeIn和fadeOut,但是在zepto中有个动画效果(animate)可以实现渐隐

<script>
$("#some_element").animate({
  opacity: 0.25, 
  left: '50px',
  color: '#abcdef', 
  translate3d: '0,10px,0'  
}, 500, 'ease-out')
</script>
<pre name="code" class="html">

会发现zepto的complete会先执行,再执行animate动画,所以回调函数应该写在后面,
如:

$('.warter').animate({
  margin:'150px 0 0 -80px',
  opacity:'1',rotate:'-45deg'
},800,'ease-in-out',function(){
  alert(1);
});

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

DOM操作区别

(function($){
  $(function(){
    var $insert = $('<p>jQuery插入</p>',{
      id:'insert-by-jquery'
    });
    $insert.appendTo($('body'));
  });
})(window.jQuery); // <p>jQuery插入<p>
Zepto(function($){
  var $insert = $('<p>Zepto插入</p>', {
    id: 'insert-by-zepto'
  });
  $insert.appendTo($('body'));
}); // <p id="insert-by-zepto">Zepto插入</p>

Dom操作的区别:添加id时jQuery不会生效而Zepto会生效

事件触发区别

(function($){
  $(function(){   
    $script = $('<script />',{
      src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
      id: 'ui-jquery'
    });
    $script.appendTo($('body'));
    $script.on('load', function(){
      console.log('jQ script loaded');
    });
  });
})(window.jQuery);

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');
  });
});

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

zepto阻止事件冒泡

zepto的slideUP和slidedown事件到底部才能触发

document.addEventListener('touchmove', function (event) {  
event.preventDefault();  
}, false);

诡异的ajax

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

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

就是这样一个简单的请求,咱们来看一下出现了什么诡异的事件

jquery的请求:

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

再来看zepto的ajax请求

下标0没有了,意味着什么呢;我们来还原一下数组data[{"name":"systme"},{"hacked":"systme"}],没错,zepto的ajax直接改变了原来的数组结构,zepto的ajax对数组的序列化存在问题导致解析数组出现问题,这个问题给我带来了很大的困扰

解决方案一:前端直接传字符串到后端,由后端对字符串进行解析,但是这样的解决方式并不是完美的,还需要继续研究其源码的实现原理

解决方案二:用纯js实现一个post请求,纯js的post请求不像$.ajax那么方便,在参数传递上面要使用&连接符,参数实际上是data0=systme&data0=systme这个样子的,使用纯js的post传过去就OK了

Zepto不支持的选择器:

基本伪类:first / :not(selector) / :even / :odd / :eq(index) / :gt(index) / :lang 1.9+ / :last / :lt(index) / :header / :animated / :focus 1.6+ /:root 1.9+
/ :target 1.9+

内容伪类: :contains(text) / :empty / :has(selector) /:parent

可见性伪类: :hidden / :visible

属性选择器: [attribute!=value]

表单伪类: :input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :hidden

表单对象属性: :selected

感悟：没有什么是时间改变不了的