Zepto入门详解

2022-07-27 17:36:46 阅读：158 来源： 互联网

标签：function console 入门 click 详解 log div 选择器 Zepto

Zepto

用文档的话来说，Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。

主要针对移动端，因为不兼容IE浏览器，所以更轻量级，体积更小，才10k左右，为移动端各事件提供很好的支持，但它也有部分API是和jQuery的实现方式是不同的

入门

引入zepto.min.js文件（可自行到官网或者菜鸟https://www.runoob.com/manual/zeptojs.html里面下载）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Demo</title>
</head>
<body>
    <div></div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('div').html("Hello Zepto")
    });
</script>
</html>

事件ready和onload的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件ready和onload的区别</title>
</head>
<body>
    <script type="text/javascript" src="../js/zepto.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           //DOM加载完毕，图片并未完全加载，调用时机比较快
        });
        $(function () {

        });
        $().ready(function () {
            
        })
        window.onload = function () {
            //全部文件加载完毕，调用时机比较久
        }
    </script>
</body>
</html>

zepto转Dom对象

如果需要用到原生js的api，可将zepto的对象和dom对象互相转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom对象和zepto对象互转</title>
</head>
<body>
    <div id="two"></div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script>
    $(document).ready(function () {
        // zepto对象转DOM对象
        $('div')[0].className = "one"
        // dom对象转zepto对象
        $(two).addClass("two")
    });
</script>
</html>

选择器

选择器的使用基本跟jquery类似，基本选择器，后台选择器，子元素选择器，相邻元素选择器等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>
    <div></div>
    <div id="demo1"></div>
    <div class="demo2"></div>
    <p class="p1"></p>
    <p class="p2"></p>
    <div id="demo3">
        <div class="one">
            <p>你好</p>
        </div>
    </div>
    <div id="demo4">
        <div class="two">
            <p>你好</p>
        </div>
    </div>
    <div id="demo5">
        <div>11</div>
        <p>22</p>
        <p>33</p>
    </div>
    <div id="demo6">
        <div>我是兄弟节点</div>
        <p>44</p>
        <p>55</p>
        <p>66</p>
    </div>
    <div id="demo7">
        <div title="demo8"></div>
        <div title="demo9"></div>
        <div title="demo10"></div>
        <div title="demo11"></div>
        <div title="demo12"></div>
    </div>
    <div id="demo13">
        <div>过滤1</div>
        <div>过滤2</div>
        <div>过滤3</div>
    </div>
</body>
    <script type="text/javascript" src="../js/zepto.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //元素选择器
            //$('div').html("我是元素选择器")
            //id选择器
            $('#demo1').html("我是id选择器")
            //类选择器
            $('.demo2').html("我是类元素选择器")
            //群组选择器
            $('.p1,.p2').html("我们是群组选择器")
            //通配符选择器
            $('*').addClass("act")
            //后代选择器
            $("#demo3 .one p").css("color","red");
            //子元素选择器
            $("#demo4 > .two").css("font-size","30px")
            //相邻元素选择器
            $("#demo5 div + p").css("color","blue")
            //兄弟选择器
            $("#demo6 div ~ p").css("color","green")
            //属性过滤选择器
            $("#demo7 div[title='demo9']").html("属性过滤选择器")
            //子元素过滤选择器
            $("#demo13 div:nth-child(2)").html("我是子元素过滤选择器")
        })
    </script>
</html>

Zepto对DOM的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto对dom操作</title>
</head>
<body>
    <div id="demo">
        <div>
            <p>你好</p>
        </div>
    </div>
    <ul>
        <li>删除</li>
    </ul>
    <p>要被替换的节点</p>
    <p id="demo1">被包裹的节点</p>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //var $demo = $("<div class='cr'>被插入的div</div>")
        //$("#demo").append($demo); //元素插入到选中的元素后面
        //$demo.appendTo("#demo")
        //$("#demo").prepend($demo) //元素插入到选中元素的第一个
        //$demo.prependTo("#demo")
        //$("#demo").after($demo)  //插入到元素之后，同级别
        //$demo.insertAfter("#demo")
        //$("#demo").before($demo)

        //删除操作
        //$("ul li").remove() //节点删除
        //$("ul li").empty()
        //复制节点
        // $("ul li").click(function () {
        //     $(this).clone().appendTo("ul")
        // })
        // 替换节点replaceWith
        //$("p").replaceWith("<span>我已被替换</span>")
        //包裹节点 wrap
        $("#demo1").wrap("div")
    })
