移动端开发框架Zepto.js

一、概述

Zepto.js是一个轻量的js库,它与jQuery有类似的API。

zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上。

流行起来的原因:轻量;只支持现代浏览器;非常方便的搭配其他框架(phoneGap)来编写代码;优秀的源代码,性能良好。

zepto和jQuery的对比:

浏览器兼容:zepto偏移动端,jQuery偏PC端;

文件大小:zepto 10k  jQuery 30k  ;

部分API接口:参数和执行结果有可能不一致;

生态圈:jQuery更好;

核心库:zepto核心库的性能要比jQuery优秀;

相关学习网站:http://zeptojs.com/;https://github.com/madrobby/zepto;http://github.e-sites.nl/zeptobuilder/

原文地址:https://www.cnblogs.com/Jeely/p/11051808.html

时间: 2024-10-13 17:23:58

移动端开发框架Zepto.js的相关文章

一款豪华绚丽的移动端图册(zepto.js+photoswipe.js)

应公司要求,开发一款移动端杂志(等同于移动端幻灯片相册,iOS上能轻松滑动缩放,android上也能滑动缩放).网上找了很久没有符合需求的插件,无意间找到了photoswipe,进行改造之后就成了符合自己的移动端图册了. 改造点: 1.原插件默认进入页面是相册列表,返回或者关闭会退回到图册列表,通过追踪找到这个方法并干掉了! 2.新增拖动条跳转(ps:插件默认全屏滑动,该处实现思路是应用ifram定位来实现的,子页面拖动链接跳转对应指定的id): 3.新增当前页显示,插件有该方法: 4.解决io

zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0

移动端zepto.js文件的构建

因为在zepto的官网http://www.zeptojs.cn/#download下载的文件只包括了默认的几个模块,这并不能全部适应我们所需功 能,还需要按自己需要去添加相应模块.所以需要去构建我们自己的zepto.min.js.可以通过nodejs去bulid. 一.安装node.js http://nodejs.org/ 二.从github下载zepto源码 https://github.com/madrobby/zepto 三.打开nodejs命令行,找到zepto解压缩目录 四.修改z

Zepto.js入门介绍

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

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

移动开发js库Zepto.js应用详解

从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛!可是你有没有发现下载链接上面有行小字呢? 在这个 README 里面你会惊奇地发现,Zepto 源码中有 14 个模块,而官网提供的标准版里面只有 7 个模块!而且居然不包含对移动端开发非常重要的 touch 模块(提供对触摸事件的支持)! 所以我的建议是,不要从官网下载,而是从 Github 下载

Zepto.js touch,tap增加 touch模块深入分析

1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中touch库实现了 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap' 这样一些功能. 2.touch库实现'swipe', 'swipeLeft',

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. 例如: 绑定事件不同 用 “