自定义JQuery插件

Posted 2020-10-03 zeng1994

           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();
		}

2.自定义插件

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

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

  

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

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

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

 

  (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);

    

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

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