jQuery 07 编写插件

2015/06/04 17:27
阅读数 4
编写插件的目的是封装已经有的一系列方法或函数,以便在其他地方重复使用。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<tmp[1]-0;   //用tmp[0]-0可以转换为数字
                    }
               });
            })(jQuery);

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部