Zepto移动端框架

最新推荐文章于 2022-04-25 10:23:39 发布

weixin_44816077

最新推荐文章于 2022-04-25 10:23:39 发布

阅读量282

点赞数

本文链接：https://blog.csdn.net/weixin_44816077/article/details/101349296

版权

理论概念
什么是Zepto.js
一个移动端框架，是jQuery的轻量级替代品，API与语句与jQuery相似，但文件要小得多（压缩最小8kb)
特点：
1.用于移动端 2.轻量级 3.与jQuery相似，易于学习 4.响应，执行快，5，以$作为核心函数与核心对象
与jQuery相同的API

共同点：
jquery:
* 核心函数$
1、作为函数使用（参数）
1.function
2.html字符串
3.DOM code
4.选择器字符串
2、作为对象调用(方法)
1.$.ajax() $.get() $. p o s t () 2 .$ .isArray()
$.each()
$.isFunction()
$. t r i m () . . . . . . * j q u e r y 对象概念： j q u e r y 核心函数$ ()调用返回的对象就是jquery对象的数组（可能有只有一个）；
使用：
1.addClass()
2.removeClass()
3.show()
4.find()
zepto:
以上jquery的特性zepto同样适用

 $(function () {
        $('.box1').on('touchstart',function () {
            $(this).addClass('box2');
        });
        $('.box2').on('touchstart',function () {
            $('#dis').show();
        });

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

    })

与jQuery不同的API
1.prop与attr
jquery中attr与prop的不同
prop多用于标签的固有属性，布尔值属性，比如selected
attr多用于自定义属性，利用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
    });

在Zepto中attr也可以获取布尔值属性，但prop的优先级比attr高，建议使用prop

$('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);
      });

2.Dom操作
a.在jquery操作Dom的时候添加配置对象不会起作用（配置属性选择器之类的）

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

b.在Zepto中使用配置对象可以起作用,添加的配置对象会直接反应到对应的标签中，可以操作，影响Dom元素

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

3.each方法的遍历
$.each(collection, function(index, item){ … })
a.在jquery中each的使用
可以遍历数组 index-item的形式
可以遍历对象 key-vaule的形式
不可以用于遍历字符串以及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);
      })
    })

b.在Zepto中each方法的使用
可以遍历数组,以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()方法的区别
在jQuery中的使用
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

<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>
  <div id="box">jQuery</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>

在Zepto中的使用
与jQuery不同的是：返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)

 $(function(){
      var $offset = $('#box').offset();
      console.log($offset);
      console.log($offset.left);
      console.log($offset.width);
    })

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

 //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');

在Zepto中获取宽高
(1)zepto用width(),height()是根据盒模型决定的，并且不包含单位PX
(2)包含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.获取隐藏元素的宽高
在jquery中可以获取隐藏元素的宽高

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

在Zepto中无法获取隐藏元素的宽高

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

重要的事件委托
事件委托的概念
将子元素的事件委托到父元素上，原理是冒泡机制，并最终在子元素上执行
作用：减少Dom操作，新添加的子元素也可以响应事件

在jQuery中的事件委托

<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 子元素对象
      $(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中已经废除了live,delegate事件委托。利用的是on事件委托

这里由一个坑：委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。
    1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
    2、同一个事件
    3、委托关联  操作的类要进行关联
    4、绑定顺序---从当前的位置往后看
    */
    $('#box').on("click",'.a',function(){
      alert('a事件');
      $(this).removeClass('a').addClass('b');
    });
//点击未看到变化（重绘重排）js比css执行快
    $('#box').on("click",'.b',function(){
      alert('b事件');
      $(this).removeClass('b').addClass('a');
    });
    $('#box').append($('<p>我是新添加的p标签</p>',{class:'a'}));
  })

touch Event事件
1.与jquery相同的事件
on() 绑定事件处理程序
off() 方法移除用目标oon绑定的事件处理程序。
bind() 为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件。
one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
trigger() 触发有bind定义的事件（通常是自定义事件通常是页面加载的时候触发）
unbind() bind的反向操作，删除匹配元素所绑定的bind事件。

<style type="text/css">
		.btn2{
			width: 100px;
			height: 100px;
			background: #f0f;
		}
	</style>
</head>
<body>
	<button id="btn1">按钮1</button>
	<div class="btn2">按钮2</div>
	<button id="btn3">按钮3</button>

