JS新特性—zepto

zepto初体验

  • 1.Zepto?

    • Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，它与jQuery有着类似的api, 如果你会用jQuery，那么你也会用Zepto

  • 2.既然和jQuery差不多, 为什么还需要Zepto?

    • 2.1jQuery更多是在PC端被应用，Zepto更多是在移动端被应用；也正是因为jQuery用在PC端,所以jQuery考虑了很多低级浏览器的的兼容性问题,所以代码更多体积更大；也正是因为Zepto用在移动端,所以Zepto则是直接抛弃了低级浏览器的适配问题,所以代码更少体积更小；
    • 2.2综上所述:Zepto其实就是专门用于移动端的轻量级的jQuery

  • 3.官方网址:

<style>
div{
    width: 200px;
    height: 200px;
    background: skyblue;
    }
</style>
<script src="js/zepto.js"></script>
</head>

<body>
<button>我是按钮</button>
<div></div>

<script>
let oBtn = document.querySelector("button");
oBtn.onclick = function () {
    $("div").css({backgroundColor: "red"});  // 背景改为红色
}
</script>
  • 4.Zepto的特点
    • Zepto采用了模块化的开发,将不同的功能放到了不同的模块中,在使用的过程中我们可以按需导入, 也就是需要什么功能就导入什么模块
// 上个示例需要再导入一个触发事件的模块，才能正常运行下列代码
<script src="js/event.js"></script>  // 新导入的模块

$("button").click(function () {
    $("div").css({backgroundColor: "red"});
});
  • 5.Zepto注意点
    • 如果是从官方网站下载的,那么已经包含了默认的一些模;如果是从github下载的,那么需要我们自己手动导入每一个模块
    • 当然后续学习了NodeJS后,我们也可以自己定制

zepto选择器

  • Zepto选择器

    • Zepto是模块化开发的,zepto.js核心模块中只包含了基础功能，如果想使用高级的选择器必须引入高级选择器模块

  • 高级选择器模块

<script src="js/selector.js"></script>

zepto动画

  • 1.zepto动画

    • Zepto是模块化开发的,zepto.js核心模块中只包含了基础功能
    • 如果想使用动画必须引入动画模块

  • 2.zepto动画注意点

    • 由于zepto是一个轻量级的针对现代高级浏览器的 JavaScript库，不需要兼容低级浏览器, 所以zepto中的动画是通过CSS3属性来实现动画的
    • 而jQuery中是通过DOM来实现动画的
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 200px;
        background: red;
        /*display: none;*/
    }
</style>
<script src="js/zepto.js"></script>  // zepto基础模块
<script src="js/event.js"></script>  // 事件模块
<script src="js/fx.js"></script>  // animate动画模块
<script src="js/fx_methods.js"></script>  // 过渡动画等模块
<!--<script src="js/jquery-3.1.1.js"></script>-->
</head>

<body>
<button>我是按钮</button>
<div></div>
<script>
$("button").click(function () {
    // $("div").animate({marginLeft: 500}, 2000);    
    // $("div").hide(2000);
    // $("div").show(2000);
    $("div").toggle(2000);
});

zepto-tap事件

  • 1.无论PC端还是移动端都支持click事件
    • 而且不仅仅是jQuery和Zepto支持, 原生的JS也支持
// 原生js:
let oDiv = document.querySelector("div");
oDiv.onclick = function () {
    console.log("被点击了");   // 被点击了
}

// jQuery和Zepto:
$("div").click(function () {
    console.log("被点击了");  // 被点击了
});

  • 2.移动端click事件注意点

    • 在企业开发中如果需要在移动端监听点击事件, 一般不会使用click来监听
      • 因为移动端的事件很多(单击/双击/轻扫/捏合/拖拽等等)。所以如果通过click来监听,系统需要花费100~300毫秒判断到底是什么事件
      • 而移动端对事件的响应速度要求很高,事件响应越快用户体验就越好
      • 所以如果需要在移动端监听点击事件, 那么请使用tap事件

  • 3.tap事件

    • tap事件是Zepto自己封装的一个事件,解决了原生click事件100~300毫秒的延迟问题
    • 记得导入touch模块
