您的位置:首页 > Web前端 > jquery > 正文

jquery插件写法

更多 时间:2014-6-30 类别:Web前端 浏览量:2615

jquery插件写法

jquery插件写法

 

一、插件的几种写法

 

首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面,页面上放置了一个5行3列的表格。

  •  
  • HTML 代码   复制
  • 
    <table id="newTable">
        <tr>
            <td>1</td><td>1</td><td>1</td> 
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td> 
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td> 
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td> 
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td> 
        </tr>
    </table>
    
    		
  •  

    要实现的功能是:鼠标移到表格的某一行时,当前行高亮显示,其他行正常。

     

    利用JQuery插件实现上述功能。常用的JQuery插件有如下几种写法:

     

    1. 对JQuery自身的扩展插件

    这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。 

  •  
  • JScript 代码   复制
  • 
    $.extend({
        handleTableUI : function(table){
            var thisTable = $("#" + table);
            
            $(thisTable).find("tr").bind("mouseover", function () {
                $(this).css({ color: "#ff0011", background: "blue" });
            });
            $(thisTable).find("tr").bind("mouseout", function () {
                $(this).css({ color: "#000000", background: "white" });
            });
        }
    });
    
    			
  •  

    说明

    当要对JQuery自身进行扩展的时候,需要采用$.extend();的形式进行开发,JQuery的extend()方法为我们提供了扩展 JQuery自身的方式,在extend()方法中,我们采用{...}的形式编写具体的方法体。其中,最重要的是要定义我们自己的扩展方法,如示例中的 handleTableUI。定义的方式是:方法名 : function(参数){ 方法体 }。通过此种方式我们就可以定义JQuery自己的扩展方法,而且这个方法可以在web页面通过智能提示显示出来。

     

    页面中调用的代码如下

  •  
  • HTML 代码   复制
  • 
    <script type="text/javascript">
        $(document).ready(function () {
            $.handleTableUI("newTable");
        });
    </script>
    
    		
  •  

    2、 对JQuery对象的插件开发
     

    形式1: 

  • JScript 代码   复制
  • 
    (function($){    
       $.fn.extend({    
        pluginName:function(opt,callback){    
                  // Our plugin implementation code goes here.      
        }    
       })    
    })(jQuery);   
    
    		

  • 形式2:

  •  
  • JScript 代码   复制
  • 
    
    (function($) {      
        $.fn.pluginName = function() {    
             // Our plugin implementation code goes here.    
        };     
    })(jQuery);   
    
    		
  •  

    使用这种插件的扩展上面的实例

  •  
  • JScript 代码   复制
  • 
    (function ($) {
        $.fn.setTableUI = function(options){
            var defaults = {
                evenRowClass:"evenRow",
                oddRowClass:"oddRow",
                activeRowClass:"activeRow"
            }
            var options = $.extend(defaults, options);
            this.each(function(){
                var thisTable=$(this);
                $(thisTable).find("tr").bind("mouseover", function () {
                    $(this).css({ color: "#ff0011", background: "blue" });
                });
                $(thisTable).find("tr").bind("mouseout", function () {
                    $(this).css({ color: "#000000", background: "white" });
                });
            });
        };
    })(jQuery);
    
    		
  •  

    说明

    当要对页面元素进行JQuery扩展时,需要采用(function($){...})(JQuery);的方式进行开发。在“...”处,定义我们自己的方法,定义方式是:$.fn.自定义方法名 = function(参数){...};的形式定义扩展方法的具体内容。在页面调用的时候不同于对JQuery自身的扩展。

     

    具体调用代码如下

  •  
  • HTML 代码   复制
  • 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#newTable").setTableUI();
        });
    </script>
    
    
    		
  •  

     

    二、编写jQuery插件时,一定要注意以下列出的地方

     

    1、插件的推荐命名方法为:jquery.[插件名].js

    2、所有的对象方法都应当附加到JQuery.fn对象上面,而所有的全局函数都应当附加到JQuery对象本身上。

    3、在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。  

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

     

    5、所有方法或函数插件,都应当以分号结尾,否则压缩的时候可能会出现问题。为了更加保险写,可以在插件头部添加一个分号(;),以免他们的不规范代码给插件带来 影响。

    6、插件应该返回一个JQuery对象,以便保证插件的可链式操作。 

    7、避免在插件内部使用$作为JQuery对象的别名,而应当使用完整的JQuery来表示。这样可以避免冲突。

     

    8、在JQuery命名空间下声明只声明一个单独的名称

    9、接受options参数,以便控制插件的行为

    例如

  •  
  • JScript 代码   复制
  • 
    // plugin definition 
    $.fn.hilight = function(options) { 
      var defaults = { 
        foreground: 'red', 
        background: 'yellow' 
      }; 
      // Extend our default options with those provided. 
      var opts = $.extend(defaults, options); 
      // Our plugin implementation code goes here. 
    }; 
    
    		

  • 我们的插件可以这样被调用


    $('#myli').hilight({ 
      foreground: 'blue' 
    });

     

    10、暴露插件的默认设置 ,以便外面可以访问

    例如

  •  
  • JScript 代码   复制
  • 
    .fn.hilight = function(options) { 
      // Extend our default options with those provided. 
      // Note that the first arg to extend is an empty object - 
      // this is to keep from overriding our "defaults" object. 
      var opts = $.extend({}, $.fn.hilight.defaults, options); 
      // Our plugin implementation code goes here. 
    }; 
    // plugin defaults - added as a property on our plugin function 
    
      
    标签:jquery插件