Zepto的学习（1）与jQuery的一些区别

写bug的小气球

于 2019-12-24 20:01:26 发布

阅读量119

点赞数

分类专栏： zepto 自学前端 web前端文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_46013619/article/details/103688396

版权

自学前端同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

web前端

36 篇文章 0 订阅

订阅专栏

zepto

3 篇文章 0 订阅

订阅专栏

1.attr和prop

jQ中
在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined
zepto中
在zepto中用attr也可以获取布尔值属性.
prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop

2.DOM操作

jQ中
jquery中插入DOM元素的时候添加配置对象（属性选择器：id，class。。。)的时候不会显示；

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

zepto中
插入DOM元素的时候添加配置对象的时候可以添加进去，并且添加的配置对象的内容会直接反应在标签属性内，且可以操作，影响对应的DOM元素。

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

3.each方法

jQ中

 $(function(){
      //$.each(collection, function(index, item){ ... })
      //可以遍历数组,以index，item的形式，
      //可以遍历对象，以key-value的形式
      //不可以遍历字符串。
      //不可以遍历json字符串
      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 = 'adfdfdf';
      $.each(str,function(index){
        console.log(index);
      })
    })

zepto中

$(function(){
    //$.each(collection, function(index, item){ ... })
    //可以遍历数组,以index，tiem的形式，
    //可以遍历对象，以key-value的形式，
    //可以遍历字符串。
    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';
    //可以遍历字符串，同对数组的遍历方法一样以index-item的形式。
    $.each(str, function(index,item) {
      console.log(index + '-' + item);
    });
  })

在这里插入图片描述

4.offset()的区别

jQ中
1、获取匹配元素在当前视口的相对偏移。
2、返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

$(function(){
    var $offset = $('#box').offset();
    console.log($offset);
    console.log($offset.top);
    //获取width，height时为undefined
    console.log($offset.width);
  })

zepto中

offset()
1、获得当前元素相对于视口的位置。
2、返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)

<style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      width: 200px;
      height: 200px;
      position: relative;
      left: 50px;
      top: 50px;
      font-size: 22px;
      background: #FF0000;
      text-align: center;
      line-height: 200px;
      padding: 200px;
    }
  </style>
</head>
<body>
  <!--
    * offset()
    1、获得当前元素相对于视口的位置。
    2、返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)
  -->
  <div id="box">新年快乐，大吉大利</div>
  <script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function(){
      var $offset = $('#box').offset();
      console.log($offset);
      console.log($offset.left);
      console.log($offset.width);
    })
  </script>

在这里插入图片描述

5.width(),height()

jQ中
jquery获取宽高的方法
1、width(),height()—content内容区的宽高，没有单位px;
2、.css(‘width’)----可以获取content内容区的宽高，padding，border的值，有单位px;
3、innerHeight(),innerWidth()—outerHeight(),outerWidth()来获取

$(function(){
    //jquery中width(),height(),[无单位]
    // .css()返回的始终是content区域的宽高[有单位]
    console.log($('#box').width());
    console.log($('#box').height());
    console.log($('#box').css('width'));
    //可以通过css（）获取padding，border的值
    console.log($('#box').css('padding'));
    console.log($('#box').css('border-width'));
    //也可以利用innerHeight(),outerHeight(),innerWidth(),outerWidth()等来获取padding和border的值
    console.log($('#box').innerHeight());//包含了padding
    console.log($('#box').outerHeight()+'outerHeight');//padding和border  这两个都没单位
  })

zepto中

 //zepto用width(),height()是根据盒模型决定的，并且不包含单位PX
      //包含padding的值,border的值
      //zepto中没有innerHeight(),innerWidth()---outerHeight(),outerWidth()
      console.log($('#box').width());
      console.log($('#box').height());
      //用.css('width')获取的是content的宽高。
      console.log($('#box').css('width'));
      //* 单独获取padding，border的值
      console.log($('#box').css('padding'));
      console.log($('#box').css('border-width')+'border');
    })

6.事件委托（尽量用on，少用delegate）

jQ中

$(function(){
    console.log($('.a').length);
    //1.7以后已经不 支持live了。
//				$('#a').live('click',function(){
//					alert('a');
//				})
//				$('#box').delegate('.a','click',function(){
//					alert('delegate');
//				})
    //在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。
    //原理：冒泡
    //委托给父级
    //this是自己   .a
    $('#box').on("click",'.a',function(){
      alert('a事件');
      $(this).removeClass('a').addClass('b');
    });
    $('#box').on("click" ,'.b',function(){
      alert('b事件');
      $(this).removeClass('b').addClass('a');
    });
    $('#box').append('<div class="a" style="font-size: 30px;">我是新添加的div</div>')
  })

zepto中
这里面其他的倒是一样，有一种特殊情况例外，
这里出现了一种例外情况，点击a，b也被触发了，但是a没有变化，

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>zepto_事件委托</title>
  <style type="text/css">
    #box{
      width: 400px;
      background: green;
    }
    .a{
      width: 200px;
      height: 200px;
      background: #FF0000;
    }
    .b{
      width: 100px;
      height: 100px;
      background: #F0f;
    }
  </style>
</head>
<body>
  <div id="box">
    <div class="a">a 的事件委托</div>
    <br />
    <br />
    <br />
    <div class="b">b的事件委托</div>
    <br />
    <br />
    <br />
    <div id="a">#a的事件委托</div>
    <p>Click me!</p>
  </div>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function(){
    //在zepto的官网表示已经废除了live，delegate等。
//				$('.a').live('click',function(){
//					alert('a')
//				})
    //* 坑！！！！
    /*
    * ---在zepto中事件委托 同时满足这样才会
    委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。
    1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
    2、同一个事件
    3、委托关联  操作的类要进行关联
    4、绑定顺序---从当前的位置往后看
    */
    $('#box').on("click",'.a',function(){
      alert('a事件');
      $(this).removeClass('a').addClass('b');
    });

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


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


  })
</script>
</body>
</html>

7.隐藏元素高度

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

这里补充了一下问题，这里还是有疑惑，具体情况具体分析吧，用多了就好了，这里就不深如研究了

clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

写bug的小气球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Zepto的学习（1）与jQuery的一些区别

1.attr和propjQ中在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefinedzepto中在zepto中用attr也可以获取布尔值属性.prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop2.DOM操作jQ中jquery中插入DOM元素的时候添加配置对象（属性选择器：id，class。。。)的时候...
复制链接

扫一扫