全国咨询/投诉热线:400-618-4000

web前端开发培训之zepto和jquery的区别,zepto的不同使用小结

更新时间:2016年10月13日10时39分 来源:传智播客前端与移动开发学院 浏览次数:

1. Zepto 对象 不能自定义事件

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

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

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

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

web前端移动开发

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


  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 画了一个小三角形:


  1. <font color="rgb(85, 85, 85)"><font color="rgb(85, 85, 85)"><font size="3"><div class="caret"></div>   
  2. .caret {   
  3.   width: 0;   
  4.   height: 0;   
  5.   border-width: 0 20px 20px;   
  6.   border-color: transparent transparent blue;   
  7.   border-style: none dotted solid;   
  8. } </font></font></font>

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对象

现官网上each的定义
$.each(collection, function(index, item){ ... }) ⇒ collection
Iterate over array elements or object key-value pairs. Returning false from the iterator function stops the iteration.
可以便利数组和键值对了

5.Zepto 的animate 方法参数说明 :详情点击->

  zepto中animate的用法

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

  

7.DOM 操作区别

  jq代码:


  1. <font color="rgb(85, 85, 85)"><font color="rgb(85, 85, 85)"><font size="3">(function($) {
  2.   $(function() {
  3.     var $list = $('<ul><li>jQuery 插入</li></ul>', {
  4.       id: 'insert-by-jquery'
  5.     });
  6.     $list.appendTo($('body'));
  7.   });
  8. })(window.jQuery); </font></font></font>


jQuery 操作 ul 上的 id 不会被添加。

  zepto代码:


  1. <font color="rgb(85, 85, 85)"><font color="rgb(85, 85, 85)"><font size="3">Zepto(function($) {     
  2.   var $list = $('<ul><li>Zepto 插入</li></ul>', {   
  3.     id: 'insert-by-zepto'   
  4.   });   
  5.   $list.appendTo($('body'));   
  6. });   </font></font></font>



Zepto 可以在 ul 上添加 id 。

8.事件触发区别

  jq代码:


  1. <font color="rgb(85, 85, 85)"><font color="rgb(85, 85, 85)"><font size="3">(function($) {   
  2.   $(function() {      
  3.     $script = $('<script />', {   
  4.       src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js',   
  5.       id: 'ui-jquery'   
  6.     });   
  7.    
  8.     $script.appendTo($('body'));   
  9.    
  10.     $script.on('load', function() {   
  11.       console.log('jQ script loaded');   
  12.     });   
  13.   });   
  14. })(window.jQuery);   </font></font></font>


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

zepto代码:


  1. <font color="rgb(85, 85, 85)"><font color="rgb(85, 85, 85)"><font size="3">Zepto(function($) {     
  2.   $script = $('<script />', {   
  3.     src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',   
  4.     id: 'ui-zepto'   
  5.   });   
  6.    
  7.   $script.appendTo($('body'));   
  8.    
  9.   $script.on('load', function() {   
  10.     console.log('zepto script loaded');   
  11.   });   
  12. }); </font></font></font>

使用 Zepto 时 load 事件的处理函数会执行。




本文版权归传智播客web前端开发培训学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:传智播客web前端开发培训学院
首发:http://www.itcast.cn/web/

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额