</script>
</html>

Zepto对dom属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto对dom属性操作</title>
    <style type="text/css">
        .red{
            color: red;
        }
        .lager{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div title="sx" class="red">属性操作</div>
    <button>按钮</button>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    //console.log($("div").attr("title"))  //获取属性值
    //$("div").attr("name","att") //添加属性值
    //$("div").attr({"name":"attr","class":"test"})//添加多个属性值
    //删除属性值
    //$("div").removeAttr("title")
    //添加样式操作
    //$("div").addClass("red lager")
    //删除样式
    //$("div").removeClass()
    //切换样式 toggle toggleClass（控制样式的添加和删除）
    $("button").click(function () {
        //$("div").toggle()
        $("div").toggleClass("red")
    });
    //判断是否含有某个样式 hasClass
    console.log($("div").hasClass("red"));
</script>
</html>

获取元素对象api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        <p>我是第一个元素</p>
        <h3>我是第二个元素</h3>
        <p>我是第三个元素</p>
    </div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //next是取得紧邻的后面的同辈元素
        console.log($("#demo p").next())
        //prev获取紧邻的前面的同辈元素
        console.log($("#demo h3").prev())
        //siblings获取前后的所有同辈元素
        console.log($("#demo h3").siblings())
        //获取直系父节点
        console.log($("#demo h3").parent())
        console.log($("#demo h3").parents())
    })
</script>
</html>

Zepto进行css样式修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto中的css-dom操作</title>
</head>
<body>
    <div class="one">我是一个CSS的测试div</div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //$(".one").css("color","red").css("font-size","36px");
        $(".one").css({
            color:"blue",
            fontSize:"30px"
        });
        $(".one").width(500);
        $(".one").height(500);
        $(".one").css("background","red");
    })
</script>
</html>

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
    <div id="one">事件绑定</div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#one").bind("click",function (ev) {
            console.log("我是bind方式的绑定")
        })
        $("#one").click(function (ev) {
            console.log("我是click方式的点击")
        })
        $("#one").on("click",function (ev) {
            console.log("我是on事件")
        })
    });
</script>
</html>

事件冒泡和事件捕获

Zepto不能进行事件捕获，所以需要用原生js，并将绑定事件默认值false改成true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和事件捕获</title>
</head>
<body>
    <div id="c">
        <div id="b">
            <div id="a">我是事件A</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    //事件冒泡，从底到顶级冒泡，过程中凡是元素添加事件的，都会被执行
    $(document).ready(function () {
        $("#c").bind("click",function () {
            console.log("我是事件c")
        })
        $("#a").bind("click",function () {
            console.log("我是事件a")
        })
    });
    //从顶级到底，过程中凡是元素添加事件的，都会被执行
    // document.getElementById("a").addEventListener("click",function () {
    //     console.log("我是事件a")
    // },true);
    // document.getElementById("c").addEventListener("click",function () {
    //     console.log("我是事件c")
    // },true);
</script>
</html>

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托代理</title>
</head>
<body>
<ul>
    <li>我是1</li>
    <li>我是2</li>
    <li>我是3</li>
    <li>我是4</li>
</ul>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //绑定事件非常消耗性能
        // $("li").bind("click",function () {
        //     console.log("我被bind事件绑定了")
        // })
        //click非常消耗性能
        // $("li").click(function () {
        //     console.log("我被click事件绑定了")
        // })
        //one 只能被调用一次
        // $("li").one("click",function () {
        //     console.log("one事件只能被执行一次")
        // })

        //live document绑定事件（只绑定一次） 存在多层冒泡缺点
        // 利用冒泡事件的方式，就叫做事件委托或代理
        // $("li").live("click",function () {
        //     console.log("live方式绑定")
        // })
        //delegate 事件代理
        // $("ul").delegate("li","click",function () {
        //     console.log("delegate事件代理绑定")
        // })

        // on 事件以上几种方式的集合
        $("ul").on("click","li",function () {
            console.log("on事件代理绑定")
        })
        //事件解除绑定
        $("ul").off()
        $("ul").unbind()

    });
