js庫之zepto0811

js庫之zepto

1.zepto基本概念

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-zepto初體驗(yàn)</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: skyblue;
        }
    </style>
    <!--<script src="js/jquery-3.1.1.js"></script>-->
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
</head>
<body>
<button>我是按鈕</button>
<div></div>
<script>
    /*
    1. Zepto?
    Zepto 是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的 JavaScript庫，
    它與jQuery有著類似的api, 如果你會(huì)用jQuery，那么你也會(huì)用Zepto

    2.既然和jQuery差不多, 為什么還需要Zepto?
    2.1jQuery更多是在PC端被應(yīng)用，Zepto更多是在移動(dòng)端被應(yīng)用；
    也正是因?yàn)閖Query用在PC端, 所以jQuery考慮了很多低級(jí)瀏覽器的的兼容性問題, ,所以代碼更多體積更大；
    也正是因?yàn)閆epto用在移動(dòng)端, 所以Zepto則是直接拋棄了低級(jí)瀏覽器的適配問題 , 所以代碼更少體積更小；
    2.2綜上所述: Zepto其實(shí)就是專門用于移動(dòng)端的輕量級(jí)的jQuery

    3.官方網(wǎng)址:
    英文版：http://zeptojs.com/
    中文版：http://www.css88.com/doc/zeptojs_api/
    */
    /*
    let oBtn = document.querySelector("button");
    oBtn.onclick = function () {
        $("div").css({backgroundColor: "red"});
    }
    */
    /*
    4.Zepto的特點(diǎn)
    Zepto采用了模塊化的開發(fā), 將不同的功能放到了不同的模塊中,
    在使用的過程中我們可以按需導(dǎo)入, 也就是需要什么功能就導(dǎo)入什么模塊
    * */
    $("button").click(function () {
        $("div").css({backgroundColor: "red"});
    });
    /*
    5.Zepto注意點(diǎn)
    如果是從官方網(wǎng)站下載的, 那么已經(jīng)包含了默認(rèn)的一些模塊
    如果是從github下載的, 那么需要我們自己手動(dòng)導(dǎo)入每一個(gè)模塊
    當(dāng)然后續(xù)學(xué)習(xí)了NodeJS后, 我們也可以自己定制
    * */
</script>
</body>
</html>

2.zepto選擇器

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-zepto選擇器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin-bottom: 20px;
        }
        .one{
            background: green;
        }
        #two{
            background: blue;
        }
    </style>
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/selector.js"></script>

</head>
<body>
<button>我是按鈕</button>
<div></div>
<div class="one"></div>
<div id="two"></div>
<script>
    /*
    1.Zepto選擇器
    Zepto是模塊化開發(fā)的, zepto.js核心模塊中只包含了基礎(chǔ)功能
    如果想使用高級(jí)的選擇器必須引入高級(jí)選擇器模塊 即
    <script src="js/selector.js">
    * */
    $("button").click(function () {
        // $("div").css({backgroundColor: "yellow"});
        // $(".one").css({backgroundColor: "yellow"});
        // $("#two").css({backgroundColor: "yellow"});
        $("div:first").css({backgroundColor: "yellow"});
    });
</script>
</body>
</html>

3.zepto動(dòng)畫

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-zepto動(dòng)畫</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            /*display: none;*/
        }
    </style>
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/fx.js"></script>
    <script src="js/fx_methods.js"></script>
</head>
<body>
<button>我是按鈕</button>
<div></div>
<script>
    /*
    1.zepto動(dòng)畫
    Zepto是模塊化開發(fā)的, zepto.js核心模塊中只包含了基礎(chǔ)功能
    如果想使用動(dòng)畫必須引入動(dòng)畫模塊
    即 <script src="js/fx.js">
  如果想實(shí)現(xiàn)淡入淡出等動(dòng)畫,還需要引入
  <script src="js/fx_methods.js">
    2.zepto動(dòng)畫注意點(diǎn)
    由于zepto是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的 JavaScript庫
    不需要兼容低級(jí)瀏覽器, 所以zepto中的動(dòng)畫是通過CSS3屬性來實(shí)現(xiàn)動(dòng)畫的
    而jQuery中是通過DOM來實(shí)現(xiàn)動(dòng)畫的
    
    */
    $("button").click(function () {
        // $("div").animate({marginLeft: 500}, 2000);
        // $("div").hide(2000);
        // $("div").show(2000);
        $("div").toggle(2000);
    });
