jQuery 07 编写插件

编写插件的目的是封装已经有的一系列方法或函数，以便在其他地方重复使用。jQuery插件主要分为3种类型：

1     对象方法的插件，将对象方法封装起来，通过选择器获取的jQuery对象进行操作，是最常见的一种插件。有相当一部分的jQuery的方法，都是通过这样方式插在内核上的，例如parent(),appendTo()。

2     全局函数的插件，可以将独立的函数加到jQuery命名空间之下。

3     选择器插件，个别情况下，会用到选择器插件。

---

jQuery插件的文件名推荐为 jquery.[插件名].js

所有的对象方法都应当附加在 jQuery.fn对象上，所有的全局函数都应到附加在 jQuery对象本身上。

在插件内部， this指向的是当前通过选择器获取的jQuery对象

可以通过this.each来遍历所有元素

所有的方法或函数插件，都应当以分号结尾。为了更稳妥，甚至可以在插件头部先加上一个分号。

插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的数量。

避免在插件内部使用$作为jQuery对象的别名，应该使用完整的jQuery来表示。也可以用闭包方式。

---

常见的插件格式

;(function($){

          //在此处编写jQuery插件代码

})(jQuery);

---

jQuery提供了两个用于扩展jQuery功能的方法， jQuery.fn.extend()和 jQuery.extend()方法。

jQuery.extend()  经常用于设置插件方法的默认参数。

          function(options){
                    //设置默认值
                    options= jQuery.extend()( {

                         odd:"odd",     /* 偶数行样式*/
                         even:"even", /* 奇数行样式*/
                         selected:"selected" /* 选中行样式*/
                      }, options);

---

封装jQuery对象方法的插件

     <script type="text/javascript">
     //插件编写
       ;(function($) {
            jQuery.fn.extend({
                 "color":function(value){
                    return this.css("color",value);
               }
            });
       })(jQuery);

     //插件应用
     $(function(){
        $("div").click(function(){
               var color = $(this).text();
               $("div"). color( color ); //设置所有的div的字体颜色
        })
     })
     </script>

---

<script type="text/javascript">
     //插件编写
       ;(function($) {
            $.fn.extend({
               "alterBgColor" :function(options){
                    //设置默认值
                      options=$.extend({
                         odd:"odd",     /* 偶数行样式*/
                         even:"even", /* 奇数行样式*/
                         selected:"selected" /* 选中行样式*/
                      },options);
                    $("tbody>tr:odd",this).addClass( options.odd);
                    $("tbody>tr:even",this).addClass(options.even);
                    $('tbody>tr',this).click(function() {
                         //判断当前是否选中
                         var hasSelected=$(this).hasClass(options.selected);
                         //如果选中，则移出selected类，否则就加上selected类
                         $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                              //查找内部的checkbox,设置对应的属性。
                              .find(':checkbox').attr('checked',!hasSelected);
                    });
                    // 如果单选框默认情况下是选择的，则高色.
                    $('tbody>tr:has(:checked)',this).addClass(options.selected);
                    return this;  //返回this，使方法可链。
                 }
          });
       })(jQuery);

     //插件应用
     $(function(){
          $("#table2")
                    . alterBgColor()  //应用插件
                    .find("th").css("color","red");//可以链式操作
     })

</script>

---

全局函数插件

<script     type="text/javascript">
//插件编写
;(function($) {
       $.extend({
          ltrim :     function( text ) {
               return (text ||     "").replace( /^\s+/g, "" )

          },
          rtrim :     function(text ) {
               return (text ||     "").replace( /\s+$/g, "" )
          }
       });
})(jQuery);

//插件应用
$(function(){
     $("#trimTest").val(
          jQuery.trim("       test      ") + "\n" +
            jQuery.ltrim("       test      ") + "\n" +
          jQuery. rtrim("       test      ")
     );
})
</script>

---

自定义选择器插件

jQuery的选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据这个选择器函数的返回值决定是否保留这个元素。

例如：$("div:gt(1)"),选择器首先会获取所有的<div>元素,然后隐式遍历这些元素，并逐个将这些<div>元素作为参数，连同括号里的 1 等参数，一起传递给gt对应的选择器函数进行判断。

:gt()选择器在jQuery源文件中的代码如下：

gt:   function(a,i,m){

          return i>m[3]-0;

}

选择器函数一共接受3个参数：

参数 a，指向当前遍历到的DOM元素。

参数 i，指向当前遍历的DOM元素的索引值,从0开始。

参数 m，是有jQuery正则解析引擎进一步解析后的产物(用match匹配出来)，是一个数组。

m[0],以上面的$("div:gt(1)")为例，是:gt(1)部分。

m[1],是选择器的引导符，上例中为 :

m[2],即例子中的gt,

m[3],即括号中的数据1

m[4],这个比较罕见，例如$("div:l(ss(dd))"),m[4]就指向了 (dd)部分，此时m[3]的值是 ss(dd)

---

     <script     type="text/javascript">
          //插件编写
            ;(function($) {
                 $.extend(jQuery.expr[":"], {
                      between : function( a , i ,m )  {
                         var tmp= m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
                         return tmp[0]-0< i &&  i<tmp[1]-0;   //用tmp[0]-0可以转换为数字
                    }
               });
            })(jQuery);

          //插件应用
          $(function(){
               alert("执行前");
               $(" div:between(2,5)").css("background","white");
               alert("执行后");
          })
     </script>

转载于:https://my.oschina.net/Yaland/blog/424945