https://zeptojs.com

轻量级的 JavaScript 库,移动端优先框架

针对移动端,处理了一系列如 click 点击延迟 毫秒

响应执行快

目前 API 完善的框架中体积最小的一个(能用于项目的)

  • 与 jQuery
  • 相同点: 语法与 jQUery 大部分一样,相当于 jQuery 的子集,都是以 $ 核心函数
  • 不同点:
  • zepto 体积更轻,针对移动端,拥有独特的移动端事件,且以上特点 zepto 全部适用
  • 引入 zepto.js 核心库(zepto、ajax、event、form、ie)以后,还须引入相关附属库(如: touch.js)
  • jQuery 更重,也更重要,API 完善
    • 核心    $ / jQuery
    • 两大利器
      • jQuery 函数

        • $(function(){});
        • $("#box");
        • $('div');
        • $("<p>123456</p>");
      • jQuery 对象        
        • $.ajax();    $.get();    $.post();
        • $.isArray(obj)        // 判断是否为数组 
        • $.each(arr, function(index, each){});        // arr.forEach(each, index, self);
        • $.trim("    Hello World   ");    // "Hello World"
        • $.find("div");    // 获取页面所有的 <div> 元素
          • var divPs = $("div").find("p");    // 获取页面所有父元素为 div 元素的 p元素
          • 链式调用的核心是,返回值为 目标对象
        • $.size();
        • $.length;
        • $.get();        $box.get(0);    $box[0]    转化为 DOM 对象
        • $.index();
  • jQuery 的 attr 与 prop

prop() 常用于布尔值属性的操作    checked seleted disabled enabled

attr() 常用于自定义属性,获取 布尔值属性 时如果无则返回 undefined,prop 则不会出现这个问题

  • zepto 的 attr 与 prop

在 zepto 中,用 attr() 也可以获取 布尔值属性,当未定义属性时,返回的是 false

prop 则与 jQuery 的 prop 完全相同

  • 布尔值属性的操作还是优先使用 prop,prop 的优先级高于 attr
  • 按钮延时可点击( 坑1. removeProp()    大于 zepto1.2  版本才可用。。。所以移除任何属性,都建议使用 removeAttr() )
  • <!-- javascript 代码 -->
    <script type="text/javascript" src="./js/zepto/zepto.js"></script>
    <script type="text/javascript" src="./js/zepto/touch.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <script>
    $("#btn").on("touchstart", function(){
    $("#btn").prop("disabled", true);
    setTimeout(function(){
    $("#btn").removeAttr("disabled");
    }, 2000);
    });
    </script>
  • DOM 操作
  • 正常