</script>
</body>
</html>

4.zepto-tap事件

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: red;
        }
    </style>
    <!--<script src="js/jquery-3.1.1.js"></script>-->
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
</head>
<body>
<div></div>
<script>
    /*
    1.無論P(yáng)C端還是移動(dòng)端都支持click事件
    而且不僅僅是jQuery和Zepto支持, 原生的JS也支持
    */
    /*
    let oDiv = document.querySelector("div");
    oDiv.onclick = function () {
        console.log("被點(diǎn)擊了");
    }
    */
    /*
    $("div").click(function () {
        console.log("被點(diǎn)擊了");
    });
    */
    /*
    2.移動(dòng)端click事件注意點(diǎn)
    在企業(yè)開發(fā)中如果需要在移動(dòng)端監(jiān)聽點(diǎn)擊事件, 一般不會(huì)使用click來監(jiān)聽
    因?yàn)橐苿?dòng)端的事件很多(單擊/雙擊/輕掃/捏合/拖拽等等)
    所以如果通過click來監(jiān)聽,系統(tǒng)需要花費(fèi)100~300毫秒判斷到底是什么事件
    而移動(dòng)端對(duì)事件的響應(yīng)速度要求很高, 事件響應(yīng)越快用戶體驗(yàn)就越好
    所以如果需要在移動(dòng)端監(jiān)聽點(diǎn)擊事件, 那么請使用tap事件

    3.tap事件
    tap事件是Zepto自己封裝的一個(gè)事件, 解決了原生click事件100~300毫秒的延遲問題
    */
    $("div").tap(function () {
        console.log("被點(diǎn)擊了");
    });
</script>
</body>
</html>

5.移動(dòng)端touch事件

5.1
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-移動(dòng)端Touch事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div></div>
<script>
    /*
    1.Zepto是如何實(shí)現(xiàn)tap事件的?
    雖然tap事件是Zepto自己封裝的事件, 但是無論如何封裝肯定都是通過原生JS來實(shí)現(xiàn)的
    在原生的JS中專門為移動(dòng)端新增了幾個(gè)事件
    touchstart: 手指按下
    touchmove:  手指在元素上移動(dòng)
    touchend :  手指抬起

    2.注意點(diǎn):
    這幾個(gè)事件只支持移動(dòng)端, 不支持PC端
    * */
    let oDiv = document.querySelector("div");
    oDiv.ontouchstart = function () {
        console.log("手指按下");
    }
    oDiv.ontouchend = function () {
        console.log("手指抬起");
    }
    oDiv.ontouchmove = function () {
        console.log("手指移動(dòng)");
    }