</script>
</html>

事件其他用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件其他用法</title>
</head>
<body>
    <button>按钮</button>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/flexible.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //自定义事件
        // $("button").bind("muke",function () {
        //     console.log("触发自定义事件")
        // })
        // $("button").trigger("muke")

        //命名空间
        // $("button").bind("click",function () {
        //     console.log("我是普通的点击事件")
        // })
        // $("button").bind("click.muke",function () {
        //     console.log("我是第二个普通事件")
        // })
        // $("button").unbind(".muke")

        //绑定多个事件
        $("button").bind("click",function () {
            console.log("111")
        }).bind("touchstart",function () {
           console.log("222")
        })
    })
</script>
</html>

Zepto动画

因为zepto.min是轻量级的，只保留核心功能，所以动画需要引入相关的js代码，可自行到git下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zepto动画</title>
</head>
<body>
    <div>123</div>
    <button>按钮</button>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/fx.js"></script>
<script type="text/javascript" src="../js/fx_methods.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("div").css({"fontSize":"30px","color":"red"})
        $("button").bind("click",function () {
            //$("div").toggle("slow") //切换元素的显示和隐藏
            //$("div").hide(3000)  隐藏
            //$("div").hide("slow")
            //$("div").show("slow")
            //$("div").fadeIn("slow")
            //$("div").fadeOut("slow")
            //$("div").fadeToggle("slow") //切换元素的淡入和淡出
            //$("div").fadeToggle("slow")
            $("div").fadeTo(3000,0.3)
        })
    })
</script>
</html>

自定义animate动画函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto动画函数</title>
    <style type="text/css">
        div{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #f27c01;
            text-align: center;
            line-height: 200px;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div>我是方块</div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/fx.js"></script>
<script type="text/javascript">
    // animate 动画函数
    $(document).ready(function () {
        $("div").click(function () {
            // $("div").animate({"left":"500px"},3000,function () {
            //     alert("动画执行完毕")
            // })

            // $("div").animate({"left":"500px"},3000,function () {
            //     this.animate({"height":"500px"},3000,function () {
            //         alert("动画已执行")
            //     });
            // });
            $("div").animate({"left":"500px","height":"500px"},3000,function () {
                alert("执行完毕")
            })
        })
    })
</script>
</html>

移动端事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>触屏事件</title>
    <style type="text/css">
        div{
            width: 250px;
            height: 250px;
            line-height: 250px;
            background-color: #f27c01;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>屏幕</div>
</body>
<script type="text/javascript" src="../js/flexible.js"></script>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/touch.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("div").bind("touchmove",function (e) {
            e.preventDefault()
        })

        function listen_to(el) {
            $(el).tap(function () {
                console.log("| tap")
            }).doubleTap(function () {
                console.log("double tap")
            }).swipe(function () {
                console.log("| swipe")
            }).swipeLeft(function () {
                console.log("swipe left")
            }).swipeUp(function () {
                console.log("swipe up")
            }).swipeDown(function () {
                console.log("swipe down")
            })
        }
        listen_to("div")
    })
</script>
</html>

自定义Zepto插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>我是插件</div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
    ;(function ($) {
        $.fn.color = function(option){
            var options = $.extend({
                col:"blue",
                fz:"20px"
            },option);

            this.css("color",options.col);
            this.css("fontSize",options.fz);

            return this
        }
    })(Zepto);
    $('div').color()
</script>
</html>

将以上zepto相关demo代码过一遍，基本就算入门了。

标签：function,console,入门,click,详解,log,div,选择器,Zepto
来源： https://www.cnblogs.com/dslx/p/16525380.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9