zepto入门以及与jQ的区别

月夜星星雨

于 2019-07-03 13:12:36 发布

阅读量606

点赞数

分类专栏：前端入门

本文链接：https://blog.csdn.net/m493096871/article/details/94478345

版权

前端入门专栏收录该内容

15 篇文章 0 订阅

订阅专栏

后置、前置插入

第一个包裹是分别包裹，第二个是全都包裹到一个里面

开头的简写方式

点击a就会冒泡

true为事件捕获

命名空间可以解绑分支事件

AJAX 前后端的桥梁

传统AJAX

zepto中的Ajax

一般返回json 简化后

移动端使用touch

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="maximum-scale=1,initial-scale=1,user-scalable=0">
   <title>zepto!>>touch</title>
</head>
<body>
   <div id="touch-test" style="font-size:36px;width:200px;height:200px;background:#cce">
       touch events test
   </div>
   <script type="text/javascript" src="./lib/zepto.min.js"></script>
   <script type="text/javascript" src="./lib/touch.js"></script>
   <script>
       $(document).ready(function(){
           $('#touch-test').bind('touchmove',function(e){e.preventDefault()})

           listen_to('#touch-test')

           function listen_to(el){
               $(el).tap(function(){
                   console.log(' |tap!')
               })
               .doubleTap(function(){
                   console.log(' |doubleTap!')
               })
               .swipe(function(){
                   console.log('swipe')
               })
               .swipeLeft(function(){
                   console.log('swipe')
               })
               .swipeRight(function(){
                   console.log('swipe')
               })
               .swipeUp(function(){
                   console.log('swipe')
               })
               .swipeDown(function(){
                   console.log('swipe')
               })
               .longTap(function(){
                   console.log('swipe')
               })
               .singleTap(function(){
                   console.log('swipe')
               })
           }
       });

   </script>

</body>
</html>