Zepto
移动开发流量省起来之Zepto
选择器
1 <html><body>
2 <ul id="items">
3 <p>This is it!</p>
4 </ul>
5 <script src="./zepto1.1.6.js"></script>
6 <script>
7 alert($("#items").html());
8 </script>
9 </body></html>
追加
1 <html><body>
2 <ul id="items">
3 <p>This is it!</p>
4 <p>Hello</p>
5 </ul>
6 <script src="./zepto1.1.6.js"></script>
7 <script>
8 $('ul').append('<p>new list item</p>')
9 </script>
10 </body></html>
克隆 （注：zepto的clone()方法不能像jquery的clone()可以同时克隆data和绑定事件）
1 <html><body>
2 <ul id="items">
3 <p>This is it!</p>
4 <p>Hello</p>
5 </ul>
6 <script src="./zepto1.1.6.js"></script>
7 <script>
8 $('ul').append($("#items").clone())
9 </script>
10 </body></html>
ajax
1 $.ajax({
2 type: 'GET',
3 url: '/projects',
4 data: { name: 'Zepto.js' },
5 dataType: 'json',
6 timeout: 300,
7 context: $('body'),
8 success: function(data){
9 this.append(data.project.html)
10 },
11 error: function(xhr, type){
12 alert('Ajax error!')
13 }
14 })
15
16 $.ajax({
17 type: 'POST',
18 url: '/projects',
19 data: JSON.stringify({ name: 'Zepto.js' }),
20 contentType: 'application/json'
21 })
因为Zepto是jQuery-compatible的，所有如果你会使用jquery，那么你已经会了Zepto。以上这些用法基本与jquery一致，下面说几个我看到的与jquery不同的地方。
1.Zepto基础库不支持很多css选择器
比如很常用的$(":selected"),$("p:eq(1)"),$("li:first")这类，不过Zepto的库提供很多拓展的模块，你只需要在他的官网上按需要编译你需要的模块然后保存为zepto.js即可，或者直接使用在线编译，其中如果开启了selector模块，你就能支持大部分的css选择器了。
2.如果你开启了detect模块，那么你就可以用Zepto判断用户设备、操作系统和浏览器的功能(测试了几个还算可以用，不知是否准确)
1 <html><body>
2 <ul id="items">
3 <p>This is it!</p>
4 </ul>
5 <!-- 该js必须开启了detect模块 -->
6 <script src="./zepto.js"></script>
7 <script>
8 // general device type
9 alert($.os.phone);
10 alert($.os.tablet);
11
12 // specific OS
13 alert($.os.ios);
14 alert($.os.android);
15 alert($.os.webos);
16 alert($.os.blackberry);
17 alert($.os.bb10);
18 alert($.os.rimtabletos);
19
20 // specific device type
21 alert($.os.iphone);
22 alert($.os.ipad);
23 alert($.os.ipod); // [v1.1]
24 alert($.os.touchpad);
25 alert($.os.kindle);
26
27 // specific browser
28 alert($.browser.chrome);
29 alert($.browser.firefox);
30 alert($.browser.safari); // [v1.1]
31 alert($.browser.webview); // (iOS) [v1.1]
32 alert($.browser.silk);
33 alert($.browser.playbook);
34 alert($.browser.ie); // [v1.1]
35 </script>
36 </body></html>
3.如果开启了form模块，就可以对你的表单进行数据序列化，类似jquery的jquery form插件
1 <html><body>
2 <form>
3 <input name="user" value="xxx" type="text"/>
4 <input name="password" value="123" type="password"/>
5 </form>
6 <!-- 该js必须开启了form模块 -->
7 <script src="./zepto.js"></script>
8 <script>
9 var formData = $('form').serializeArray();
10 alert(formData[0]['name']);
11 alert(formData[1]['name']);
12 alert(formData[0]['value']);
13 alert(formData[1]['value']);
14 </script>
15 </body></html>
4.如果开启了touch模块，你就可以使用tap(触屏点击) 和 swipe(触屏滑动),类似Jquery mobile 插件
1 <html><body>
2
3 <style>
4 .delete { display: none; }
5 #items{font-size:30px;}</style>
6
7 <ul id="items">
8 <li>List item 1 <span class="delete">DELETE</span></li>
9 <li>List item 2 <span class="delete">DELETE</span></li>
10 </ul>
11
12 <!-- 该js必须开启了touch模块 -->
13 <script src="./zepto.js"></script>
14 <script>
15 $('#items li').swipe(function(){
16 $('.delete').hide()
17 $('.delete', this).show()
18 })
19
20 $('.delete').tap(function(){
21 $(this).parent('li').remove()
22 })
23 </script>
24 </body></html>
注：Zepto的swipe事件在某些Android手机(如安卓4.4)仍存在不起作用的情况。期待Zepto修复这个bug。
Zepto的更多相关文章
- TypeScript为Zepto编写LazyLoad插件
平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...
- zepto/jQuery、AngularJS、React、Nuclear的演化
写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- jquery和zepto的扩展方法extend
jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...
- [原创]zepto打造一款移动端划屏插件
最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...
- zepto之tap事件点透问题分析及解决方案
点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- zepto返回顶部动画
点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...
- 关于zepto（相似于jquery、jQuery用于网页浏览器，zepto用于手机浏览器）
http://blog.csdn.net/kongjiea/article/details/42522305 -----关于zepto和jquery的差别 jQuery 使用 .width() 和 ...
随机推荐
- C# WinForm 拖动无边框窗体 改变无边框窗体尺寸
经常遇到这种情况.窗体的边框去掉了.然后种种问题就出来了:不能拖动.不能改变窗体大小.不能．．．．．．当然.肯定有解决方案滴*^_^*今天的目标就是:可以直接拖动没有边框的窗体.可以直接拉拽窗体改变其 ...
- Java设计模式菜鸟系列(十四)代理模式建模与实现
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39856435 代理模式(Proxy):代理模式事实上就是多一个代理类出来,替原对象进行一些 ...
- all about AIX MPIO
Multipath I/O (多路径) 在计算机存储技术里,多路径提供了容错和性能提高,在计算机系统里CPU有多条物理路径通道,块存储设备通过总线,控制器,交换设备以及桥接设备来连接. ...
- Windows在生产体系Android开关机动画
在Windows根据系统.办Android开关机动画,几个需要注意的问题: 1.压缩的选择 2.压缩的格式: 版权声明:本文博客原创文章,博客,未经同意,不得转载.
- unix pwd使用命令
[语法]: pwd [说明]: 此命令会显示当前的工作文件夹 []: pwd 这显示当前工作文件夹 版权声明:本文博主原创文章.博客,未经同意不得转载.
- Cookie和Session (转)
Session和Cookie在网站开发中是用来保存用户与后端服务器的交互状态.它们有各自的缺点和优点.而且,他们的优点和应用场景是对立的. Cookie 完整地描述:当一个用户通过HTTP访问一个 ...
- 深入了解C++中间mutablekeyword
深入理解C++中的mutablekeyword kezunhai@gmail.com http://blog.csdn.net/kezunhai keywordmutable是C++中一个不 ...
- 但从谈论性能点SQL Server选择聚集索引键
简单介绍 在SQL Server中,数据是按页进行存放的.而为表加上聚集索引后,SQL Server对于数据的查找就是依照聚集索引的列作为keyword进行了. 因此对于聚集索引的选择对性能的影响就变 ...
- linux+win7双系统重装win7修复grub的办法（转）
本人是debian+win7的双系统, 下面介绍下重装win7的整个过程以及遇到的一些小问题,在查阅相关博客和朋友的帮助下成功修复, 记录下以便以后有不时之需, 也希望能帮助到遇到同样问题的朋友! 首 ...
- Coco2d-x android win7 Python 游戏开发环境的搭建
1:我用的电脑配置 win7 3 核 内存8G 桌面.一直想学习Coco2d 游戏开发,所以,一个星期后,需要找到,最终建立了一个良好的环境 2:我使用的版本号版本号,至于建筑android开发环境略 ...