$("#box").append("<p class="blue_line">Hello World</p>");

  • zepto 新用法( jQuery 不支持在增加 DOM 元素时,添加配置对象,影响 DOM 结构

$newEle = $("<p class="blue_line">Hello World</p>", {class:"blue_line red_font", id:"new_ele"});

$("#box").append($newEle);

  • $.each

正常

$.each(数组, function(index, eachValue, arr){});

$.each(对象, function(attr, eachValue, obj){});

不能遍历字符串、json 对象(本质也是字符串)

var jsonObj = JSON.stringify({name:"浩克", age:"31"});

zepto 可以使用 $.each() 遍历字符串、json

$.each(字符串, function(index, eachChar, str){});

$.each(jsonObj, function(attr, eachValue, obj){});

  • $("#box").offset();       

在 jQuery 中,获取元素相对于视口的偏移量 {left: "200", top: "100"},只对占位的元素可用,否则返回(0, 0)

在 zepto 中,返回的是一个对象,返回的的是一个对象 {left: "200", top: "100", width: "50", heigth: "50"},其中 width、height 包含 padding、border

  • $("#box").width()$("#box").height();

在 jQuery 中返回的是 content-box 的宽高

在 zepto 中返回的是 content-box + padding-box 的宽高

且 zepto 中 没有 innerWidth() 和 innerHeight() 方法

  • $("#box").css("border-width");
  • $("#box").css("border-height");    jQuery 中返回 undefined,zepto 中返回 null
  • display: none; 隐藏元素的 width / height

jQuery 中可以拿到隐藏元素的 width / height

zepto 中

不能用 .width() / .height() 获取到隐藏元素的 width / height

但是可以用 .css("width"); / .css("height") 获取到 width / height

  • 事件委派----直接使用 $("ul").on("touchstart", "li", func);

使用父元素监听子元素的事件触发

最终触发的是 子元素,使用 event.target 获取触发元素

一次绑定一劳永逸

在 jQuery 中

$("ul").live("click", "li", func);    事件委派在 jQuery-1.7 中剔除了 .live() 和 die()

$("ul").delegate("li", "click", func);        $("ul").undelegate("li", "click", func); 

$("ul").on("click", "li", func);        其中 this 指向 触发事件的 li

在 zepto 中

剔除了 .live() 和 .delegate() 的相关方法(动物被袭击)

  • 坑2.
  • zepto 委托的事件依次进入队列,在执行本元素触发事件时,还会触发满足一定条件的事件

1. 委托了同一个父元素    或者    触发元素的事件范围小于同类型元素的事件范围

2. 同一个事件

3. 委派的事件产生了关联

如果委托了同一父元素,则先绑定的会触发后绑定的

如果委派范围有包含关系,则范围小的会触发范围大的事件

  • zepto 封装的 touch 方法

.tap    在 document 上绑定 touch 事件 实现单击

.singleTap()    单击事件

.doubleTab()    双击事件        如果还要实现单击事件时,必须使用 .singleTab()____使用 .tap() 的话,双击无效

.longTap()    当元素被长按超过 750ms 时触发

.swipe()      .swipeUp()     .swipeDown()     .swipeLeft()     .swipeRight()

当在元素上滑动 30px 以上时触发

  • 正常其情况下,手机会将滑动识别成翻页
  • 此时需要在目标元素设置 css { touch-action: none; }
  • 此时又出现一个新问题: 滑动滚动条失效了____解决:

zepto 的 <form>

var data = $().serialize();        // 序列化成字符串    返回表单项键值对    name=kjf&password=123&rember=true

var data = $().serializeArray();        // 序列化成字符串    返回表单项键值对    ["name=jf", "password=123", "rember=true"]

var data = $().serializeArray();        // 序列化成字符串    返回表单项键值对    ["name=jf", "password=123", "rember=true"]

Zepto.js_开始的更多相关文章

  1. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  2. zepto/jQuery、AngularJS、React、Nuclear的演化

    写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...

  3. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  4. jquery和zepto的扩展方法extend

    jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...

  5. [原创]zepto打造一款移动端划屏插件

    最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...

  6. zepto之tap事件点透问题分析及解决方案

    点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...

  7. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  8. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

随机推荐

  1. SEO学习知识

    监控流量的工具 百度统计 CNZZ  51LA 谷歌分析工具 如何从平台借流量? 竞价(付费).SEO 关键词定位: 定位人:负责人 将公司的业务全部列出来 选词: 根据定位的关键词选择出我们需要优化 ...

  2. 前端面试题整理—Vue篇

     1.对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器 vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统 vue是一款MVVM框架,基于双向绑定数据,当数据发生 ...

  3. 2.13 break和continue

    break和continue 1. break <1> for循环 普通的循环示例如下: name = 'itheima' for x in name: print('----') pri ...

  4. Java反射定义、获取Class三种方法

    反射机制的定义: 在运行状态时(动态的),对于任意一个类,都能够得到这个类的所有属性和方法.  对于任意一个对象,都能够调用它的任意属性和方法. Class类是反射机制的起源,我们得到Class类对象 ...

  5. 拍拍熊(APT-C-37),诱导方式、DNS、安卓远控

    诱导方式 1.含有正常APP功能的伪装 2.文件图标伪装 RAR 1.Android DroidJack SpyNote Windows njRAT njRAT[2]又称Bladabindi,通过控制 ...

  6. 帆软报表(finereport)图表——扇形图/等弧度的玫瑰图

    扇形图/等弧度的玫瑰图,展示的是展示数据所占的比例,需要所有数据的和加起来为1. 下面利用一个实例说明玫瑰图的用法和设置起始角度和终止角度,操作如下: 1.配置一个内置数据集 新增一个等弧度的玫瑰图模 ...

  7. cefsharp解决闪烁

    CefSharp禁用GPU的命令行参数 其中,Major和Minor分别指代系统的主版本(大版本).次版本(小版本)版本号.其中指定了Windows7系统会禁用 GPU.,突发奇想,是否windows ...

  8. 【原创】运维基础之Docker(7)关于docker latest tag

    Docker images have a tag named latest which doesn’t work as you expect.Latest is just a tag with a s ...

  9. php-beast 代码加密

    https://github.com/liexusong/php-beast 修改php.ini配置 extension_dir = "/usr/lib/php/20151012/" ...

  10. css 冷知识

    *{margin: 0;padding: 0;} li{list-style-type:none; }ul{list-style: none;}img{border: none;}ul,input,s ...