jQuery与Zepto的异同
一. 同
Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小。Zepto最大的优势是它的文件大小,只有8k多,是目前功能完备的库中最小的一个,尽管不大,Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Zepto都有,Zepto中还有一些jQuery中没有的。另外,因为Zepto的API大部分都能和jQuery兼容,所以用起来极其容易,如果熟悉jQuery,就能很容易掌握Zepto。你可用同样的方式重用jQuery中的很多方法,也可以方面地把方法串在一起得到更简洁的代码,甚至不用看它的文档。
二. 异
1,针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件),Zepto是不支持IE浏览器的,这不是Zepto的开发者Thomas Fucks在跨浏览器问题上犯了迷糊,而是经过了认真考虑后为了降低文件尺寸而做出的决定,就像jQuery的团队在2.0版中不再支持旧版的IE(6 7 8)一样。因为Zepto使用jQuery句法,所以它在文档中建议把jQuery作为IE上的后备库。那样程序仍能在IE中,而其他浏览器则能享受到Zepto在文件大小上的优势,然而它们两个的API不是完全兼容的,所以使用这种方法时一定要小心,并要做充分的测试。
2,Dom操作的区别:添加id时jQuery不会生效而Zepto会生效。
(function($) {
$(function() {
var $insert = $('<p>jQuery 插入</p>', {
id: 'insert-by-jquery'
});
$insert.appendTo($('body'));
});
})(window.jQuery);
// <p>jQuery 插入<p> 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 事件的处理函数会执行。
(function($) {
$(function() {
$script = $('<script />', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
id: 'ui-jquery'
}); $script.appendTo($('body')); $script.on('load', function() {
console.log('jQ script loaded');
});
});
})(window.jQuery); Zepto(function($) {
$script = $('<script />', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/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 () {
alert('a事件');
$(this).removeClass('a').addClass('b');
});
$doc.on('click', '.b', function () {
alert('b事件');
});
在Zepto中,当a被点击后,依次弹出了内容为”a事件“和”b事件“,说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发.a上面的委托弹出”a事件“。Zepto中,document上所有的click委托事件都依次放入到一个队列中,点击的时候先看当前元素是不是.a,符合则执行,然后查看是不是.b,符合则执行。而在jQuery中,document上委托了2个click事件,点击后通过选择符进行匹配,执行相应元素的委托事件。
5,width()和height()的区别:Zepto由盒模型(box-sizing)决定,用.width()返回赋值的width,用.css('width')返回加border等的结果;jQuery会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border)。
6,offset()的区别:Zepto返回{top,left,width,height};jQuery返回{width,height}。
7,Zepto无法获取隐藏元素宽高,jQuery 可以。
8,Zepto中没有为原型定义extend方法而jQuery有。
9,Zepto 的each 方法只能遍历 数组,不能遍历JSON对象。
10,Zepto在操作dom的selected和checked属性时尽量使用prop方法,在读取属性值的情况下优先于attr。Zepto获取select元素的选中option不能用类似jQuery的方法$('option[selected]'),因为selected属性不是css的标准属性。应该使用$('option').not(function(){ return !this.selected })。
10,Zepto不支持的选择器:
三. 用jQuery写插件
;(function($){
$.fn.extend({
highLight: function(options){
if(!isValid(options)){
return this;
}
var opts = $.extend({}, defaults, options);
return this.each(function(){
var $this = $(this);
$this.css({
backgroundColor: opts.background,
color: opts.color
})
var markup = $this.html();
markup = $.fn.highLight.format(markup);
$this.html(markup);
})
}
});
var defaults = {
color: '#fff',
background: '#000'
};
$.fn.highLight.format=function(str){
return '<strong>'+str+'</strong>'
}
function isValid(options){
return !options || (options && typeof options === 'object') ? true: false
}
})(jQuery) // 调用
$.fn.highLight.format = function(txt){
return '<i>'+txt+'</i>'
}
$('p').highLight({ color: 'red', background: '#ccc' })
jQuery与Zepto的异同的更多相关文章
- jquery和zepto的异同
相同点 相同点: zepto: 是jquery 的 阉割版 是为移动端开发的库 jQuery的轻量级替代品.文件大小比较小 只有8k左右 ,是目前功能库中最小的一个,尽管不大,zepto 所提供的工具 ...
- jquery和zepto的扩展方法extend
jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...
- HBuilder支持jquery、zepto、angular、ext、dojo 等js框架的提示吗
HBuilder有通行的js扫描分析提示,大部分js库都可以方便的提示.但js是一门超级灵活的语言,通行分析有时分析的不够完美,如果对框架做单独优化配置,可以有更好的提示.DCloud官方对jquer ...
- jQuery与Zepto
jQuery和Zepto是我比较常用的插件.其实用法差不太多,可以说Zepto是jQuery的轻量级替代品,但是不要认为Zepto就没有jQuery好用,因为Zepto有jQuery没有的功能,就是移 ...
- 解决jquery与zepto等其它库冲突兼容的问题
解决jquery与zepto等其它库冲突兼容的问题;(function ($) { }) (jQuery); ;(function ($) { }) (Zepto); 在Bootstrap ...
- zepto jquery和zepto的区别?
jQuery 由于强大的生命力基本上是一个事实标准,所以大部分工具 lib 在 DOM 操作.动画等功能上或多或少都会是 jQuery-like 的. Zepto 的 API 就是完全兼容 jQuer ...
- jQuery和Zepto冲突问题【解决】
特殊操作下,项目中同时引入这两个文件时,往往会有些冲突,应该加一句代码避免冲突 <script src="~/js/jquery-2.1.4.js"></scri ...
- JQuery和Zepto的差异(部分)
1.width()/height() Zepto.js: 由盒模型(box-sizing)决定 jQuery: 忽略盒模型,始终返回内容区域的宽/高(不包含 padding.border) jQuer ...
- 复习 | 重温jQuery和Zepto的API
jq和zepto很相似有许多共同的api,zepto也出了很多与jq不一样的api,总的来说,两者更相似,但是zepto更轻量一点,正好公司也在用,复习这两个没错 jq中的zepto的事件和ajax我 ...
随机推荐
- 在Excel表里面插入背景图
工作中我们会经常用到MS Excel,通常我们打开MS Excel,里面的工作表都是空白单调的背景.当然了,MS Excel可以在工作簿里面插入背景图片.那么问题来了,如果你没有安装Microsoft ...
- objective-c 语法快速过(4)
oc 里的字符串 字符串的快速创建(最简单的方法) NSStirng *str = @“Hello”;//oc的字符串都是@“”形式的 oc的字符串也是类的对象,是NSString类的对象,创建没有那 ...
- RMAN Catalog创建、配置和管理
环境:RHEL6.4 + Oracle 11.2.0.4 一.创建数据库catdb 1.1 官档的建库脚本示例 1.2 根据我实际环境修改如下项 1.3 创建必要目录并赋予权限 1.4 执行脚本建库 ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
- JDBC连接SQL Server代码模板
* JDBC连接SQL Server数据库 代码模板* Connection: 连接数据库并担任传送数据的任务:* Statement : 执行SQL语句:* Re ...
- Android之仿ele地图定位效果
PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...
- 3.Code-First 约定(EF Code-First系列)
前面,我们已经了解了Code-First利用领域类,怎么为我们创建数据库的简单示例.现在我们来学习一下Code-First约定吧. 什么是约定 约定说白了,就是基于一套规矩办事,这里就是基于你定义好的 ...
- 数据库排序sql,order by
一开始我认为 SELECT * FROM dbo.T_User ORDER BY CreateTime ,IsDel DESC 的执行顺序是先按创建时间倒序排序,再按isdel倒序排序,所以我就没再S ...
- C#基础-FileStream
一.FileStream的基础知识 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanWrite 判断当前流是否支持写入, ...
- 生成树形结构的json字符串代码(c#)供前端angular tree使用.
框架是使用EF6.0.可以针对返回的值使用Newtonsoft.Json.dll(百度搜一下)来对返回的值序列化为json字符串,如果对以下值那就是使用JsonConvert.SerializeObj ...