</script>
</body>
</html>
5.2 移動(dòng)端Touch事件對(duì)象
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-移動(dòng)端Touch事件對(duì)象</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 150px;
            height: 150px;
            display: inline-block;
            background: red;
        }
        .box2{
            background: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>
    /*
    1.Touch事件對(duì)象
    移動(dòng)端的touch事件也是一個(gè)事件, 所以被觸發(fā)的時(shí)候系統(tǒng)也會(huì)自動(dòng)傳遞一個(gè)事件對(duì)象給我們

    2.移動(dòng)端touch事件對(duì)象中比較重要的三個(gè)子對(duì)象
    touches:        當(dāng)前屏幕上所有手指的列表一個(gè)指頭,length就是1
      TouchList {0: Touch, length: 1}
    targetTouches:  保存了元素上所有的手指里列表
    changedTouches: 當(dāng)前屏幕上剛剛接觸的手指或者離開的手指
    */
    
    let oDiv1 = document.querySelector(".box1");
    oDiv1.ontouchstart = function (event) {
        console.log("touches1", event.touches);
        console.log("targetTouches1", event.targetTouches);
        console.log("按下", event.changedTouches);
    }
    oDiv1.ontouchend = function (event) {
        console.log("抬起", event.changedTouches);
    }
    /*
    touches和targetTouches
    如果都是將手指按到了同一個(gè)元素上, 那么這兩個(gè)對(duì)象中保存的內(nèi)容是一樣的
    如果是將手指按到了不同的元素上, 那么這個(gè)兩個(gè)對(duì)象中保存的內(nèi)容不一樣
    touches保存的是所有元素中的手指, 而targetTouches保存的是當(dāng)前元素中的手指

    changedTouches
    在ontouchstart中保存的是剛剛新增的手指
    在ontouchend中保存的是剛剛離開的手指
    * */
</script>
</body>
</html>
5.3 touch事件位置
  • ![touch事件位置1](D:\Typora\筆記\圖片\touch事件位置1.jpg)![touch事件位置1](D:\Typora\筆記\圖片\touch事件位置1.jpg)<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-移動(dòng)端Touch事件位置</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 1000px;
            height: 100px;
            margin-left: 50px;
            margin-top: 50px;
            background: linear-gradient(to right, red, green);
        }
    </style>
</head>
<body>
<div></div>
<script>
    /*
    1.手指的位置
    1.screenX/screenY是相對(duì)于屏幕左上角的偏移位
    2.clientX/clientY是相對(duì)于可視區(qū)域左上角的偏移位
    3.pageX/pageY是相對(duì)于內(nèi)容左上角的偏移位
    * */
    let oDiv = document.querySelector("div");
    oDiv.ontouchstart = function (event) {
        console.log(event.targetTouches[0]);
        console.log(event.targetTouches[0].screenX);
        console.log(event.targetTouches[0].screenY);
        console.log(event.targetTouches[0].clientX); // 11
        console.log(event.targetTouches[0].clientY); // 63
        console.log(event.targetTouches[0].pageX);  // 686
        console.log(event.targetTouches[0].pageY);  // 63
    }
</script>
</body>
</html>
  • touch事件位置1.jpg
5.4 tap事件原理
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09-zepto-tap事件原理</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src="js/myTap.js"></script>
</head>
<body>
<div></div>
<script>
    /*
    1.單擊事件特點(diǎn)
    1.1只有一根手指
    1.2按下和離開時(shí)間不能太久 100ms
    1.3按下和離開距離不能太遠(yuǎn) 5px
    * */
    let oDiv = document.querySelector("div");
    /*
    let startX = 0;
    let startY = 0;
    let startTime = 0;
    oDiv.ontouchstart = function (event) {
        // 1.判斷當(dāng)前元素中有幾根手指
        if(event.targetTouches.length > 1){
            return;
        }
        // 2.拿到手指按下的位置
        startX = event.targetTouches[0].clientX;
        startY = event.targetTouches[0].clientY;
        // 3.拿到手指按下的時(shí)間
        startTime = Date.now();
    }
    oDiv.ontouchend = function (event) {
        // 1.判斷有幾根手指離開了
        if(event.changedTouches.length > 1){
            return;
        }
        // 2.拿到離開手指的位置
        let endX = event.changedTouches[0].clientX;
        let endY = event.changedTouches[0].clientY;
        // 3.判斷手指離開的位置和按下位置的距離
        if(Math.abs(endX - startX) > 5 ||
            Math.abs(endY - startY) > 5){
            return;
        }
        // 4.拿到手指離開的時(shí)間
        let endTime = Date.now();
        // 5.判斷手指離開的時(shí)間和按下的時(shí)間
        if(endTime - startTime > 100){
            return;
        }
        console.log("單擊事件");
    }
    */
    Tap(oDiv, function () {
        console.log("點(diǎn)擊事件");
    });
