Zepto.js框架

最新推荐文章于 2024-05-09 09:42:13 发布

彭于晏爱编程

最新推荐文章于 2024-05-09 09:42:13 发布

阅读量636

点赞数 1

分类专栏： Zepto 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/m0_59708269/article/details/125159553

版权

同jQuery类似的框架,用于移动端

摘要由CSDN通过智能技术生成

Zepto

一.Helloworld

<!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: #FFFF00;
				margin: 0 auto;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<!--
			* 什么是zepto.js
			     概念： 移动端开发框架,是jquery的轻量级代替品；API及语句同jquery相似，但文件更小(可压缩至8KB)。
			                是目前功能完备的库中，最小的一个。
			* zepto.js特点
			    1、针对的是移动端
			    2、轻量级，压缩版本只有8KB
			    3、语法大部分同jquery一样，学习成本低，上手快。
			    4、响应，执行快。
			    5、同jquery一样以$作为核心函数和核心对象。

		-->
		<div id="btn">我是一个按钮</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(){
   
					$('#btn').on('touchstart',function(){
   
						alert('我是zepto')
					});
					$('body').append($('<p>我是新添加的p标签</p>'));
					
				})

		</script>
	</body>
</html>

二.与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>

三.事件委托

<!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事件委托

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

五.隐藏元素宽高

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

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

七.attr和prop

<!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(index, item.innerHTML);
        console.log($(this).attr('selected'));//没有定义获取到的是undefined
        console.log($(this).prop('selected'));//4false  1true
    });
  });
</script>
	</body>
</html>

八.zepto

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