Zepto.js

一、Zepto.js的语法借鉴并且兼容jQuery,只是在事件上作出了一些修改。

zepto.js的语法借鉴并且兼容jQuery,会使用jquery就会使用Zepto.js。Zepto.js是移动端的js库。Zepto.js相当于PC端的jQuery,它提供了很多方法和功能,能够很快的实现各种需求和功能。使用Zepto.js开发,性能上是最好的,而兼容性比较好,跟jQuery有同样的API,只是需要自己设计UI。
压缩后的 zepto.min.js 大小只有24K。
  例如:

绑定事件不同
用 “on”来代替“bind”、“delegate”、”live”。
用 “off”来代替“unbind”、“undelegate”、”die”。
用 “ $.ajax”来代替“$.ajaxJSONP”。
用 “tap”来代替 ”click“,因为click会有200-300ms的延迟。
二、Zepto.js对 CSS 选择器的支持

  1、Zepto.js没有 .innerHeight() .outerWidth() 等四个方法。

  2、支持基本选择器

    ID选择器:$("#foo")

    class选择器:$(".foo")

    标签(元素)选择器:$("div")、$("p")。

    通用选择器:$("*")。

     3、支持层级选择器

    后代选择器:$("foo bar")。

    子元素选择器:$("foo > bar")。

    相邻且靠后选择器:$("foo + bar")。

    同辈且靠后选择器:$("foo ~ bar")。

  4、不支持的选择器

    基本伪类:

      first、:not(selector) 、:even 、:odd 、:eq(index) 、:gt(index) 、:lang1.9+ 、:last 、:lt(index) 、:header、:animated 、:focus1.6+ 、:root1.9+ 、:target1.9+

    内容伪类::contains(text) 、:empty、 :has(selector)、 :parent 。

    可见性伪类::hidden 、:visible 。

    属性选择器:[attribute!=value]。

    表单伪类::input、 :text、 :password、 :radio、 :checkbox、 :submit、 :image、 :reset、 :button、 :file、 :hidden 。

    表单对象属性::selected。

三、Touch 事件

    tap —元素tap的时候触发。

    singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击,使用 tap 代替)。

    longTap — 当一个元素被按住超过750ms触发。

    swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)

Zepto.js API 中文手册:http://mweb.baidu.com/zeptoapi/#on
时间: 2024-08-25 03:01:58

Zepto.js的相关文章

Zepto.js入门介绍

GitHub Zepto Zepto的一些可选功能是专门针对移动端浏览器的:因为它的最初目标在移动端提供一个精简的类似jquery的js库. Zepto不支持旧版本的Internet Explorer浏览器(<10). 不支持jQuery CSS 扩展 > 然而,可选的“selector”模块有限提供了支持几个最常用的伪选择器,而且可以被丢弃,与现有的代码或插件的兼容执行. 如果$变量尚未定义,Zepto只设置了全局变量$指向它本身. > 允许您同时使用的Zepto和有用的遗留代码,例如

学习zepto.js(Hello World)

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用,所以本人会按照API顺序来说明方法如何使用并试着将对于源码的理解写上来; $(): 与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定

zepto.js swipe实现触屏tab菜单

今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功能.前几天,有朋友告诉我百度基于zepto.js做了一个webapp的UI,大家也可以看下:“http://gmu.baidu.com/”,有点像jquery ui的东西,大家有兴趣可以学习啊... 我们今天,用zepto.js的swipe来实现新浪手机网的tab菜单,大家可以先看下新浪的手机版“h

Zepto.js touch模块深入分析 解决手机点击事件

源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ; (function($) { var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture function swipeDirection(x1

zepto.js 处理Touch事件

处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过event.touches[0]来获取属性.重要属性如 下:clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,screenY:触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID 你

zepto.js - 轻量级的移动开发JavaScript框架

Zepto.js  是移动端轻量级的JavaScript框架,实现JQuery的大部分API,针对手机上web开发,轻量级的是相对性的减少用户访问流量 Zepto官网 地址 可以到 github上下载zepto的源码也是进行模块划分的 Zepto 思维导向图: 常用返回对象情况: 1.return zepto.Z(),返回一个空的zepto对象: 2.return $(context).find(selector) 3.return $(document).ready(selector) 4.i

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

scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页底部自动加载下一页并发加载埋点. 实现:首先理解三个概念,分别是contentH,viewH,scrollTop. contentH:即所要滑动的元素内容的高度,包括可见部分以及滚动条下面的不可见部分. ViewH:即我们看到的这个DIV的高度,不包括可见部分也不包括滚动条下面的不可见部分. scr

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

经过查阅资料zepto 和 jquery 的区别后发现是 (1)zepto.js  删去了 jquery 的 innerHeight() 和 innerWidth() 属性  (2)zepto.js和jquery 的事件驱动不一样 所以 用编辑器打开jquery.shCircleLoader.min.js 将 开始的 (function($) { ...  })(window.jQuery); 替换为 Zepto(function($) { ...}); 然后使用crtl+f 搜索关键词 inn

zepto.js touch库

最近在做一个手机版的项目,而做手机网页,那么就会考虑到用轻量级库,用jquery的话,会比较庞大,而我们就选用 zepto.js 来做开发,可是在开发的时候要用到手势事件(比如左右滑动,上下滑动),于是就在网上查了一下 zepto.js 的官网,发现有 touch 事件来模拟手势事件,这个开发就会带来便利,而不用去写JS底层代码:在网上搜罗了一下 zepto.js touch 库,找到了不多 touch.js 的相关信息,真的感觉很少(不知道是不是zepto.js不成熟的表现),终于在网上搜罗到

利用zepto.js实现移动页面图片全屏滑动

HTML <%-- Created by IntelliJ IDEA. User: fanso2o Date: 2017/2/28 Time: 16:09 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html ng-app