<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(){
		$('#btn1').on('touchstart',function(){
			alert('我是btn1');
		});
//		$('#btn1').off('click');
		//bind
		$('.btn2').bind('touchstart touchmove',function(){
			$(this).toggleClass("btnSty")
		});
		//one
		$('#btn3').one('click',function(){
			alert('我是btn3')
		});
		//trigger  自动执行
		$('#btn1').bind('myTouch',function(event,a,b){
			alert('我是由trigger触发的btn');
			console.log(a + ' ' + b);
		});
		$('#btn1').trigger('myTouch',['hello','world']);

		//unbind
		$('#btn2').unbind('touchmove');
		
	})
</script>
</body>

2.zepto中的touch Event

<style type="text/css">
          *{
              touch-action: none; /*禁止默认事件执行 auto是允许*/
          }
    .box{
      width: 100px;
      height: 100px;
      background: #FFFF00;
      margin: 0 auto;
      text-align: center;
      line-height: 100px;
    }
    .btn{
      width: 100px;
      height: 50px;
      background: #FF0000;
      border-radius: 10px;
      margin: 0 auto;
    }
  </style>
</head>
<body style="height: 1000px;">
		<!--
			 
			* zepto touch方法
				* tap()点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
				* singleTap()  点击事件
				* doubleTap()  双击事件
				* longTap()    当一个元素被按住超过750ms触发。
				* swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过(同一个方向滑动距离大于30px)时触发。(可选择给定的方向)
				   在一个方向滑动大于30px即为滑动。否则算点击。
		-->
  <div id="box" class="box">按钮1</div>
  <br />
  <div id="box2" class="box">按钮2</div>
  <br />
  <div id="box3" class="box">按钮3</div>
  <button id="btn" class="btn">button</button>
  <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 () {
      //tap()点击事件---真机测没问题

//      $('#box').tap(function () {
//          alert('tap事件');
//      });
      $('#box').on('tap',function () {
          alert('tap事件');
      });
      //singleTap()单击事件
      $('#box2').singleTap(function () {
          alert('我单击了一下');
      });

      //doubleTap()  双击事件
      $('#box2').doubleTap(function () {
          alert('我双击了一下');
      });

      //longTap()长按事件----按住屏幕时间超过750ms触发
      $('#box3').longTap(function () {
          alert('我长按了一下box3');
      });

      //swipe()滑动事件---在同一个方向连续滑动超过30px

//      $('#btn').swipe(function () {
//          alert('我滑动了超过30px');
//      });
      $('#btn').swipeLeft(function () {
          alert('我向左滑动了');
      });
    });
  </script>
</body>

zepto事件处理机制
1.zepto有自己的一套事件机制，并且对不同的浏览器做了兼容的内部封装处理。
2.新版本的zepto用on off来处理事件，废除了deletage bind die

$(function(){
    //简单绑定
    $('#box').on('touchstart',function(){
      alert('ddd');
    });
    //事件委托
    $('#box1').on('touchstart','p',function(){
      alert($(this).text());
    });
    //解除绑定事件
    //$('#box').off('touchstart');

    //一次函数
    $('#box2').one('touchstart',function(){
      alert('我就执行一次');
    });
  })

zepto表单form
1、serialize()
* 在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。—key(name)/value
2、serializeArray()
* 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。
* 不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。
3、submit()
* 为 “submit” 事件绑定一个处理函数，或者触发元素上的 “submit” 事件。
* 当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非阻止默认行为。

<body>
<form>
    <input type="password" name="pw" value="123"/>
    <input type="text" name="val" value="kobe"/>
    <input type="checkbox" checked="checked" name="rember"/> <!--on表示选中-->
    <input type="submit" value="按钮" name="anniu"/>
</form>
<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(){
    //serialize()
    var list = $('form').serialize();
    console.log(list);
    //serializeArray()
    var listArr = $('form').serializeArray();
    console.log(listArr);
    //submit()
    $('form').submit(function(e){
        e.preventDefault();
        var data = $(this).serialize();
        console.log(data);
    })
  })
</script>
</body>

zepto ajax

weixin_44816077

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Zepto移动端框架

理论概念什么是Zepto.js一个移动端框架，是jQuery的轻量级替代品，API与语句与jQuery相似，但文件要小得多（压缩最小8kb)特点：1.用于移动端 2.轻量级 3.与jQuery相似，易于学习 4.响应，执行快，5，以$作为核心函数与核心对象与jQuery相同的API共同点：jquery:* 核心函数$1、作为函数使用（参数）1.function2.html字...
复制链接

扫一扫