js庫(kù)之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庫(kù)邑狸， 它與jQuery有著類(lèi)似的api, 如果你會(huì)用jQuery捐名，那么你也會(huì)用Zepto 2.既然和jQuery差不多, 為什么還需要Zepto? 2.1jQuery更多是在PC端被應(yīng)用枪萄，Zepto更多是在移動(dòng)端被應(yīng)用嘴纺； 也正是因?yàn)閖Query用在PC端, 所以jQuery考慮了很多低級(jí)瀏覽器的的兼容性問(wèn)題, ,所以代碼更多體積更大斯议； 也正是因?yàn)閆epto用在移動(dòng)端, 所以Zepto則是直接拋棄了低級(jí)瀏覽器的適配問(wèn)題 , 所以代碼更少體積更小咬清； 2.2綜上所述: Zepto其實(shí)就是專(zhuān)門(mén)用于移動(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采用了模塊化的開(kāi)發(fā), 將不同的功能放到了不同的模塊中, 在使用的過(guò)程中我們可以按需導(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是模塊化開(kāi)發(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)畫(huà)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03-zepto動(dòng)畫(huà)</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)畫(huà) Zepto是模塊化開(kāi)發(fā)的, zepto.js核心模塊中只包含了基礎(chǔ)功能 如果想使用動(dòng)畫(huà)必須引入動(dòng)畫(huà)模塊 即 <script src="js/fx.js"> 如果想實(shí)現(xiàn)淡入淡出等動(dòng)畫(huà),還需要引入 <script src="js/fx_methods.js"> 2.zepto動(dòng)畫(huà)注意點(diǎn) 由于zepto是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的 JavaScript庫(kù) 不需要兼容低級(jí)瀏覽器, 所以zepto中的動(dòng)畫(huà)是通過(guò)CSS3屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)的 而jQuery中是通過(guò)DOM來(lái)實(shí)現(xiàn)動(dòng)畫(huà)的 */ $("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.無(wú)論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è)開(kāi)發(fā)中如果需要在移動(dòng)端監(jiān)聽(tīng)點(diǎn)擊事件, 一般不會(huì)使用click來(lái)監(jiān)聽(tīng) 因?yàn)橐苿?dòng)端的事件很多(單擊/雙擊/輕掃/捏合/拖拽等等) 所以如果通過(guò)click來(lái)監(jiān)聽(tīng),系統(tǒng)需要花費(fèi)100~300毫秒判斷到底是什么事件 而移動(dòng)端對(duì)事件的響應(yīng)速度要求很高, 事件響應(yīng)越快用戶(hù)體驗(yàn)就越好 所以如果需要在移動(dòng)端監(jiān)聽(tīng)點(diǎn)擊事件, 那么請(qǐng)使用tap事件 3.tap事件 tap事件是Zepto自己封裝的一個(gè)事件, 解決了原生click事件100~300毫秒的延遲問(wèn)題 */ $("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自己封裝的事件, 但是無(wú)論如何封裝肯定都是通過(guò)原生JS來(lái)實(shí)現(xiàn)的 在原生的JS中專(zhuān)門(mén)為移動(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)前屏幕上剛剛接觸的手指或者離開(kāi)的手指 */ 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中保存的是剛剛離開(kāi)的手指 * */ </script> </body> </html>
5.3 touch事件位置
<!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按下和離開(kāi)時(shí)間不能太久 100ms 1.3按下和離開(kāi)距離不能太遠(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.判斷有幾根手指離開(kāi)了 if(event.changedTouches.length > 1){ return; } // 2.拿到離開(kāi)手指的位置 let endX = event.changedTouches[0].clientX; let endY = event.changedTouches[0].clientY; // 3.判斷手指離開(kāi)的位置和按下位置的距離 if(Math.abs(endX - startX) > 5 || Math.abs(endY - startY) > 5){ return; } // 4.拿到手指離開(kāi)的時(shí)間 let endTime = Date.now(); // 5.判斷手指離開(kāi)的時(shí)間和按下的時(shí)間 if(endTime - startTime > 100){ return; } console.log("單擊事件"); } */ Tap(oDiv, function () { console.log("點(diǎn)擊事件"); }); </script> </body> </html>
6.移動(dòng)端點(diǎn)透問(wè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)透問(wè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)透問(wèn)題 當(dāng)一個(gè)元素放覆蓋了另一個(gè)元素(不是父子關(guān)系), 覆蓋的元素監(jiān)聽(tīng)touch事件,而下面的元素監(jiān)聽(tīng)click事件 并且touch事件觸發(fā)后覆蓋的元素就消失了, 那么就會(huì)出現(xiàn)點(diǎn)透問(wèn)題 2.移動(dòng)端點(diǎn)透問(wè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)透問(wèn)題解決方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10-移動(dòng)端點(diǎn)透問(wè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)透問(wèn)題三種解決方案 1.1在touch事件中添加event.preverDefault(); 阻止事件擴(kuò)散 1.2使用Zepto, 使用tap事件來(lái)替換ontouchstart,但是需要注意老版本的Zepto也會(huì)出現(xiàn)點(diǎn)透問(wèn)題 1.3使用Fastclick, 最早解決點(diǎn)透問(wè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"; }); //第三種 //先得寫(xiě)下面這些話 if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } // 注意點(diǎn): 這里的click事件并不是原生的click事件, 是使用的fastclick中的click // 這里的click事件已經(jīng)解決了100~300ms延遲的問(wèn)題 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>
