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不同的地方。
比如很常用的$(":selected"),$("p:eq(1)"),$("li:first")这类，不过Zepto的库提供很多拓展的模块，你只需要在他的官网上按需要编译你需要的模块然后保存为zepto.js即可，或者直接使用在线编译，其中如果开启了selector模块，你就能支持大部分的css选择器了。
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>
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>
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。
这么多有用的模块如果用jquery来实现，除了需要加载那个压缩后还有90多KB的核心库外，我还要加载各种插件诸如jquery mobile,jquery form,jquery detect等等，这个大小不用我说，要多臃肿多臃肿，而Zepto全部开启模块后只有39KB，所以说作为业绩良心省流量的手机网站还是使用Zepto吧。
相关文章
