zepto(手机端的jQuery)

手机端的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添加新的属性.