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() 和 ...
随机推荐
- VS2010或2012中，如何设置代码格式化？
ctrl + E,D菜单在 编辑-->高级 里面 第一个菜单项
- 在SSMS里查看TDS数据包内容
原文:在SSMS里查看TDS数据包内容 在SSMS里查看TDS数据包内容 摘抄自<SQLSERVER2012实施与管理实战指南> 要具体查看TDS数据库的内容,我们可以: 用NETWORK ...
- oracle一视图性能问题
oracle一些性能视图的解释 --关于是否收集 timed_statistics参数:用于决定是否收集相关的时间参数,true为收集.如果该参数设为false,则等待事件相关视图也就无法收集到数据 ...
- MVC 使用IBatis.net
IBatis.net在asp.net MVC下的使用 IBatis.net 是2001年发起的开源项目,它是一个轻量级的ORM框架,现在IBatisNET已经是属于Apache下的一个子项目了,最新版 ...
- 使用CASE表达式替代SQL Server中的动态SQL
原文:使用CASE表达式替代SQL Server中的动态SQL 翻译自: http://www.mssqltips.com/sqlservertip/1455/using-the-case-expre ...
- 在CMD命令行和PowerShell中实现复制粘贴功能
在CMD命令行和PowerShell中实现复制粘贴功能 常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...
- Winpcap网络编程十之Winpcap实战,两台主机通过中间主机通信
注:源码等等的我不会全然公开的,此篇文章写出来为大家的网络编程或者课程设计提供一定的思路.. 好,本次我们须要完毕的任务是: 完毕两台主机通过中间主机的数据通信(网络层) 添加基于IP地址的转发功能 ...
- 如何在SSIS的脚本组件中访问变量
原文:如何在SSIS的脚本组件中访问变量 这是一个小问题,我们在SSIS的设计中很多地方都会用到变量,我习惯性地将"变量"和"表达式"称为SSIS的灵魂,虽然不 ...
- 超赞的CSS3进度条 可以随进度显示不同颜色
原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...
- HDU1068/POJ1466_Girls and Boys(二分图/最大独立集=N-最大匹配)
解题报告 http://blog.csdn.net/juncoder/article/details/38160591 题目传送门(POJ) 题目传送门(HDU) 题意: 求满足条件的最大集合:集合内 ...