自定义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();