Study JQuery《7、插件》

一、基本概念
 插件plugin也称为扩展，是一种遵循一定规范的应用程序接口编写出来的程序。
二、插件应用
 1、cookie
  引入jquery.cookie.js文件
  $.cookie("cookie_name","cookie_value",{
   expires:7,
   path:"/",
   domain:"jauery.com",
   secure:true
  })
  expires:有效期，单位天，负数为已经过去的天。
  path：cookie的路径，创建该Cookie的页面路径。
  domain：cookie的域名。
  secure:如果设为true，那么此Cookie的传输会要求一个安全协议。
  如：
  $.cookie("myCookie","cookieVal",{path:"/",expires:10});
 2、插件的种类
  封装对象方法的插件：$("id").addClass();
  封装全局函数的插件：$.Ajax();
  选择器插件：$("div:gt(1)");
 3、封装对象方法color插件
  //插件编写
  ;(function($){
   JQuery.fn.extend({
    "color":function(value){
     return this.css("color",value);
    }
   });
  })(JQuery);
  //插件应用
  $(function(){
   $("div").color();//获得color
   $("div").color("red");//设置color
  });
 4、封装对象方法隔行变色插件
  //插件编写
  ;(function($){
   $.fn.extend({
    "BgColor":function(options){
     options = $.extend({
      odd:"odd",
      event:"even"
     },options);
     //在当前表格中查找匹配元素
     $("tbody>tr:odd",this).addClass(options.odd);
     $("tbody>tr:even",this).addClass(options.even);
     return this;//返回this，使方法可链
    }
   });
  })(JQuery);
  //插件应用
  $("table").BgColor().find("th").css("color","red");
 5、封装全局函数左、右去空格插件
  //插件编写
  ;(function($){
   $.extend({
    "ltrim":function(txt){
     return (txt || "").replace(/^\s+/q,"");
    },
    "rtrim":function(txt){
     return (txt || "").replace(/\s+$/q,"");
    }
   });
  })(JQuery);
  //插件应用
  $(function(){
   $.ltrim(" test ");//"test "
   $.rtrim(" test ");//" test"
  });
 6、封装自定义选择器between
  gt:function(a,i,m){
   return i > m[3]-0;
  }
  a：指各当前遍历到的DOM元素。
  i：当前遍历到DOM元素的索引。
  m：较特别。
   m[0]：整个选择器，":gt(1)"这部分。
   m[1]：引导符，":"这部分。
   m[2]：选择器函数，"gt"这部分。
   m[3]：括号内部，"1"这部分。
  特例":l(ss(dd))"中
  m[0]=":l(ss(dd))",m[1]=":",
  m[2]="l",m[3]="ss(dd)",
  m[4]="(dd)"
  //插件编写
  ;(function($){
   $.extend(JQuery.expr[":"],{
    between:function(a,i,m){
     var tmp = m[3].split(",");//m[3]="2,5"
     return (tmp[0]-0 < i) && (i < tmp[1]-0);
    }
   });
  })(JQuery);
  //插件应用
  $(function(){
   $("div:between(2,5)").css("color","red");
  });

--------------------------------------------------------------------------------------------------------------------------------