zepto.js学习笔记01

最新推荐文章于 2025-06-02 09:16:25 发布

AnalogElectronic

最新推荐文章于 2025-06-02 09:16:25 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/AnalogElectronic/article/details/110948351

前端专栏收录该内容

62 篇文章

订阅专栏

本文详细介绍了Zepto框架的特点和用法，包括其轻量级体积、与jQuery的语法相似性，以及在移动端开发的优势。文章对比了Zepto与jQuery在API使用上的异同，并通过多个示例代码展示了如何实现DOM操作、事件处理等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

zepto
- 特点：
  1、体积8kb
  2、针对移动端的框架
  3、语法同jquery大部分一样，都是$为核心函数
  4、目前功能完善的框架体积最小的左右
- 同jquery相似的语法
  核心：$
  –作为函数使用
  参数：
  1、function(){}
  2、选择器字符串
  3、html标签字符串
  3、DOM code
  –作为对象使用
  方法；
  1、 $. e a c h () 2 、$ .trim()
  3、$.ajax() $.get() $. p o s t () 4 、$ .isArray()
  jquery对象/zepto对象
  概念：$调用返回的就是 jquery对象/zepto对象伪数组(有时候只有一个元素)
zepto同jquery不同的API
- attr同prop
  jquery：标签的固有属性，布尔值属性
  标签的自定义属性，用attr布尔值属性并且布尔值属性在标签体内没有定义时候
  zepto:attr同样获取布尔值属性。
- DOM操作
  配置对象：
  jquery不同使用配置对象添加id，class。。。
  zepto可以使用配置对象—结构，样式分离，而且容易管理
- offset()----用来获取目标元素相对于视口的偏移量对象
  jquery：top ， left
  
  zeptop：top，left，width，height(content,补白，border)
- width(),height()
  jquery:
  1、width(),height() 获取content内容区的值，没有单位
  2、.css 获取content内容区的值，有单位px
  3、 innerHeight() content,padding没有单位
  innerHeight() content,padding border没有单位
  zepto:
  1、width(),height()获取的content，补白，border
  2、没有innerHeight()，innerHeight()
  3、.css()
- 事件委托
  原理：利用冒泡的原理将事件绑定到父元素/祖先元素身上，event.target指向的子元素
  zepto：
  1、委托同一个父元素身上
  2、同一个世界
  3、操作关联，操作对应的元素/类
  4、顺序
  5、谁操作的关联类就是谁触发的
- each
  jquery：能遍历数组，对象，不能遍历字符串/json对象/json数组
  zepto：能遍历数组，对象，字符串
- 隐藏元素的宽高
  jquery：能获取
  zepto：不能宽，高

zepto的touch event

tap点击事件
singleTap()点击事件
doubleTap()双击事件
longTap()长按事件–连续作用750ms
滑动事件(浏览器的默认行为—翻页—touch-action)
1、swipe滑动事件在同一个方向连续滑动30px才为滑动，否则就是点击
2、longTap长按事件手指在目标对象上连续作用超过750ms算长按，否则算点击

1、hello world

hello world.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>zepto入门</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <style type="text/css">
      #btn{
          width: 200px;
          height: 200px;
          background: #ff0;
          text-align: center;
          line-height: 200px;
          margin: 100px auto;
      }
  </style>
</head>
<body>
<!--
    * 什么是zepto.js
         概念： 移动端开发框架；API及语句同jquery相似，但文件更小(可压缩至8KB)。
                    是目前功能完备的库中，最小的一个。
    * zepto.js特点
        1、针对的是移动端
        2、轻量级，压缩版本只有8KB
        3、语法大部分同jquery一样，学习成本低，上手快。
        4、响应，执行快。
        5、同jquery一样都是以$为核心函数。

-->
<div id="btn">hello world</div>
<script type="text/javascript" src="../js/zepto.js"></script>
<script type="text/javascript" src="../js/touch.js"></script>

<script type="text/javascript">
  $(function () {
      $('#btn').on('touchstart',function () {
          alert('hello,zepto');
      });
  });
</script>
</body>
</html>

2、zepto core

1_与jquery相同的API

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>common</title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background:#FF0000;
			}
			.box2{
				width: 200px;
				height: 200px;
				background:#FF00FF;
			}
			.box3{
				width: 200px;
				height: 200px;
				background: green;
			}

            #dis{
                display: none;
            }
		</style>
	</head>
	<body>
		<!--
			* 共同点：
			    jquery:
			    * 核心函数$
			    	1、作为函数使用（参数）
			    	    1.function
			    	    2.html字符串
			    	    3.DOM code
			    	    4.选择器字符串
            2、作为对象调用(方法)
                1.$.ajax()  $.get() $.post()
                2.$.isArray()
                  $.each()
                  $.isFunction()
                  $.trim()
                ......
            * jquery对象
            概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）；
            使用：
                 1.addClass()
                 2.removeClass()
                 3.show()
                 4.find()
           zepto:
              以上jquery的特性zepto同样适用
		-->
		<div class="box1">我是box1</div>
		<div class="box2">我是box2</div>
		<div class="box3">
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
    <div id="dis">隐藏的元素</div>