</script>
</body>
</html>

6.移動(dòng)端點(diǎn)透問題

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-移動(dòng)端點(diǎn)透問題</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            text-align: center;
            font-size: 40px;
        }
        .click{
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 100px;
        }
        .tap{
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 150px;
        }
    </style>
</head>
<body>
<div class="click">click</div>
<div class="tap">tap</div>
<script>
    /*
    1.移動(dòng)端點(diǎn)透問題
    當(dāng)一個(gè)元素放覆蓋了另一個(gè)元素(不是父子關(guān)系), 覆蓋的元素監(jiān)聽touch事件,而下面的元素監(jiān)聽click事件
    并且touch事件觸發(fā)后覆蓋的元素就消失了, 那么就會(huì)出現(xiàn)點(diǎn)透問題

    2.移動(dòng)端點(diǎn)透問題出現(xiàn)的原因
    2.1當(dāng)手指觸摸到屏幕的時(shí)候，系統(tǒng)生成兩個(gè)事件，一個(gè)是touch 一個(gè)是click
    2.2touch事件先執(zhí)行,執(zhí)行完后從文檔上消失
    2.3click事件有100~300ms延遲, 所以后執(zhí)行.
    2.4但click事件執(zhí)行的時(shí)候觸發(fā)的元素已經(jīng)消失了, 對(duì)應(yīng)的位置現(xiàn)在是下面的元素, 所以就觸發(fā)了下面元素的         click事件
  */
    let oClick = document.querySelector(".click");
    let oTap = document.querySelector(".tap");

    oTap.ontouchstart = function (event) {
        this.style.display = "none";
        event.preventDefault(); //  阻止事件擴(kuò)散
    }
    oClick.onclick = function () {
        console.log("click");
    }
</script>
</body>
</html>
6.2 點(diǎn)透問題解決方案
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-移動(dòng)端點(diǎn)透問題</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            text-align: center;
            font-size: 40px;
        }
        .click{
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 100px;
        }
        .tap{
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 150px;
        }
    </style>
    <!-- <script src="js/zepto.js"></script>
     <script src="js/touch.js"></script>-->
    <script src="js/fastclick.js"></script>
</head>
<body>
<div class="click">click</div>
<div class="tap">tap</div>
<script>
    /*
    1.移動(dòng)端點(diǎn)透問題三種解決方案
    1.1在touch事件中添加event.preverDefault(); 阻止事件擴(kuò)散
    1.2使用Zepto, 使用tap事件來替換ontouchstart,但是需要注意老版本的Zepto也會(huì)出現(xiàn)點(diǎn)透問題
    1.3使用Fastclick, 最早解決點(diǎn)透問題的插件
    */

    let oClick = document.querySelector(".click");
    let oTap = document.querySelector(".tap");
    //第一種    
    oTap.ontouchstart = function (event) {
        this.style.display = "none";
        event.preventDefault(); //  阻止事件擴(kuò)散
    }
    
    //第二種    
    $(oTap).tap(function () {
        oTap.style.display = "none";
    });
    
    //第三種
    //先得寫下面這些話
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false);
    }
    // 注意點(diǎn): 這里的click事件并不是原生的click事件, 是使用的fastclick中的click
    //         這里的click事件已經(jīng)解決了100~300ms延遲的問題
    oTap.addEventListener("click", function () {
        oTap.style.display = "none";
    });
    oClick.onclick = function () {
        console.log("click");
    }
</script>
</body>
</html>

