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>
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 OS13 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 type21 alert($.os.iphone);22 alert($.os.ipad);23 alert($.os.ipod); // [v1.1]24 alert($.os.touchpad);25 alert($.os.kindle);26 27 // specific browser28 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吧。 总的来说,Zepto像是一个Jquery体系的一个精简版,专注于移动端,兼顾主流PC浏览器,对于Jquery库的文件大小问题我猜想Jquery在发展的同时可能因为很多历史遗留问题还有需要兼顾各种并不是主流的浏览器导致代码略臃肿。新闻热点
疑难解答