jQuery 和Zepto 之间的区别

Zepto 与jQuery 中有很多 API 的用法是相似的，它们都有相同的两把利器，jQuery核心函数$(xxx)、 $.xxx()，jQuery核心对象 $obj.xxx()，他们的用法都大致相同。今天主要来讲讲他们的一些区别

不同点

1、attr和prop方法

在jQuery中prop多用在标签的固有属性，布尔值属性，而attr多用在自定义属性上。如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined

<select>
<option value="name">a</option> 
<option value="name" selected="selected">b</option>
</select>
           

$('option').each(function (index, item) {
  console.log($(this).attr('selected'));
  });
           

undefined
selected
           

在zepto中用attr可以获取到布尔值属性，但是prop在读取属性的时候优先级高于attr，所以布尔值属性的读取还是建议用prop

false
selected
           

2、DOM操作

jquery中插入DOM元素的时候添加配置对象（属性选择器：id，class…)的时候不会生效，Zepto可以生效

var $insert = $('<p>我是新添加的p标签</p>', {
    id:'insert',
    class:'insert'
});
$('#box').append($insert)
});
           

3、each( ) 遍历数组、对象、字符串

jquery中不可以遍历字符串/json字符串，Zepto可以

var str = 'abc';
$.each(str, function(index,item) {
console.log(index + '-' + item);
});
           

0 - a
1 - b
2 - c
           

4、offset( ) 获取匹配元素在当前视口的相对偏移

jquery返回的对象包含top，left

Zepto返回的对象包含top，left，width和height(获取的宽高是盒模型可见区域的宽高)

var $offset = $('#box').offset();
console.log($offset.top,$offset.left);
console.log($offset.width,$offset.height);//jQuery中获取width，height时为undefined
           

5、width( )、height( ) 获取元素宽高

jquery获取宽高

1、width(),height()—content内容区的宽高

2、.css(‘width’)—可以获取content内容区的宽高或padding，border的值

3、innerHeight(),innerWidth()—内容区+padding宽高

4、outerHeight(),outerWidth()—来获取盒模型可见区域的宽高

console.log($('#box').width());//内容区宽、没有单位px
console.log($('#box').css('width'))//内容区宽、有单位px
console.log($('#box').innerWidth();//内容区+padding宽、没有单位px
console.log($('#box').outerWidth());//可见区域的宽、没有单位px
           

zepto获取宽高

1、width(),height()—盒模型可见区域的宽高

2、.css(‘width’)—可以获取content内容区的宽高或padding，border的值

3、zepto中没有innerHeight(),innerWidth()，outerHeight(),outerWidth()

console.log($('#box').width());//可见区域的宽、没有单位px
console.log($('#box').css('width'));//内容区宽、有单位px
           

6、隐藏的元素获取宽高

jquery可以获取隐藏元素的宽高，zepto无法获取

#box{
  display: none;
  width: 200px;
  height: 200px;
}
           

7、事件触发的区别

jquery中load事件的处理函数不会执行；zepto会执行。

var $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('jQuery');
});
           

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

8、事件委托的区别

在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行

<div id="box">
<div class="a">a的事件委托</div>
<div class="b">b的事件委托</div>
</div>
           

//点击a的div后，触发a回调函数，弹出“a事件”框后，将a的class移除，并且添加了b的class，渲染了b的样式
$('#box').on("click",'.a',function(){
    alert('a事件');
    $(this).removeClass('a').addClass('b');//this是触发事件的DOM对象
});
//点击b的div后，触发b回调函数，弹出“b事件”框后，将b的class移除，并且添加了a的class，渲染了a的样式
$('#box').on("click",'.b',function(){
    alert('b事件');
    $(this).removeClass('b').addClass('a');
});
           

在zepto中事件委托，委托的事件先被依次（按照代码解析的顺序）放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。

//点击a的div后，触发a回调函数，弹出“a事件”框后，将a的class移除，并且添加了b的class，没有来得及渲染就接着触发了队列里的b事件，并且弹出“b事件”框后，将为b的class移除，并且添加了a的class，渲染了a的样式（没有变化）
$('#box').on("click",'.a',function(){
   alert('a事件');
   $(this).removeClass('a').addClass('b');
});
//点击b的div后，触发b回调函数，弹出“b事件”框后，将b的class移除，并且添加了a的class，渲染了a的样式（后面队列里没有a事件）
$('#box').on("click",'.b',function(){
   alert('b事件');
   $(this).removeClass('b').addClass('a');
});
           

这些是jQuery与Zepto 的一部分区别，后面有时间会帮大家继续总结！！！