Zepto-helloworld-Zepto与jQuery的不同

最新推荐文章于 2024-07-07 17:02:21 发布

轻小說控

最新推荐文章于 2024-07-07 17:02:21 发布

阅读量305

点赞数

分类专栏：前端 Zepto 文章标签： Zepto-helloworld-Zepto与jQuery的不同

本文链接：https://blog.csdn.net/Aqours/article/details/100855049

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Zepto

2 篇文章 0 订阅

订阅专栏

Zepto

HelloWorld

什么是zepto.js
概念：移动端开发框架；API及语句同jQuery相似，但文件更小(可压缩至8KB)。
是目前功能完备的库中，最小的一个
zepto.js特点
1、针对的是移动端
2、轻量级，压缩版本只有8KB
3、语法大部分同jQuery一样，学习成本低，上手快。
4、响应，执行快。
5、同jQuery一样都是以$为核心函数。

Zepto_与jQuery不同的API

attr和prop

<select style="font-size:25px;">
  <option value="">科比</option>
  <option value="">韦德</option>
  <option value="" selected="selected">邓肯</option>
  <option value="">吉诺比利</option>
  <option value="" selected="selected">艾弗森</option>
</select>

jQuery

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

2、attr多用在自定义属性上。

3、jquery中用attr获取布尔值属性且布尔值属性在标签体内没有定义的时候会得到 undefined；
```
$(function () {
  $('option').each(function (index,item) {
      //console.log($(this).attr('selected'));//2undefined selected undefined selected
      console.log($(this).prop('selected'));//4false true
  })
})
```

Zepto

在zepto中用attr也可以获取布尔值属性;
prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop;
坑！------zepto中 removeProp()的方法。在1.2+版本才支持。

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

DOM操作

jQuery

jquery中插入DOM元素的时候添加配置对象(比如：id，class等。。。)不起作用。

style type="text/css">
      #insert{
          background: #ffff00;
      }
 </style>
<script type="text/javascript">
$(function () {
  var $p=$('<p>我是新添加的元素',{
    id: 'insert'
  });//添加配置对象(插入一个元素并添加各个属性) 这个在jQuery中不行
  $('#box').append($p);
})
</script>

Zepto

插入DOM元素的时候添加配置对象（id，class等。。）的时候可以添加进去，并且会直接显示在标签属性内，可以操作，影响DOM元素。

$(function () {
  var $p=$('<p>我是新添加的元素',{
    id: 'insert',
    class:'insert'
  });//添加配置对象(插入一个元素并添加各个属性) 这个在jQuery中不行
  $('#box').append($p);
})

each方法

jQuery

$.each(collection, function(index, item){ … })
可以遍历数组,以index，item的形式，
可以遍历对象，以key-value的形式
不可以遍历字符串。也就是不能遍历json的对象

$(function () {
  var arr=[12,3,4,5];
  $.each(arr,function (index,item) {
    console.log(index,item);
  });
  var obj={username:'xuefeng',age:12};
  $.each(obj,function (key,value) {
    console.log(key,value);
  })
})

在这里插入图片描述

Zepto

$.each(collection, function(index, item){ … })
可以遍历数组,以index，item的形式，
可以遍历对象，以key-value的形式

可以遍历字符串。

遍历json对象以字符串的形式遍历。*

$(function () {
  var str='abcd';
  $.each(str,function (a,b) {
    console.log(a,b);
  });
  var objJson=JSON.stringify({username:'tianjinfeng'});
  $.each(objJson,function (a,b) {
    console.log(a,b);
  })
});

在这里插入图片描述

offset()

jQuery

offset();

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

<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  #box{
    width: 200px;
    height: 200px;
    position: relative;
    left: 100px;
    top: 100px;
    background: #ff0;
    text-align: center;
    line-height: 200px;
  }
</style>
<script type='text/javascript'>
    $(function () {
      var $offset=$('#box').offset();
      console.log($offset);
    });
</script>

在这里插入图片描述

Zepto

offset()
1、获得当前元素相对于视口的位置。
2、返回一个对象含有： top, left, width和height(获取到的width，height都是包含padding和border的值)

<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  #box{
    width: 200px;
    height: 200px;
    position: relative;
    left: 50px;
    top: 50px;
    text-align: center;
    line-height: 200px;
    background: #f00;
            padding:10px;
            border:2px solid yellow;
  }