<script src="js/touch.js"></script>

$("div").tap(function () {
    console.log("被点击了"); // 被点击了
});
  • 重点：==移动端点击事件，一定要记得用tap==

备注：
在浏览器中显示移动端，若想元素不缩小，需要写上 <meta name="viewport" content="width=device-width, initial-scale=1.0">

tap事件原理(理解)

  • 1.单击事件特点

    • 1.1只有一根手指
    • 1.2按下和离开时间不能太久 100ms
    • 1.3按下和离开距离不能太远 5px

  • 实现自制tap事件

let oDiv = document.querySelector("div");
let startX = 0;
let startY = 0;
let startTime = 0;
oDiv.ontouchstart = function (event) {
    // 1.判断当前元素中有几根手指
    if(event.targetTouches.length > 1){
        return;
    }
    // 2.拿到手指按下的位置
    startX = event.targetTouches[0].clientX;
    startY = event.targetTouches[0].clientY;
    // 3.拿到手指按下的时间
    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.拿到手指离开的时间
    let endTime = Date.now();
    // 5.判断手指离开的时间和按下的时间
    if(endTime - startTime > 100){
        return;
    }
    console.log("单击事件");
}

移动端Touch事件

  • 1.Zepto是如何实现tap事件的?
    • 虽然tap事件是Zepto自己封装的事件,但是无论如何封装肯定都是通过原生JS来实现的
    • 在原生的JS中专门为移动端新增了几个事件
      • touchstart: 手指按下
      • touchmove: 手指在元素上移动
      • touchend : 手指抬起

注意点:
这几个事件只支持移动端, 不支持PC端

<meta name="viewport" content="width=device-width, initial-scale=1.0">   // 移动端化，不缩小
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 200px;
        background: red;
    }
</style>
</head>
<body>
<div></div>
<script>
let oDiv = document.querySelector("div");
oDiv.ontouchstart = function () {
    console.log("手指按下");
}
oDiv.ontouchend = function () {
    console.log("手指抬起");
}
oDiv.ontouchmove = function () {
    console.log("手指移动");
}
</script>

移动端Touch事件对象

  • 1.Touch事件对象

    • 移动端的touch事件也是一个事件,所以被触发的时候系统也会自动传递一个事件对象给我们

  • 2.移动端touch事件对象中比较重要的三个子对象

    • touches:当前屏幕上所有手指的列表(可以理解为屏幕上所有的手指列表)
      • 一般不用这个
    • targetTouches:保存了元素上所有的手指里列表（可以理解为指定范围内的手指列表）
      • 一般移动端监听手指用这个，比touches严谨
    • changedTouches:当前屏幕上刚刚接触的手指或者离开的手指（可以理解为当前屏幕上关于手指的改变）
<div class="box1"></div>
<div class="box2"></div>
<script>
// touches和targetTouches
let oDiv1 = document.querySelector(".box1");
oDiv1.ontouchstart = function (event) {
    // console.log("touches1", event.touches);
    console.log("targetTouches1", event.targetTouches);
}
let oDiv2 = document.querySelector(".box2");
oDiv2.ontouchstart = function (event) {
    // console.log("touches2", event.touches);
    console.log("targetTouches2", event.targetTouches);
}

// changedTouches
let oDiv1 = document.querySelector(".box1");
oDiv1.ontouchstart = function (event) {
    console.log("按下", event.changedTouches);
}
oDiv1.ontouchend = function (event) {
    console.log("抬起", event.changedTouches);
}
</script>

  • touches和targetTouches的区别

    • 如果都是将手指按到了同一个元素上,那么这两个对象中保存的内容是一样的
    • 如果是将手指按到了不同的元素上,那么这个两个对象中保存的内容不一样
      • touches保存的是所有元素中的手
      • 而targetTouches保存的是当前元素中的手指

  • changedTouches性质

    • 在ontouchstart中保存的是同一时间新增的手指
    • 在ontouchend中保存的是同一时间离开的手指

