移动开发流量省起来之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 ...
随机推荐
- Java集合源码学习（四）HashMap分析
ArrayList.LinkedList和HashMap的源码是一起看的,横向对比吧,感觉对这三种数据结构的理解加深了很多. >>数组.链表和哈希表结构 数据结构中有数组和链表来实现对数据 ...
- 为 ASP.NET Web API 创建帮助页面（转载）
转载地址:http://www.asp.net/web-api/overview/creating-web-apis/creating-api-help-pages 当创建web API 时,经常要创 ...
- sqlplus使用（一）
一,sqlplus 环境变量 sqlplus的环境变量(来自SQL*Plus® User's Guide and Reference Release 11.2) Parameter or Variab ...
- 查看Linux分区格式
第一种方法: 使用mount [root@ol6-121-rac1 ~]# mount /dev/mapper/vg_ol6121rac1-lv_root on / type ext4 (rw) ...
- JavaScript - 事件流
事件流 事件冒泡就是事件沿DOM树向上传播,在没一级节点上都会发生,直至传播到document对象. 事件捕获正好相反,但是老版本的浏览器不支持,因此很少有人使用事件捕获. 事件处理程序 HTMl 事 ...
- 您的 PHP 似乎没有安装运行 WordPress 所必需的 MySQL 扩展”处理方法
转自:http://www.xuebuyuan.com/1549022.html 这已经是一个老掉牙的问题了,部分人使用自己的服务器安装WordPress程序之后,会出现“您的 PHP 似乎没有安装运 ...
- How to use Ajax on Visualforce page on Salesforce platform
Just use Ajax pattern to call object data from server on visualforce page. Following is the Asynchro ...
- button hot key 热键
<Button x:Name="ScanIDButton" Margin="11,0,0,0" IsEnabled="{Binding Elem ...
- ios摇一摇截屏代码
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...
- 导出word使用模版
在我们做我们的小组项目的时候,刚开始的时候我们用到的是Mvc+EF,用上了我们的ITOO框架.在最开始的计划,我们要用到瑞郎报表.可是呢,由于工期原因以及技术暂时没有实现,我们不得不想一个比较折中的方 ...