0
点赞
收藏
分享

微信扫一扫

zepto入门以及与jQ的区别


zepto入门以及与jQ的区别_ajax

zepto入门以及与jQ的区别_ajax_02

zepto入门以及与jQ的区别_ajax_03

zepto入门以及与jQ的区别_javascript_04

zepto入门以及与jQ的区别_ajax_05

zepto入门以及与jQ的区别_html_06

zepto入门以及与jQ的区别_javascript_07

zepto入门以及与jQ的区别_javascript_08

 

zepto入门以及与jQ的区别_ajax_09

后置  、前置插入

zepto入门以及与jQ的区别_ajax_10

zepto入门以及与jQ的区别_javascript_11

zepto入门以及与jQ的区别_javascript_12

zepto入门以及与jQ的区别_javascript_13

zepto入门以及与jQ的区别_ajax_14

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

zepto入门以及与jQ的区别_javascript_15

zepto入门以及与jQ的区别_javascript_16

zepto入门以及与jQ的区别_ajax_17

zepto入门以及与jQ的区别_html_18

zepto入门以及与jQ的区别_html_19

zepto入门以及与jQ的区别_javascript_20

zepto入门以及与jQ的区别_ajax_21

 

zepto入门以及与jQ的区别_javascript_22

开头的简写方式

zepto入门以及与jQ的区别_ajax_23

zepto入门以及与jQ的区别_html_24

 

 

 

 

zepto入门以及与jQ的区别_ajax_25

点击a就会冒泡

zepto入门以及与jQ的区别_html_26

zepto入门以及与jQ的区别_html_27

true为事件捕获

 

zepto入门以及与jQ的区别_html_28

 

zepto入门以及与jQ的区别_javascript_29

zepto入门以及与jQ的区别_javascript_30

zepto入门以及与jQ的区别_html_31

 

zepto入门以及与jQ的区别_ajax_32

zepto入门以及与jQ的区别_html_33

zepto入门以及与jQ的区别_html_34

zepto入门以及与jQ的区别_javascript_35

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

zepto入门以及与jQ的区别_html_36

zepto入门以及与jQ的区别_javascript_37

 

zepto入门以及与jQ的区别_html_38

 

 AJAX  前后端的桥梁

传统AJAX

zepto入门以及与jQ的区别_javascript_39

zepto入门以及与jQ的区别_html_40

zepto入门以及与jQ的区别_ajax_41

 

zepto中的Ajax

zepto入门以及与jQ的区别_javascript_42

一般返回json 简化后

zepto入门以及与jQ的区别_javascript_43

zepto入门以及与jQ的区别_html_44

zepto入门以及与jQ的区别_javascript_45

移动端使用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>

zepto入门以及与jQ的区别_html_46

zepto入门以及与jQ的区别_ajax_47

简单插件的使用

zepto入门以及与jQ的区别_javascript_48

zepto入门以及与jQ的区别_ajax_49

zepto入门以及与jQ的区别_html_50

不填参数就是默认值的写法

zepto入门以及与jQ的区别_javascript_51

 

 

函数末尾加入return this 就可以链式调用了

zepto入门以及与jQ的区别_ajax_52

 

多组插件

zepto入门以及与jQ的区别_html_53

zepto入门以及与jQ的区别_html_54

 

 

zepto入门以及与jQ的区别_html_55

 

可以讲上面的函数封装到一个文件当中然后就可以直接倒入插件了

zepto入门以及与jQ的区别_html_56

zepto入门以及与jQ的区别_html_57

 

zepto入门以及与jQ的区别_javascript_58

zepto入门以及与jQ的区别_html_59

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

举报

相关推荐

0 条评论