zepto和jquery的区别，zepto的不同使用8条小结

Posted 2023-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zepto和jquery的区别，zepto的不同使用8条小结相关的知识，希望对你有一定的参考价值。

总体介绍：Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小。

Zepto优点：

（1）、Zepto最大的优势是它的文件大小，只有8k多，是目前功能完备的库中最小的一个，尽管不大，Zepto所提供的工具足以满足开发程序的需要。

（2）、Zepto的API大部分都能和jQuery兼容，所以用起来极其容易，如果熟悉jQuery，就能很容易掌握Zepto。你可用同样的方式重用jQuery中的很多方法，也可以方面地把方法串在一起得到更简洁的代码，甚至不用看它的文档。

Zepto和jQuery的不同之处：

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

（2）、操作的区别：添加id时jQuery不会生效而Zepto会生效。

（3）、事件触发的区别：使用 jQuery 时 load 事件的处理函数不会执行；使用 Zepto 时 load 事件的处理函数会执行。

（4）、width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css('width')返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。

（5）、offset()的区别：Zepto返回top,left,width,height；jQuery返回width,height。

（6）、,Zepto无法获取隐藏元素宽高，jQuery 可以。

（7）、Zepto中没有为原型定义extend方法而jQuery有。

（8）、Zepto 的each 方法只能遍历数组，不能遍历JSON对象。

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

参考技术A 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方法，以下是官方说明：

3.Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()
Zepto.js: 由盒模型（ box-sizing ）决定
jQery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding 、 border ）解决方式就是使用 .css('width') 而不是 .width() 。

3-1.边框三角形宽高的获取
假设用下面的 html 和 CSS 画了一个小三角形：

[html] view plain copy print?
<div class="caret"></div>
.caret
width: 0;
height: 0;
border-width: 0 20px 20px;
border-color: transparent transparent blue;
border-style: none dotted solid;

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代码：
[html] view plain copy print?
(function($)
$(function()
var $list = $('<ul><li>jQuery 插入</li></ul>',
id: 'insert-by-jquery'
);
$list.appendTo($('body'));
);
)(window.jQuery);
jQuery 操作 ul 上的 id 不会被添加。

zepto代码：
[html] view plain copy print?
Zepto(function($)
var $list = $('<ul><li>Zepto 插入</li></ul>',
id: 'insert-by-zepto'
);
$list.appendTo($('body'));
);
Zepto 可以在 ul 上添加 id 。

8.事件触发区别
jq代码：
[html] view plain copy print?
(function($)
$(function()
$script = $('<script />',
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js',
id: 'ui-jquery'
);

$script.appendTo($('body'));

$script.on('load', function()
console.log('jQ script loaded');
);
);
)(window.jQuery);
使用 jQuery 时 load 事件的处理函数不会执行

zepto代码：
[html] view plain copy print?
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');
);
);
使用 Zepto 时 load 事件的处理函数会执行。参考技术B 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方法，以下是官方说明：

3.Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()
Zepto.js: 由盒模型（ box-sizing ）决定
jQery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding 、 border ）解决方式就是使用 .css('width') 而不是 .width() 。

3-1.边框三角形宽高的获取
假设用下面的 HTML 和 CSS 画了一个小三角形：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<div class="caret"></div>
.caret
width: 0;
height: 0;
border-width: 0 20px 20px;
border-color: transparent transparent blue;
border-style: none dotted solid;

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代码：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
(function($)
$(function()
var $list = $('<ul><li>jQuery 插入</li></ul>',
id: 'insert-by-jquery'
);
$list.appendTo($('body'));
);
)(window.jQuery);
jQuery 操作 ul 上的 id 不会被添加。
zepto代码：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
Zepto(function($)
var $list = $('<ul><li>Zepto 插入</li></ul>',
id: 'insert-by-zepto'
);
$list.appendTo($('body'));
);
Zepto 可以在 ul 上添加 id 。

8.事件触发区别
jq代码：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
(function($)
$(function()
$script = $('<script />',
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js',
id: 'ui-jquery'
);

$script.appendTo($('body'));

$script.on('load', function()
console.log('jQ script loaded');
);
);
)(window.jQuery);
使用 jQuery 时 load 事件的处理函数不会执行
zepto代码：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
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');
);
);
使用 Zepto 时 load 事件的处理函数会执行。

复习 | 重温jQuery和Zepto的API

　　jq和zepto很相似有许多共同的api，zepto也出了很多与jq不一样的api，总的来说，两者更相似，但是zepto更轻量一点，正好公司也在用，复习这两个没错

　　jq中的zepto的事件和ajax我没有整理，因为之前有专门的文章去详细的写了ajax和事件绑定的区别

　　再学ajax--第一天

　　再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销

　　JS进阶 | 分析JS中的异步操作

　　面试 | 蚂蚁金服面试经历也讲到了js中的绑定事件的区别bind、on、delegate，以及事件绑定事件委托的区别等

