手机端的jquery
1 介绍
- 1: 网址:http://www.bootcss.com/p/zeptojs/
- 2: Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库
- 3: 大小只有jQuery的1/3(省流量)
2 使用
- 1: jQuery怎么使用,zepto就怎么使用
- 2:需要功能就添加对应的模块即可
- 3:最基本的zepto.js中的只有一部分功能,如果需要其他的功能.根据上表,直接引入相关的文件即可
3 常见模块
1 : Touch.js
2 : Detect.js
3 : Fx.js
4 : Fx_methods.js
4 移动端的支持检查
- 在需要的地方加入detect.js.它会在$上添加两个属性:os&&browser
图片 - 所有的手机浏览器,都使用webkit内核.所以在移动端做网站,考虑浏览器的兼容性就少了很多(不必考虑IE系列)
5 拓展zepto的功能
- 插件&添加新的方法
※※案例↓
方法一
:(function($){
$.abcd = function(){//属性直接加在$上,相当于是静态方法,类似于(Math.pl)
console.info('abcd');
}
$.a = '你好';
$.fn.abcd = function(a){//添加的属性在zepto的对象上都可以使用(是加在了__proto__上)
return a*10;
}
})(zepto);
console.info( $.a )
$.abcd();
console.info( $('div').abcd(20) )
chrome输出结果:你好\abcd\200
※※案例↓
方法二
:(function($){
$.extend($.fn,{
"a":function(){console.info("a",this)},
"b":function(){console.info("b",this)}
);
})(zepto);
console.info( $('div') )
分析:
$.extend(对象1,对象2):作用是把对象2合并到对象1中
$.extend($.fn,{键值对});给$.fn添加新的属性.
