4-8 使用$.extend()扩展工具函数
本节编程练习不计算学习进度，请电脑登录imooc.com操作

使用$.extend()扩展工具函数

调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：

$. extend ({options});

参数options表示自定义插件的函数内容。

例如，调用$.extend()函数，自定义一个用于返回两个数中最大值的插件，并在页面中将插件返回的最大值显示在页面中，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击“计算”按钮时，先调用自定义插件中名为“MaxNum”的方法，计算并返回两个数值中的最大值，然后，将该值显示在页面中。

任务

亲自调用自定义插件中的方法返回两个值中的最小值。

在下列代码的第30、40行，分别调用$.extend()工具函数，自定义一个用于返回两个值中最小值的插件和调用插件中的自定义方法获取最小值。

index.htmlstyle.css 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>使用$.extend()扩展工具函数</title>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="divtest">
  11.             <div class="title">
  12.                 <span class="fl">自定义工具函数求两值中最小值</span> 
  13.                 <span class="fr">
  14.                     <input id="btnShow" name="btnShow" type="button" value="计算" />
  15.                 </span>
  16.             </div>
  17.             <div class="content">
  18.                 <div class="tip"></div>
  19.             </div>
  20.         </div>
  21.  
  22.         <script type="text/javascript">
  23.             /*------------------------------------------------------------/
  24.             功能：返回两个数中最小值
  25.             参数：数字p1,p2
  26.             返回：最小值的一个数
  27.             示例：$.MinNum(1,2);
  28.             /------------------------------------------------------------*/
  29.             (function ($) {
  30.                 ?({
  31.                     "MinNum": function (p1, p2) {
  32.                         return (p1 > p2) ? p2 : p1;
  33.                     }
  34.                 });
  35.             })(jQuery);
  36.             $(function () {
  37.                 $("#btnShow").bind("click", function () {
  38.                     $(".tip").html("");
  39.                     var strTmp = "17与18中最小的数是：";
  40.                     strTmp +=? (17, 18);
  41.                     //显示在页面中
  42.                     $(".tip").show().append(strTmp);
  43.                 });
  44.             });
  45.         </script>
  46.     </body>
  47. </html>
  1. #divtest
  2. {
  3.     width: 302px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: Red;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. #divtest .content .tip
  22. {
  23.     border: solid 1px #ccc;
  24.     background-color: #eee;
  25.     margin: 10px 0px;
  26.     padding: 8px;
  27.     display: none;
  28. }
  29. .fl
  30. {
  31.     float: left;
  32. }
  33. .fr
  34. {
  35.     float: right;
  36. }
下一节