自定义JQuery插件

           Jquery是个好东西，今天学习了怎么自定义Jquery插件，下面开始学习。

1.使用插件前的代码

       //(1)根据按钮添加分隔符 
		/** 查询工具栏中table中的所有td，去掉第一个td与最后一个td */ 
		var table = $("#tb > table"); 
		var tds = table.find("td:not(:first,:last)");
		/** 判断td的个数 */
		if(tds.length > 0){
			/** 创建td添加到所有查询到得td前面(相邻元素) */
		    $('<td><div class="dialog-tool-separator"></div></td>')
			.insertBefore(tds);
		}
		//(2)没有一个权限需要把工具栏中table隐藏 
		if(table.find("td").length == 1){
			table.hide();
		} 

14

 

1

       //(1)根据按钮添加分隔符 

2

        /** 查询工具栏中table中的所有td，去掉第一个td与最后一个td */ 

3

        var table = $("#tb > table"); 

4

        var tds = table.find("td:not(:first,:last)");

5

        /** 判断td的个数 */

6

        if(tds.length > 0){

7

            /** 创建td添加到所有查询到得td前面(相邻元素) */

8

            $('<td><div class="dialog-tool-separator"></div></td>')

9

            .insertBefore(tds);

10

        }

11

        //(2)没有一个权限需要把工具栏中table隐藏 

12

        if(table.find("td").length == 1){

13

            table.hide();

14

        } 

2.自定义插件

   (1)  自定义插件的代码要满足下面的格式

       (function($){ 
               /**书写自定义的JQuery方法的位置*/
         })(jQuery);

3

 

1

       (function($){ 

2

               /**书写自定义的JQuery方法的位置*/

3

         })(jQuery);

  

  (2)  自定义JQuery对象的方法按照下面格式自定义即可.

            注意: 在该方法里面的this是指调用该方法的Jquery对象

  $.fn.自定义方法的名字 = function(){ 
       /** 逻辑代码 */ 
    }

3

 

1

  $.fn.自定义方法的名字 = function(){ 

2

       /** 逻辑代码 */ 

3

    }

 

  (3)  完成的代码

       代码:

/**
 * jQuery工具插件
 */
(function($){
	 /** 
	  * 优化表格上面的工具栏插件
	  * (1)根据按钮添加分隔符 
	  * (2)没有一个权限需要把工具栏中table隐藏 
	  */
	$.fn.formart4ToolBar = function(){
		/**
		 * this:代表调用当前方法的JQuery对象 即$("#tb > table")
		 */
		//(1)根据按钮添加分隔符 
		/** 查询工具栏中table中的所有td，去掉第一个td与最后一个td */
		var tds = this.find("td:not(:first,:last)");
		/** 判断td的个数 */
		if(tds.length > 0){
			/** 创建td添加到所有查询到得td前面(相邻元素) */
		    $('<td><div class="dialog-tool-separator"></div></td>')
			.insertBefore(tds);
		}
		//(2)没有一个权限需要把工具栏中table隐藏 
		if(this.find("td").length == 1){
			this.hide();
		}
	};
})(jQuery);

28

 

1

/**

2

 * jQuery工具插件

3

 */

4

(function($){

5

     /** 

6

      * 优化表格上面的工具栏插件

7

      * (1)根据按钮添加分隔符 

8

      * (2)没有一个权限需要把工具栏中table隐藏 

9

      */

10

    $.fn.formart4ToolBar = function(){

11

        /**

12

         * this:代表调用当前方法的JQuery对象 即$("#tb > table")

13

         */

14

        //(1)根据按钮添加分隔符 

15

        /** 查询工具栏中table中的所有td，去掉第一个td与最后一个td */

16

        var tds = this.find("td:not(:first,:last)");

17

        /** 判断td的个数 */

18

        if(tds.length > 0){

19

            /** 创建td添加到所有查询到得td前面(相邻元素) */

20

            $('<td><div class="dialog-tool-separator"></div></td>')

21

            .insertBefore(tds);

22

        }

23

        //(2)没有一个权限需要把工具栏中table隐藏 

24

        if(this.find("td").length == 1){

25

            this.hide();

26

        }

27

    };

28

})(jQuery);

    

在页面中调用:  直接通过Jquery对象.方法名() 来调用    

             //调用自定义的插件来优化页面
			$("#tb > table").formart4ToolBar();	

 

1

             //调用自定义的插件来优化页面

2

            $("#tb > table").formart4ToolBar();