jQuery中已经存在很多常用的工具函数，使用这些函数能够在开发中帮助我们解决很多常见的问题，从而提高开发效率，比如常用的有：$.ajax使用ajax调用，$.each用于遍历对象和数组，$.grep用于过滤数组，$.map对于一个数组进行一定程度转换后返回转换后的数组，等等一系列的方法；但是有时候由于业务的需要，我们可能需要在项目中多次使用一些函数，在这种情况下，可以把这些函数封装成jQuery的实用函数，以方便调用和重用。以下介绍如何通过jQuery提供的插件机制来扩展我们自己的实用函数。
-、通过jQuery提供的扩展功能来实现一个jQuery的实用函数
jQuery的实用函数相等于java中的静态方法，直接定义在jQuery上，下面以实现一个简单的弹出一个“hello world!”的提示框来说明这一点。
1. (function($){
2. $.helloworld = function(){
3. alert("Hello World!");
4. }
5. })(jQuery);
复制代码
这就定义了一个名为helloworld的jQuery实用函数，通过$.helloworld()就可以调用。
1、这里使用了一个javaScript的匿名函数，并把jQuery对象当作参数传递给形参$，并执行这个函数。这样做的好处是，当程序里使用了除jQuery外,还有另外的js类库，并且也使用了$,那么$就会产生冲突，jQuery提供了jQuery.noConflict()来释放对$的控制权，交由其他类库使用。这里使用匿名函数的方式就能够避免这种冲突问题，并能在函数内部使用$来操作，这时的$只是一个局部变量，不会影响到其他类库的使用。
2、$.helloworld函数才是我们要实现的jQuery实用函数，放在匿名函数的函数体里去实现，如果没有使用其他类库，放在外面也是可以的，但是为了程序后期的扩展，也许会引用其他类库，最好的方式是放在匿名函数内部去实现，这也是官方所推荐的方式。
以下为在html中调用的部分代码：
1. <script type="text/javascript">
2. // 页面加载完则弹出helloworld对话框
3. $(function(){
4. $.helloworld();
5. });
6. </script>
复制代码
二、给jquery实用函数传递参数
先来写一个例子，求两数的最大值:
1. (function($){
2. $.maxFromTwonum = function(num1, num2) {
3. return num1 > num2 ? num1 : num2;
4. }
5. })(jQuery);
复制代码
这个实用函数再调用时需要传递2个数值，使用$.maxFromTwonum(12, 28);则返回28。这个例子也很简单，在项目开发中往往会遇到一些复杂的功能，需要抽取出来封装成组件来提供给项目各处调用，这时往往需传递大量的参数，有些可能是必须的参数，有些可能是可选的，这种情况则不能使用以上方式直接在形参列表中列出参数。一种好的方式，也是推荐的方式是使用带有key-value对的散列对象，key为参数的名，value为参数的值。以下给出具体的使用方式。
1. (function(){
2. // n1为必须传递的参数，因此可单独放在外面
3. // options则为可选参数，按照需求来传递相应的参数
4. $.complexParam = function(n1, options){
5. // 可为参数设定一些初始值
6. var settings = {
7. p1 : value1,
8. p2 : value2,
9. p3 : value3,
10. p4 : value4,
11. …………
12. };
13.
14. //通过$.extend来合并传递的参数到settings上,并覆盖相应的初始值
15. settings = $.extend(settings, options);
16.
17. // 在这里实现相应的业务逻辑代码……
18. }
19. })(jQuery);
复制代码
三、利用jQuery扩展实用函数的方式来实现一个小例子
在通常的网页应用中，免不了要有一些提示框，警告框之类的，但是浏览器自带的弹出框并不美观，很多网页用css和js脚本实现了属于自己的提示框。以下就给出一个简易的弹出提示框效果，可以在此基础上进一步优化，实现一个通用的组件。
1、js代码：jquery.dialog_self.js
1. (function(){
2. /**
3. * 实现一个自定义的弹出对话框。
4. * 参数：title, 对话框标题
5. * message,对话框需要显示的信息，
6. * divId,指定一个div的id标识，以此div做为对话框的内容
7. * dialogtype, 对话框的类型：提示、警告、询问等，
8. * isOper, 是否背景可操作
9. */
10. $.dialogSelf = function(options){
11. // 为插件提供默认值
12. var setting = {
13. title: "对话框",
14. message : "hello world!",
15. dialogtype : "提示",
16. isOper : true
17. };
18. // 调用时传入的参数将覆盖默认的值
19. setting = $.extend(setting, options);
20.
21. var $ele = $.dialogSelf.dialogPosition($.dialogSelf.creatDialog(setting));
22. $("body").append($ele);
23. };
24.
25. // 构建对话框
26. $.dialogSelf.creatDialog = function(setting){
27. return $("<div/>").addClass("ui-my-dialog")
28. .append($.dialogSelf.creatDialogTitle(setting))
29. .append($.dialogSelf.createDialogContent(setting))
30. .append($.dialogSelf.createDialogFooter(setting));
31. }
32.
33. // 构建对话框标题栏
34. $.dialogSelf.creatDialogTitle = function(setting) {
35. var close = $("<a>\xd7</a>").click(function(){
36. $.dialogSelf.dialogClose();
37. });
38. return $("<div/>").addClass("ui-my-title")
39. .append("<span>"+setting.title+"</span>")
40. .append(close);
41. }
42.
43. // 构建对话框内容
44. $.dialogSelf.createDialogContent = function(setting) {
45. return $("<div/>").addClass("ui-my-content")
46. .append("<span>"+setting.dialogtype+": </span>")
47. .append("<span>"+setting.message+"</span>");
48. }
49.
50. // 构建对话框的footer
51. $.dialogSelf.createDialogFooter = function(setting) {
52. var comfire = $("<a>确定</a>").click(function(){
53. $.dialogSelf.dialogClose();
54. });
55. return $("<div/>").addClass("ui-my-footer")
56. .append(comfire);
57. }
58.
59. // 对话框的位置窗口居中
60. $.dialogSelf.dialogPosition = function($ele) {
61. var winWidth = $(window).width();
62. var winHeight = $(window).height();
63.
64. var width = $ele.outerWidth();
65. var height = $ele.outerHeight();
66.
67. var posH = (winHeight - height)/2 + $(document).scrollTop();
68. var posW = (winWidth - width)/2;
69.
70. $ele.css({
71. position : "absolute",
72. "z-index" : "100",
73. top : posH + "px",
74. left: posW + "px"
75. });
76. return $ele;
77. }
78.
79. // 关闭对话框
80. $.dialogSelf.dialogClose = function() {
81. $(".ui-my-dialog").remove();
82. }
83. })(jQuery);
复制代码
2、css代码：jquery.dialog_self.css
1. .ui-my-dialog {
2. border:3px solid #ff32a1;
3. background: #ffe;
4. width:400px;
5. height:250px;
6. }
7.
8. .ui-my-title {
9. height:10%;
10. background: #70adcd;
11. color: #FFFFEE;
12. font-weight:bold;
13. padding :8px;
14. }
15.
16. .ui-my-title a {
17. border:none;
18. display:inline-block;
19. float:right;
20. cursor: pointer;
21. }
22.
23. .ui-my-content {
24. height:63%;
25. padding:5px;
26. }
27.
28. .ui-my-content span{
29. display:block;
30. }
31.
32. .ui-my-footer {
33. height:10%;
34. background:#c8d5e2;
35. padding :8px;
36. }
37.
38. .ui-my-footer a {
39. border:none;
40. display:block;
41. width:50px;
42. height:22px;
43. color:#fdfdfd;
44. float:right;
45. text-align:center;
46. background:#3e78fd;
47. cursor: pointer;
48. }
复制代码
在html页面导入js和css 文件，就可以使用这个插件了。具体的测试代码可以参照附件！