　　jquery复习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style >
  *{
    margin:0;
    padding: 0;
  }
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  /* jQuery([selector,[context]]) */
  console.log($(\'div>p\'));
  $(document.body).css("background","black");
  // 在文档的第一个表单中，查找所有的单选按钮
  console.log($(\'input:radio\',document.forms[0]))
  /*jQuery(html,[ownerDocument])*/
  $(function(){
    $(\'<div>hello world</div>\').appendTo(\'.test\');
    // 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中
    $(\'<div>\',{
      "class":"test_valid",
      text:"click me",
      click:function(){
        $(this).toggleClass("test2");
      }
    }).appendTo(".test")
    // 创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
    $(\'<input>\',{
      type:\'text\',
      val:"text",
      focusin:function(){
        // alert("focusin");
      },
      focusout:function(){
        // alert("focusout");
      }
    }).appendTo(".test");
  })
    /* jQuery(callback)*/
    $(function(){
      // do something
      // 等价于$(document).ready()
    })
    /* jQuery.holdReady(hold) */
    // 延迟就绪事件，直到已加载的插件。
    // $.holdReady(true);
    // $.getScript("plugin.js",function(){
    //   $.holdReady(false)
    // })
    /* each(callback) */
     $(function(){
       $(\'.test > span\').each(function(i){
         // console.log(this);
         // console.log($(this));
         this.innerHTML="span"+i;
         // $(this).toggleClass("span"+i);
         // $(this).text("hello");
         // 跳出遍历
         // return false;
       })
     })
    /* size() */
    // jQuery 对象中元素的个数
    console.log($("div").size());
    console.log($(\'div\').length);
    /* selector、context 、get([index]) 、index([selector|element]) */
    $(function(){
      $("ul")
      // 返回传给jQuery()的原始选择器
        .append("<li>"+$(\'ul\').selector+"</li>")
      // 返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。那么context指向当前的文档(document)。
        console.log($(\'ul\').context)
        console.log($(\'ul\',document.body).context)
        console.log($(\'.innerTest>span\').get(0));
        // 选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。
        console.log($(\'.innerTest>span\').get().reverse());
        //传递一个DOM对象，返回这个对象在原先集合中的索引位置
        console.log($(\'.innerTest>span\').index(document.getElementById(\'bar\')));
        //传递一个jQuery对象
        console.log($(\'.innerTest>span\').index($(\'#bar\')));
        //传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
        console.log($(\'.innerTest>span\').index($(\'.innerTest>span:nth-child(2)\')));
    })
    /*数据缓存data*/
    $(function(){
      // 没什么卵用
      $(\'.data\').data("div-data","data");
    })
    /*queue(element,[queueName])*/
    $(function(){
      $("#show").on(\'click\',function(){
        var n = $(".queue").queue("fx");
        // 显示在匹配元素上执行的函数队列的个数
        console.log(n.length);
      })
      function resuIt(){
        $(\'.queue\').show("slow");
        $(\'.queue\').animate({left:"+=200"},2000);
        $(\'.queue\').slideToggle(1000);
      }
      resuIt()
    })
    /*queue(element,[queueName]) jQuery.extend(object)*/
    $(function(){
      // 给选择器提供新方法
      jQuery.fn.extend({
        check:function(){
          return this.each(function(){this.checked=true})
        },
        uncheck:function(){
          return this.each(function(){this.checked=false})
        }
      })
      // 扩展jQuery对象本身
      jQuery.extend({
        min:function(a,b){return a<b?a:b},
        max:function(a,b){return a>b?a:b}
      })
      $(".innerTest>input[type=checkbox]").check();
      $(".innerTest>input[type=radio]").uncheck();
      console.log(jQuery.min(1,2));
      console.log(jQuery.max(3,4));
    })
    /*属性相关*/
    $(function(){
      // attr
      console.log($(\'.innerTest>input\').eq(1).attr(\'type\'))
      $(\'.innerTest>span\').eq(2).attr({class:"innerSpan","data-span":"innerSpan"})
      // class的值为innerHTML的值
      $(\'.innerTest>span\').eq(2).attr("class",function(){return this.innerHTML})

      // removeAttr
      $(\'.innerTest>span\').eq(0).removeAttr("class");
      // prop 获取在匹配的元素集中的第一个元素的属性值。
      console.log($(".innerTest>input[type=\'checkbox").prop(\'checked\'));
      // 禁用所有checkbox
      $(".innerTest>input[type=\'checkbox\']").prop(\'checked\',function(i,val){
          return !val;
      })
      // addClass
      $(".innerTest>span:nth-child(5)").addClass("span5 span_5")
      // 加上不同的class
      $(".innerTest>span").addClass(function(){
        return "span_"+$(this).index();
      })
      // removeClass
      $(".innerTest>span").eq(0).removeClass(\'span_0\');
      // 删除最后一个元素与上面重复的class
      $(".innerTest>span:last").removeClass(function(){
        return $(this).prev().attr(\'class\');
      })
      // toggleClass 如果存在（不存在）就删除（添加）一个类。
      // 点击三下添加一个类
      let count = 1;
      $(\'.innerTest>span\').eq(5).on(\'click\',function(){
        $(this).toggleClass("highlight",count ++ % 3==0)
      })
      // 根据父元素添加类
      $(\'.innerTest>span\').eq(5).toggleClass(function(){
        if($(this).parent().is(".innerTest")){
          return "span_6"
        }
      })
      // html和text
      $(".innerTest>pzepto和jquery的区别，zepto的不同使用8条小结
 zepto和jquery的区别，zepto的不同使用8条小结
 zepto和jquery的区别
 zepto事件
 Zepto 和 jQuery 2 有啥区别？
 zepto和jquery的区别