移动端Touch事件位置

  • 1.触碰的位置
    • screenX/screenY是相对于屏幕左上角的偏移位（可以理解为距离电脑全屏幕左边和上边的偏移位）
    • clientX/clientY是相对于可视区域左上角的偏移位（可以理解为移动端屏幕内触碰位置距离可视范围左边和上边的偏移位）
    • pageX/pageY是相对于内容左上角的偏移位（可以理解为触碰到的位置距离该元素左边和上边的偏移位）
<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>
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>

移动端点透问题(理解)

  • 1.移动端点透问题

    • 当一个元素放覆盖了另一个元素,覆盖的元素监听touch事件,而下面的元素监听click事件。并且touch事件触发后覆盖的元素就消失了,那么就会出现点透问题

  • 2.移动端点透问题出现的原因

    • 2.1当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click
    • 2.2touch事件先执行,执行完后从文档上消失
    • 2.3click事件有100~300ms延迟, 所以后执行.
    • 2.4但click事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素,所以就触发了下面元素的click事件

  • 3.移动端点透问题解决方案

    • 在touch事件中添加event.preverDefault(); 阻止事件扩散
<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>
let oClick = document.querySelector(".click");
let oTap = document.querySelector(".tap");

oTap.ontouchstart = function (event) {
    this.style.display = "none";
    event.preventDefault(); //  阻止事件扩散
}
oClick.onclick = function () {
    console.log("click");
}
</script>

移动端点透问题(掌握，接上节)

  • 1.移动端点透问题三种解决方案
    • 1.1在touch事件中添加event.preverDefault(); 阻止事件扩散(上节笔记中有写出)
    • 1.2使用Zepto,但是需要注意老版本的Zepto也会出现点透问题，新版本已修复
    • 1.3使用Fastclick, 最早解决点透问题的插件
  • 使用Zepto(版本会出现问题，注意)
<script src="js/zepto.js"></script>
<script src="js/touch.js"></script>

<script>
let oClick = document.querySelector(".click");
let oTap = document.querySelector(".tap");

$(oTap).tap(function () {
    oTap.style.display = "none";
});

oClick.onclick = function () {
    console.log("click");
}
</script>
  • 使用Fastclick
<script src="js/fastclick.js"></script>

<script>
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

let oClick = document.querySelector(".click");
let oTap = document.querySelector(".tap");

// 注意点: 这里的click事件并不是原生的click事件, 是使用的fastclick中的click
//         这里的click事件已经解决了100~300ms延迟的问题
oTap.addEventListener("click", function () {
    oTap.style.display = "none";
});
oClick.onclick = function () {
    console.log("click");
}
</script>

zepto-滑动事件 swipe

  • 什么是轻扫事件?
    • 手指快速的往左边滑动/或者右边滑动/或者上边滑动/或者下边滑动
  • 示例：
<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>

<script>
// $("div").swipe(function () {
//     console.log("轻扫");
// });

$("div").swipeLeft(function () {
    // console.log("向左边轻扫");
    $(this).animate({marginLeft: "0"}, 2000);
});
$("div").swipeRight(function () {
    // console.log("向右边轻扫");
    $(this).animate({marginLeft: "100px"}, 2000);
});
$("div").swipeUp(function () {
    // console.log("向上边轻扫");
    $(this).animate({marginTop: "0"}, 2000);
});
$("div").swipeDown(function () {
    // console.log("向下边轻扫");
    $(this).animate({marginTop: "100px"}, 2000);
});
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,776评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,527评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,361评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,430评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,511评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,544评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,561评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,315评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,763评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,911评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,554评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2赞 352