7.zepto-滑動(dòng)事件(swipe)

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-zepto-滑動(dòng)事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin-left: 100px;
            margin-top: 100px;
        }
    </style>
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/fx.js"></script>
</head>
<body>
<div></div>
<script>
    /*
    1.什么是輕掃事件?
    手指快速的往左邊滑動(dòng)/或者右邊滑動(dòng)/或者上邊滑動(dòng)/或者下邊滑動(dòng)
    * */
    // $("div").swipe(function () {
    //     console.log("輕掃");
    // });
    $("div").swipeLeft(function () {
        // console.log("向左邊輕掃");
        $(this).animate({marginLeft: "0"}, 1000);
    });
    $("div").swipeRight(function () {
        // console.log("向右邊輕掃");
        $(this).animate({marginLeft: "100px"}, 1000);
    });
    $("div").swipeUp(function () {
        // console.log("向上邊輕掃");
        $(this).animate({marginTop: "0"}, 1000);
    });
    $("div").swipeDown(function () {
        // console.log("向下邊輕掃");
        $(this).animate({marginTop: "100px"}, 1000);
    });
</script>
</body>
</html>
7.2 練習(xí)
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13-滑動(dòng)事件練習(xí)</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
       .box{
            overflow: hidden;
        }
        .box>.box-top{
            height: 50px;
            position: relative;
        }
        .box>.box-top>ul{
            list-style: none;
            width: 100%;
            display: flex;
        }
        .box>.box-top>ul>li{
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex-grow: 1;
            background: #6c6c6c;
        }
        .box>.box-top>ul>.active{
            color: #f40;
            background: #ccc;
        }
        .box>.box-top>.line{
            width: 50%;
            height: 2px;
            background: #f40;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .box>.box-bottom{
            width: 200%;
            display: flex;
            position: relative;
            top: 0;
            left: 0;
        }
        .box>.box-bottom>ul{
            list-style: none;
            flex-grow: 1;
        }
        .box>.box-bottom>ul>li{
            line-height: 30px;
            border-bottom: 1px solid #ccc;
        }
    </style>
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/fx.js"></script>
    <script src="js/selector.js"></script>
</head>
<body>
<div class="box">
    <div class="box-top">
        <ul>
            <li class="active">新聞</li>
            <li>科技</li>
        </ul>
        <p class="line"></p>
    </div>
    <div class="box-bottom">
        <ul class="list1">
            <li>我是新聞1</li>
            <li>我是新聞2</li>
            <li>我是新聞3</li>
            <li>我是新聞4</li>
        </ul>
        <ul class="list2">
            <li>我是軍事1</li>
            <li>我是軍事2</li>
            <li>我是軍事3</li>
            <li>我是軍事4</li>
        </ul>
    </div>
</div>
<script>
    $(".box-top li").on("nj:click",function () {
        $(this).addClass("active").siblings().removeClass("active");
        let currentIndex = $(this).index();
        $(".line").animate({left: currentIndex * $(this).width() + "px"}, 500);
        $(".box-bottom").animate({left: -currentIndex * $(".list1").width() + "px"}, 500);
    });
    $(".box-top li").click(function () {
        $(this).trigger("nj:click");
    });
    $(".box").swipeLeft(function () {
        $(".box-top li:last").trigger("nj:click");
    });
    $(".box").swipeRight(function () {
        $(".box-top li:first").trigger("nj:click");
    });
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,045評(píng)論 0贊 2
  • webpack構(gòu)建流程 webpack是時(shí)下最流行的前端打包構(gòu)建工具，本質(zhì)上是一個(gè)模塊打包器，通過從入口文件開始遞...
    杜文斌閱讀 1,122評(píng)論 0贊 3
  • CentOS7下單機(jī)版kafka環(huán)境搭建 一、zookeeper、jdk安裝 1.確保已安裝jdk。 JDK安...
    潘L閱讀 233評(píng)論 0贊 0
  • 如何讓表單控件中的標(biāo)題例如：姓名 密碼 郵箱 達(dá)到右對(duì)齊的效果？ 效果如下所示。 ...
    RyuukoGYC閱讀 390評(píng)論 0贊 0
  • Task4 python基礎(chǔ) 1.函數(shù)關(guān)鍵字 Python定義函數(shù)時(shí)使用 def 關(guān)鍵字 2.函數(shù)的定義 函數(shù)是組...
    簡書Sandra閱讀 445評(píng)論 0贊 0