<script src="../../js/zepto.js"></script>
<script src="../../js/touch.js"></script>
<script type="text/javascript">
    $(function () {
        $('.box1').on('touchstart',function () {
            $(this).addClass('box2');
        });
        $('.box2').on('touchstart',function () {
            $('#dis').show();
        });

        $('.box3').on('touchstart',function () {
            $(this).find('p').css('background','red');
        })

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

2_与jquery的区别

attr和prop

jquery.html

<!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>jquery</title>
	</head>
	<body>
		<select style="font-size: 25px;">
			<option value="name">科比</option>
			<option value="name">韦德</option>
			<option value="name" selected="selected">邓肯</option>
			<option value="name">吉诺比利</option>
			<option value="name" selected="selected">艾弗森</option>
		</select>

<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function(){
    //attr与prop的区别
    /*
     * 1、prop多用在标签的固有属性，布尔值属性。比如：a标签的href，class，selected等。
     * 2、attr多用在自定义属性上。
     * 3、在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined
     */
    $('option').each(function (index, item) {
        //console.log($(this).attr('selected'));//没有定义获取到的是undefined
        console.log($(this).prop('selected'));//4false  1true
    });
  });
</script>
	</body>
</html>

zepto.html

<!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_selected</title>
</head>
<body>
  <select>
    <option value="name">科比</option>
    <option value="name">韦德</option>
    <option value="name" selected="selected">邓肯</option>
    <option value="name">吉诺比利</option>
    <option value="name" selected="selected">艾弗森</option>
  </select>
  <button id="btn">按钮</button>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/touch.js"></script>
<script type="text/javascript">
    //在zepto中用attr也可以获取布尔值属性.
    //prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop
    //坑！------zepto中removeProp()的方法。在1.2及以上才支持。
    $(function () {
      $('option').each(function (index, item) {
          //console.log($(this).attr('selected'));
          console.log($(this).prop('selected'));
      });
      $('#btn').click(function () {
          $(this).prop('disabled', 'true');
          setTimeout(function () {
              $('#btn').removeAttr('disabled');
          }, 2000);
      });
    });
</script>
</body>
</html>

DOM操作

jquery.html

<!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></title>
  <style type="text/css">
    #insert{
      background: #ff0;
    }
  </style>
</head>
<body>
  <!--
    jquery中插入DOM元素的时候添加配置对象（属性选择器：id，class。。。)的时候不会显示；
  -->
  <div id="box"></div>
  <script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function () {
      var $insert = $('<p>我是新添加的p标签</p>', {
          id:'insert'
        });
      $('#box').append($insert)
    });
  </script>
</body>
</html>

zepto.html

<!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">

    #insert{
      background: #ff0;
    }
    .insert{
      width:200px;
    }
  </style>
</head>
<body>
  <!--
    插入DOM元素的时候添加配置对象的时候可以添加进去，并且添加的配置对象的内容会直接反应在标签属性内，且可以操作，影响对应的DOM元素。
  -->
  <div id="box"></div>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function () {
    var $insert = $('<p>我是新添加的p标签</p>', {
      id:'insert',
      class:'insert'
    });
    $('#box').append($insert)
  });
</script>
</body>
</html>

each方法

jquery.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery_each</title>
	</head>
<body>
  <script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(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);
      })
    })
  </script>
</body>
</html>

zepto.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>zepto_each</title>
</head>
<body>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(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);
    });
  })
</script>
	</body>
</html>

offset()的区别

jquery.html

<!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>jquery_offset的区别</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      width: 200px;
      height: 200px;
      position: relative;
      left: 50px;
      top: 100px;
      font-size: 22px;
      background: #ff0;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <!--
    1、获取匹配元素在当前视口的相对偏移。
    2、返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
  -->
  <div id="box">新年快乐，大吉大利</div>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function(){
    var $offset = $('#box').offset();
    console.log($offset);
    console.log($offset.top);
    //获取width，height时为undefined
    console.log($offset.width);
  })
</script>
</body>
</html>

zepto.html

<!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_offset的区别</title>
  <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;
    }
  </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>
</body>
</html>

width(),height()区别

jquery.html

<!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>jquery</title>
<style type="text/css">
  #box{
    width: 200px;
    height: 200px;
    background: #f00;
    margin: 10px;
    padding: 10px;
    border: 3px solid #f0f;
  }
</style>
</head>
<body>
<div id="box"></div>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  /*
   * 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());
    console.log($('#box').outerHeight()+'outerHeight');
  })
</script>
</body>
</html>

zepto.html

<!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: 200px;
      height: 200px;
      background: #f00;
      margin: 10px;
      padding: 10px;
      border: 1px solid #ff0;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function(){
      //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');
    })
  </script>
</body>
</html>

事件委托

jquery.html

<!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>jquery_事件委托</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/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function(){
    console.log($('.a').length);
    //1.7以后已经不 支持live了。
//				$('#a').live('click',function(){
//					alert('a');
//				})
//				$('#box').delegate('.a','click',function(){
//					alert('delegate');
//				})
    //在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。
    $('#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>')
  })
</script>
</body>
</html>

zepto.html

<!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>

隐藏元素宽高

jquery.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    #box{
      display: none;
      width: 200px;
      height: 200px;
      border:1px solid #ff0;
    }
  </style>
</head>
<body>
  <!--
    jquery可以获取隐藏元素的宽高
  -->
  <div id="box"></div>
  <script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function () {
      console.log($('#box').width());
      console.log($('#box').height());
    });
  </script>
</body>
</html>

zepto.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>zepto</title>
  <style type="text/css">
    #box{
      display: none;
      width: 200px;
      height: 200px;
      border: 1px solid #ff0;
    }
  </style>
</head>
<body>
  <!--
    zepto无法获取隐藏元素宽高
  -->
  <div id="box">hello</div>
  <script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function () {
        console.log($('#box').width());
        console.log($('#box').height());
    });
  </script>
</body>
</html>