zepto
1,简介
这是一个阉割版的JQuery,但是功能比jquery强大
zepto是一个轻量级的仅仅针对现代高级浏览器的js库,如果你会使用jquery就一定会用zepto,
zepto原理:只针对高级浏览器,对于ie678都不兼容,也就是说zepto相比jquery少了兼容性代码
语法:
与jquery基本一样
$("div").css('color','red');
$("span").addClass('cur').siblings().removeClass('cur');
注意:对于jquery自定义的部分选择器,zepto是不支持的
2,zepto不支持的选择器
$('div:odd')
$('div:even')
$('div:first')
$('div:eq(3)')
$('div:lt(3)')
$('div:gt(3)')
css3的选择器都是支持的
$('div:first-of-type')
$('div:last-of-type')
$('div:nth-of-type(2n)')
原因:
Zepto的$()方法底层是querySelectorAll 支持的写法,
querySelectorAll 支持的写法,zepto都不支持,所以Zepto直接放弃了低版本的浏览器
3.zepto动画
http://www.css88.com/doc/zeptojs_api/#$
zepto是一个模块化的库,为了让使用者的文件达到最大的精简,zepto将用户使用的功能封装为模块,可以让用户自由选择功能,进行配置
打开zepto中文官网,找到模块化分类,需要使用哪一个模块就打开哪一个,将功能模块化代码复制到zepto的框架中;
动画对比:
jquery动画:定时器
velocity动画:定时器
zepto动画:过渡原理
zepto中没有setInterval定时器函数,所以zepto是使用过度原理实现的动画,
好处:
不抖动,不抽搐,时间准确,地点准确,利用了浏览器内核的C++底层实现的动画,需要在Zepto框架中加入fx,加入了fx nethod 可实现基本动画方法:
框架对比:
jquery1.x:兼容所有浏览器,操作方便,功能齐全,但是不能实现背景动画和3D动画
velocity;可以独立运行,也可以依赖jquery,扩展jquery动画,增加背景和3D动画
zepto:jquery的阉割版本,不兼容低版本浏览器,动画基于过渡实现,能够完成包括背景动画和3D动画在内的所有动画
jQuery2.x:类似与zepto,但动画依旧是定时器,仍然不支持背景和3D动画
4,zepto事件
基本支持所有原生事件
$("div").on('touchstart',function(){});
1,简介
这是一个阉割版的JQuery,但是功能比jquery强大
zepto是一个轻量级的仅仅针对现代高级浏览器的js库,如果你会使用jquery就一定会用zepto,
zepto原理:只针对高级浏览器,对于ie678都不兼容,也就是说zepto相比jquery少了兼容性代码
语法:
与jquery基本一样
$("div").css('color','red');
$("span").addClass('cur').siblings().removeClass('cur');
注意:对于jquery自定义的部分选择器,zepto是不支持的
2,zepto不支持的选择器
$('div:odd')
$('div:even')
$('div:first')
$('div:eq(3)')
$('div:lt(3)')
$('div:gt(3)')
css3的选择器都是支持的
$('div:first-of-type')
$('div:last-of-type')
$('div:nth-of-type(2n)')
原因:
Zepto的$()方法底层是querySelectorAll 支持的写法,
querySelectorAll 支持的写法,zepto都不支持,所以Zepto直接放弃了低版本的浏览器
3.zepto动画
http://www.css88.com/doc/zeptojs_api/#$
zepto是一个模块化的库,为了让使用者的文件达到最大的精简,zepto将用户使用的功能封装为模块,可以让用户自由选择功能,进行配置
打开zepto中文官网,找到模块化分类,需要使用哪一个模块就打开哪一个,将功能模块化代码复制到zepto的框架中;
动画对比:
jquery动画:定时器
velocity动画:定时器
zepto动画:过渡原理
zepto中没有setInterval定时器函数,所以zepto是使用过度原理实现的动画,
好处:
不抖动,不抽搐,时间准确,地点准确,利用了浏览器内核的C++底层实现的动画,需要在Zepto框架中加入fx,加入了fx nethod 可实现基本动画方法:
框架对比:
jquery1.x:兼容所有浏览器,操作方便,功能齐全,但是不能实现背景动画和3D动画
velocity;可以独立运行,也可以依赖jquery,扩展jquery动画,增加背景和3D动画
zepto:jquery的阉割版本,不兼容低版本浏览器,动画基于过渡实现,能够完成包括背景动画和3D动画在内的所有动画
jQuery2.x:类似与zepto,但动画依旧是定时器,仍然不支持背景和3D动画
4,zepto事件
基本支持所有原生事件
$("div").on('touchstart',function(){});