Zepto.js简介

一、总结

一句话总结:

Zepto.js语法和jquery起码百分之90相似,主要做移动端框架,和jquery mobile是一个类型的概念

1、Zepto.js做移动端的特点?

Zepto有着独特的手指的触摸事件(tap、swipe。。。),且不再支持IE浏览器

2、移动端常用框架?

1.jQuery Mobile
2.zepto.js
3.bootstrap做适配

二、什么是Zepto.js

转自或参考:什么是Zepto.js
https://blog.csdn.net/qq_38021852/article/details/82659994

 

Zepto是一个轻量级的JavaScript库,它的文件大小只有10K左右,兼容现代高级浏览器,主要用于移动端的开发,它有着与jQuery类似的API。就像zepto官网说的如果你会使用jQuery,那你也会用zepto。

Zepto有着独特的手指的触摸事件(tap、swipe。。。),且不再支持IE浏览器。

下载方式:npm install zepto

下载到本地:https://zeptojs.com/zepto.js

中文文档地址:http://www.css88.com/doc/zeptojs_api/

浏览器支持

初级 (100% 支持)

  • Safari 6+ (Mac)
  • Chrome 30+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
  • Firefox 24+ (Windows, Mac, Android, Linux, Firefox OS)
  • iOS 5+ Safari
  • Android 2.3+ Browser
  • Internet Explorer 10+ (Windows, Windows Phone)

次要目标(完全或大部分支持)

  • iOS 3+ Safari
  • Chrome <30
  • Firefox 4+
  • Safari <6
  • Android Browser 2.2
  • Opera 10+
  • webOS 1.4.5+ Browser
  • BlackBerry Tablet OS 1.0.7+ Browser
  • Amazon Silk 1.0+
  • Other WebKit-based browsers/runtimes

创建插件:

核心方法

$()

$(selector, [context])   ⇒ collection
$(<Zepto collection>) ⇒ same collection
$(<DOM nodes>) ⇒ collection
$(htmlString) ⇒ collection
$(htmlString, attributes) ⇒ collection v1.0+
Zepto(function($){ ... })
 

jQuery与Zepto的异同

一,同:

  Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小。Zepto最大的优势是它的文件大小,只有8k多,是目前功能完备的库中最小的一个,尽管不大,Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Zepto都有,Zepto中还有一些jQuery中没有的。另外,因为Zepto的API大部分都能和jQuery兼容,所以用起来极其容易,如果熟悉jQuery,就能很容易掌握Zepto。你可用同样的方式重用jQuery中的很多方法,也可以方面地把方法串在一起得到更简洁的代码,甚至不用看它的文档。

二,异:

  1,针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件),Zepto是不支持IE浏览器的,这不是Zepto的开发者Thomas Fucks在跨浏览器问题上犯了迷糊,而是经过了认真考虑后为了降低文件尺寸而做出的决定,就像jQuery的团队在2.0版中不再支持旧版的IE(6 7 8)一样。因为Zepto使用jQuery句法,所以它在文档中建议把jQuery作为IE上的后备库。那样程序仍能在IE中,而其他浏览器则能享受到Zepto在文件大小上的优势,然而它们两个的API不是完全兼容的,所以使用这种方法时一定要小心,并要做充分的测试。

 
 

移动端常用框架

1.jQuery Mobile 
2.zepto.js 
3.bootstrap做适配

 
 

Zepto.js简介的更多相关文章

  1. 学习zepto.js(对象方法)[5]

    继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. ...

  2. 学习zepto.js(对象方法)[3]

    继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<s ...

  3. prototype.js简介

    prototype.js简介 2007-11-21 14:22 prototype.js是一个很强大的Javascript函数库,它可以让你很轻松的使用一些特效,实现AJAX的功能.虽然prototy ...

  4. 将jquery.shCircleLoader插件修改为zepto.js兼容

    经过查阅资料zepto 和 jquery 的区别后发现是 (1)zepto.js  删去了 jquery 的 innerHeight() 和 innerWidth() 属性  (2)zepto.js和 ...

  5. scroll事件实现监控滚动条并分页显示示例(zepto.js)

    scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...

  6. 学习zepto.js(Hello World)

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 昨天听说了zepto.js,正好最近也比较闲 ...

  7. zepto.js的事件处理

    能够深入理解zepto对事件的处理,那么整个JS的事件处理就应该差不多合格了,事件处理是JS语言的一个难点. 1. 首先来看$.event函数. JS中有很多事件,都是已经定义好了,我们直接调用就可以 ...

  8. Zepto.js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...

  9. HTML基础--JS简介、基本语法、类型转换、变量、运算符、分支语句、循环语句、数组、函数、函数调用.avi

    JS简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司(已被Oracle收 ...

随机推荐

  1. Dockerfile常用指令说明

    具体解释:https://blog.csdn.net/achenyuan/article/details/80231922 将dockerfile文件和生成好的jar 使用ftp工具上传到linux服 ...

  2. 打开nginx配置的站点报错500

    打开站点报错500的原因 有很多,这里只说明一点:nginx 的fastcgi.conf配置引起的问题 环境说明 1 站点目录结构 wwwroot website public application ...

  3. CentOS 7.7安装Erlang和Elixir

    安装之前,先看一下它们的简要说明 Erlang Erlang是一种开源编程语言,用于构建对高可用性有要求的大规模可扩展的软实时系统.它通常用于电信,银行,电子商务,计算机电话和即时消息中.Erlang ...

  4. 十分钟读懂JavaScript原型和原型链

    原型(prototype)这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型.在JavaScript中,原型的探索也有很多有趣的地方,接下来跟随我的脚步去看看吧. 原型对象释义 每一个构 ...

  5. AVR单片机教程——EasyElectronics Library v1.3手册

    bit.h delay.h pin.h wave.h pwm.h tone.h adc.h button.h switch.h rotary.h pot.h ldr.h led.h rgbw.h se ...

  6. Huber Loss 介绍

    Huber Loss 是一个用于回归问题的带参损失函数, 优点是能增强平方误差损失函数(MSE, mean square error)对离群点的鲁棒性. 当预测偏差小于 δ 时,它采用平方误差,当预测 ...

  7. SpringBoot中使用Interceptor

    https://www.cnblogs.com/chao555/p/9573102.html 1.创建自定义的拦截器并实现HandlerInterceptor接口 package com.demo.c ...

  8. 2.NET Core设定数据库种子

    1.使用以下代码在 Models 文件夹中创建一个名为 SeedData 的新类: using Microsoft.EntityFrameworkCore;using Microsoft.Extens ...

  9. pyspark学习笔记

    记录一些pyspark常用的用法,用到的就会加进来 pyspark指定分区个数 通过spark指定最终存储文件的个数,以解决例如小文件的问题,比hive方便,直观 有两种方法,repartition, ...

  10. MPAndroid 的学习

    1.MPAndroid 的github的地址: https://github.com/PhilJay/MPAndroidChart#documentation 2.使用步骤: 在build.gradl ...