移动开发流量省起来之Zepto
一张图说明Zepto.js的优势：
选择器
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的更多相关文章
- 手机开发类型jquery的框架Zepto（API）
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. http://www.html-5.cn/M ...
- Android开发——流量统计
1. 获取应用UID 在设备的proc目录下我们可以看到一些比较熟悉的目录/文件,比如data,system,cpuinfo(获取CPU信息)等,其中uid_stat的各个以应用Uid命名的目录下,便 ...
- 移动端开发：使用jQuery Mobile还是Zepto
原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobil ...
- Zepto
移动开发流量省起来之Zepto 事情是这样的:最近开发的一个手机网站客户反应访问起来特别慢,刷了半天才能看到页面,然后问我们是不是网站出问题了.于是我赶紧找了各种手机测试一下,没有问题,首先排除程序错 ...
- 【Hadoop离线基础总结】流量日志分析网站整体架构模块开发
目录 数据仓库设计 维度建模概述 维度建模的三种模式 本项目中数据仓库的设计 ETL开发 创建ODS层数据表 导入ODS层数据 生成ODS层明细宽表 统计分析开发 流量分析 受访分析 访客visit分 ...
- zepto源码学习-01-整体感知
在公司一直做移动端的项目,偶尔会做点PC端的东西,但基本上都是和移动端打交道. 移动端嘛必须上zepto,简单介绍下Zepto:它是一个面向高级浏览器的JavaScript框架的,实现JQuery的大 ...
- Zepto的天坑汇总
前言 最近在做移动端开发,用的是zepto,发现他跟jquery比起来称之为天坑不足为过,但是由于项目本身原因,以及移动端速度要求的情况下,也只能继续用下去. 所以在这里做一下汇总 对img标签空sr ...
- 使用MVVM框架（avalonJS）进行快速开发
背景 在运营活动开发中,因为工作的重复性很大,同时往往开发时间短,某些情况下也会非常紧急,导致了活动开发时间被大大压缩,同时有些活动逻辑复杂,数据或者状态变更都需要手动渲染,容易出错,正是因为这些问题 ...
- android app 流量统计
https://blog.csdn.net/yzy9508/article/details/48300265 | android 数据流量统计 - CSDN博客https://blog.csdn.ne ...
随机推荐
- 与你相遇好幸运，Tippecanoe用法
//todo 基本用法: tippecanoe -o file.mbtiles [file.json ...] 参数解释: <必须> -o myFileName.mbtiles 或者 ...
- Pyqt QSS简单的Ui美化
什么是QSS QSS 是Qt StyleSheet 的简称,意思就是qt的样式表格,StyleSheet 可以像CSS一样的写样式.使页面美化跟代码层分开,利于维护. QSS的语法 同css一样,他也 ...
- Solr auto commit 配置
为了解决写索引时频繁提交带来的效率问题,考虑使用自动提交. 在solrconfig.xml中增加以下代码: <updateHandler class="solr.DirectUpdat ...
- 等号赋值与memcpy的效率问题
转自:http://www.aiuxian.com/article/p-1309055.html 偶尔看到一个说法,说,小内存的拷贝,使用等号直接赋值比memcpy快得多.结合自己搜集到的资料,整理成 ...
- web.xml中同一servlet/filter配置多个url-pattern
转自:http://blog.sina.com.cn/s/blog_4c2c2a0c0100dh67.html 若你的servlet要多个地址,或你的filter需要过滤不同的url如有*.jsp,* ...
- Android JNI开发生成.h头文件问题（转）
在JNI开发中,首先要将建立的anroid类编译成.h文件,编译用到命令javah,由于第一次用,以前对java的编译过程也不怎么了解,所以走了好多弯路,网络没有对这一步的详细介绍,这里讲一下: 通过 ...
- java基础之——类的初始化顺序
由浅入深,首先,我们来看一下,一个类初始化有关的都有些啥米: 静态成员变量.静态代码块.普通成员变量.普通代码块.构造器.(成员方法?貌似跟初始化没有啥关系) 现在我们来看看她们的初始化顺序, 从性质 ...
- C语言中运算符的口决
- 几种方式实现Javaweb页面跳转
背景: 自己经手的一个java项目要实现带参页面跳转和页面跳转,完成任务后,总结一下自己知道了的几种方式. 实现: 首先我们有两大种方式来实现页面跳转:1.JS(javascript):2 ...
- js倒计时（可定义截止日期）
<div id="times_wrap" class="time_num"> 距离结束时间: <div class="time_w& ...