本文介绍了移动端前端框架Zepto，它是一个轻量级的JavaScript库，兼容jQuery语法，专为现代智能手机浏览器设计。文章详细阐述了Zepto的优势、下载方式，以及与jQuery的区别，包括DOM操作、事件触发等方面的对比。同时，文章还探讨了Zepto的独有特性，如CSS transform和Touch事件，包括translate、rotate、scale等，并提供了相关案例。
文章目录
一、Zepto框架
Zepto是一个轻量级的针对现代高级浏览器的javaScript库。
Zepto.js是专门为现代智能手机浏览器推出的javascript框架。
Zepto的一些的可选功能专门针对移动浏览器，因为最初的目标是专门为移动网站提供一个精简的jQuery替代方案。
二、Zepto框架的优势
- 更小型的javascript框架。
- 完全兼容jQuery语法。
- 精简大量浏览器兼容性代码，更轻量。
- 封装了移动端手势。
三、Zepto框架下载
1. 网站
www.zeptojs.cn
2. 引入
<body>
<script src=zepto.min.js></script>
</body>
四、Zepto和jQuery的区别
1. 针对移动端程序
Zepto有一些基本的触摸事件可以用来做触摸屏交互，Zepto是不支持IE浏览器的。
2. DOM操作区别
添加id时jQuery不会生效，而Zepto会生效
//jQuery
(function($){
$(function(){
var $insert = $('<p>jQuery 插入</p>',{
id: 'insert-by-jquery'
});
$insert.appendTo($('body'));
});
})(window.jQuery);
//Zepto
Zepto(function($){
var $insert = $('<p>Zepto 插入 </p>',{
id: 'insert-by-zepto'
});
$insert.appendTo($('body'));
});
//< p id="insert-by-zepto">Zepto 插入</p>
3. 事件触发的区别
使用jQuery时load事件的处理函数不会执行，使用Zepto时load事件的处理函数会执行。
Zepto(function($){
$script=$('<script/>',{
scr: "http://cdn.amazeui.org/amazeui/1.0.0/js.amazeui.js',
id: 'ui-zepto'
})
$script.appendTo($('body'));
$script.on("load",function(){
console.log('zepto script loaded");
})
4.事件委托区别
var $doc=$(document);
$doc.on('click','.a',function
最低0.47元/天 解锁文章
3974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