</style>
<script type='text/javascript'>
  $(function () {
    var $offset=$('#box').offset();
    console.log($offset);
  });
</script>

在这里插入图片描述

width(),height()区别

jQuery

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

<style type="text/css">
  #box{
    width: 200px;
    height: 200px;
    background: #f00;
    margin: 10px;
    padding: 10px;
    border: 3px solid #f0f;
  }
</style>
<script type="text/javascript">
  $(function(){
    //jquery中width(),height(),.css()返回的始终是content区域的宽高
    console.log($('#box').width());//200
    console.log($('#box').height());//200
    console.log($('#box').css('width'));//200px
    //可以通过css（）获取padding，border的值
    console.log($('#box').css('padding'));//10px
    console.log($('#box').css('border-width'));//3px
    //也可以利用innerHeight(),outerHeight(),innerWidth(),outerWidth()等来获取padding和border的值
    console.log($('#box').innerHeight());//220
    console.log($('#box').outerHeight()+'outerHeight');//226outerheight
  })
</script>

Zepto

zepto中的width(),height()是根据盒模型来取值的，包含补白和border的值。且不带单位px
.css获取的width，height是内容区的宽高，包含单位。
zepto中没有innerHeight(),innerWidth()—outerHeight(),outerWidth()
通过.css()获取padding，border的值

<style type="text/css">
  #box{
    width: 200px;
    height: 200px;
    background: #f00;
    margin: 10px;
    padding: 10px;
    border: 3px solid #ff0;
  }
</style>
<script type="text/javascript">
    $(function(){
      console.log($('#box').width());//226
      console.log($('#box').height());//226
      //用.css('width')获取的是content的宽高。
      console.log($('#box').css('width'));//200px
      //* 单独获取padding，border的值
      console.log($('#box').css('padding'));//10px
      console.log($('#box').css('border-width')+'border');//3pxborder
    })

隐藏元素宽高

<style type="text/css">
  #box{
    display: none;
    width: 200px;
    height: 200px;
    border: 1px solid #ff0;
            background: #ff0;
  }
</style>

jQuery

jquery可以获取隐藏元素的宽高。

<script type="text/javascript">
  $(function () {
    console.log($('#box').width());//200
    console.log($('#box').height());//200
  });
</script>

Zepto

zepto无法获取隐藏元素宽高

<script type="text/javascript">
  $(function () {
      console.log($('#box').width());//0
      console.log($('#box').height());//0
  });
</script>

事件委托
- jQuery
```
$('#box').on('click','.a',function () {
    alert('a触发的事件');
    $(this).removeClass().addClass('b');
});
$('#box').on('click','.b',function () {
    alert('b触发的事件');
    $(this).removeClass().addClass('a');
});
$('#box').append('<p class="a">我是新添加的</p>');
```
- Zepto
  
  坑！！！！
  
  —在zepto中事件委托
  委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。
  1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
  2、同一个事件如click
  3、委托关联操作的类要进行关联
  4、绑定顺序—从当前的位置往后看
```
$('#box').on('click','.a',function () {
  alert('a触发的事件');
  $(this).removeClass().addClass('b');
});
$('#box').on('click','.b',function () {
  alert('b触发的事件');
  $(this).removeClass().addClass('a');
});
$('#box').append('<p class="a">我是新添加的</p>');
```
  上面的代码正好满足四个要求，然后在页面上
  
  点击a的事件委托会执行alert('a触发的事件');和alert('b触发的事件');但样式却不会变，也就是说样式改变被跳过了
  
  点击b的事件委托会执行alert('b触发的事件');然后样式会变成class为a的样式。
  
  这中变化是因为alert('b触发的事件');所在事件在alert('a触发的事件');后面，所以alert('b触发的事件');样式会变化，而alert('a触发的事件');所对应的样式不变

轻小說控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Zepto-helloworld-Zepto与jQuery的不同

ZeptoHelloWorld什么是zepto.js概念：移动端开发框架；API及语句同jQuery相似，但文件更小(可压缩至8KB)。是目前功能完备的库中，最小的一个zepto.js特点1、针对的是移动端2、轻量级，压缩版本只有8KB3、语法大部分同jQuery一样，学习成本低，上手快。4、响应，执行快。5、同jQuery一样都是以$为核心函数。Zepto_与jQue...
复制链接

扫一扫

专栏目录