Zepto和jQuery的具体差异

阅读量：6274 次

发布时间：2019-06-22

本文共 3814 字，大约阅读时间需要 12 分钟。

共同点

jQuery:

核心函数$

作为函数使用（参数）
1.function
2.html字符串
3.DOM code
4.选择器字符串

作为对象调用(方法)
$.ajax() $.get() $.post()
$.isArray()
$.each()
$.isFunction()
$.trim()
......

jQuery对象

概念：jQuery核心函数$()调用返回的对象就是jQuery对象的   数组（可能有只有一个）；   使用：   1.addClass()   2.removeClass()   3.show()   4.find()

### zepto:

以上jQuery的特性zepto同样适用

不同点

属性操作attr和prop

举例代码块：

html

script

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

在jQuery中

第一个console的输出结果是undefined，undefined，selected，undefined，selected第二个console的输出结果是4个false，1个true

- prop多用在标签的固有属性，布尔值属性。比如：a标签的href，class，selected等。

attr多用在自定义属性上。

在jQuery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined。（例如下拉选项中的selected属性）

在zepto中

第一个console的输出结果是false，false，selected，false，selected第二个console的输出结果是4个false，1个true

- 在zepto中用attr也可以获取布尔值属性.

prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop

坑！------zepto中removeProp()的方法。在zepto1.2版本以上才支持。

DOM操作

script代码块如下

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

在jQuery中

在插入DOM元素的时候，直接添加id,class等属性不会生效

在zepto中

在插入DOM元素的时候，直接添加id,class等属性可以生效

each方法（遍历）

script代码块

$(function(){    var arr = [1,'a',3,'b',5];    var obj = {name:'tom',age:13};    $.each(arr, function(index,item) {        console.log(index,item);    });    $.each(obj, function(key,value) {        console.log(key,value);    });    var str = 'abcdef';    $.each(str, function(index,item) {        console.log(index , item);    });})

在jQuery中

可以遍历数组,以index，item的形式，

可以遍历对象，以key-value的形式

不可以遍历字符串。

不可以遍历json字符串

在zepto中

可以遍历数组,以index，tiem的形式，

可以遍历对象，以key-value的形式，

可以遍历字符串。

offset()的区别

script代码块

$(function(){    var $offset = $('#box').offset();    console.log($offset);    console.log($offset.top);    console.log($offset.height);    console.log($offset.width);})

在jQuery中

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

获取width和height时输出的是undefined；

在zepto中

获得当前元素相对于视口的位;

返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)

width(),height()

script代码块

$(function(){    console.log($('#box').width());    console.log($('#box').height());    console.log($('#box').css('width'));    console.log($('#box').innerHeight());    console.log($('#box').outerHeight()+'outerHeight');})

在jQuery中

width(),height()---content内容区的宽高，没有单位px;

.css('width')----获取写在样式表中的的宽高，一般指content（怪异盒子除外），有单位px;

innerHeight(),innerWidth()---获取content+padding;

outerHeight(),outerWidth()---获取content+padding+border;

以上对于不可见盒子仍然生效;

在zepto中

width(),height()---content+padding+border的宽高，只对可见元素有效，没有单位px;

用.css('width')获取的是content的宽高。

zepto中没有innerWidth()和outerWidth();

注：上述所有获取方法中，只有.css()获取的值不是number类型，计算时需要转换类型。

事件委托

事件委托是指将事件委托给相同的祖先元素，可以给动态创建的新节点同时绑定上事件.

### 在script中为#box的子元素.a绑定cilik事件

方法一

$('#box').delegate('.a','click',function(){    alert('你点我干啥？');})

方法二

$('#box').on("click",'.a',function(){    alert('a事件');});

注用delegate绑定事件委托时，先写元素，再写事件；on与之相反
还有一种绑定方法live, 在js1.7之后的版本已经废除

在zepto中

zepto的官网表示已经废除了live，delegate等。委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。在zepto中事件委托有个BUG，前提是必须满足下面四个条件，需要注意！！！！！1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)2、同一个事件3、委托关联  操作的类要进行关联4、绑定顺序---从当前的位置往后看