一、

1.To add a function to the jQuery namespace, we can just assign the new function as
a property of the jQuery object:

 (function($) {

     $.sum = function(array) {

         // Code goes here

     };

 })(jQuery);

Now, in any code that uses this plugin, we can write:

$.sum();

2.添加函数的例子

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <title>Developing Plugins</title>

     <link rel="stylesheet" href="08.css" type="text/css" />

     <link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />

     <script src="jquery.js"></script>

     <script src="jquery-ui-1.10.0.custom.min.js"></script>

     <script src="08.js"></script>

     <script type="text/javascript">

     (function($) {

         $.sum = function(array) {

             var total = 0;

             $.each(array, function(index, value) {

                 value = $.trim(value);

                 value = parseFloat(value) || 0;

                 total += value;

             });

             return total;

         };

         $.average = function(array) {

           if ($.isArray(array)) {

           return $.sum(array) / array.length;

           }

           return '';

         };

     })(jQuery);

     $(document).ready(function() {

       var $inventory = $('#inventory tbody');

       var quantities = $inventory.find('td:nth-child(2)')

         .map(function(index, qty) {

         return $(qty).text();

         }).get();

         var sum = $.sum(quantities);

         $('#sum').find('td:nth-child(2)').text(sum);

       var prices = $inventory.find('td:nth-child(3)')

         .map(function(index, qty) {

         return $(qty).text();

         }).get();

         var average = $.average(prices);

         $('#average').find('td:nth-child(3)').text(average.toFixed(2));

       });

     </script>

   </head>

   <body>

     <div id="container">

       <h1>Inventory</h1>

       <table id="inventory">

         <thead>

           <tr class="one">

             <th>Product</th>

             <th>Quantity</th>

             <th>Price</th>

           </tr>

         </thead>

         <tfoot>

           <tr class="two" id="sum">

             <td>Total</td>

             <td></td>

             <td></td>

           </tr>

           <tr id="average">

             <td>Average</td>

             <td></td>

             <td></td>

           </tr>

         </tfoot>

         <tbody>

           <tr>

             <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>

             <td>4</td>

             <td>2.50</td>

           </tr>

           <tr>

             <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>

             <td>12</td>

             <td>4.32</td>

           </tr>

           <tr>

             <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>

             <td>14</td>

             <td>7.89</td>

           </tr>

         </tbody>

       </table>

     </div>

   </body>

 </html>

3.Extending the global jQuery object

We can also employ an alternate syntax in defining our functions using the $.extend() function:

 (function($) {

     $.extend({

         sum: function(array) {

             var total = 0;

             $.each(array, function(index, value) {

                 value = $.trim(value);

                 value = parseFloat(value) || 0;

                 total += value;

             });

             return total;

         },

         average: function(array) {

             if ($.isArray(array)) {

                 return $.sum(array) / array.length;

             }

             return '';

         }

     });

 })(jQuery);

4.Isolating functions within namespaces

 (function($) {

     $.mathUtils = {

         sum: function(array) {

             var total = 0;

             $.each(array, function(index, value) {

                 value = $.trim(value);

                 value = parseFloat(value) || 0;

                 total += value;

             });

             return total;

         },

         average: function(array) {

             if ($.isArray(array)) {

                 return $.mathUtils.sum(array) / array.length;

             }

             return '';

         }

     };

 })(jQuery);

 $.mathUtils.sum(sum);

 $.mathUtils.average(average);

jQuery基础教程-第8章-001Adding new global functions的更多相关文章

  1. jQuery基础教程-第8章-002Adding jQuery object methods

    一.Object method context 1.We have seen that adding global functions requires extending the jQuery ob ...

  2. 总结： 《jQuery基础教程》 1-4章

    前言: 因为公司的项目用到了jQuery+Bootstrap,而Bootstrap基于jQuery,突然发现自己只是很久前看过jQuery的视频教程,对jQuery的一些API有一些了解,在使用中还是 ...

  3. jQuery基础教程-第8章-004完整代码

    1. /****************************************************************************** Our plugin code c ...

  4. jQuery基础教程-第8章-003Providing flexible method parameters

    一.The options object 1.增加阴影效果 (function($) { $.fn.shadow = function() { return this.each(function() ...

  5. 《jQuery基础教程(第四版)》学习笔记

    本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

  6. 《jQuery基础教程》读书笔记

    最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...

  7. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  8. Objective-C 基础教程第三章,面向对象编程基础知

    目录 Objective-C 基础教程第三章,面向对象编程基础知 0x00 前言 0x01 间接(indirection) 0x02 面向对象编程中使用间接 面向过程编程 面向对象编程 0x03 OC ...

  9. Objective-C 基础教程第五章,复合

    目录 Objective-C 基础教程第五章,复合 什么是复合? Car程序 自定义NSLog() 存取方法get Set Tires(轮胎) 存取方法 Car类代码的其他变化 扩展Car程序 复合还 ...

随机推荐

  1. 安卓开发第一记 android stdio 安装后 新建测试项目报错

    Failed to resolve:com.android.support:appcompat-v7:报错处理   你在使用android studio时是否也出现过上图的报错,你还在为它的出现烦恼? ...

  2. Write operations are not allowed in read-only mode 只读模式下(FlushMode.NEVER/MANUAL)写操作不

    org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in read ...

  3. 关于Hibernate在反向工程时无法选择Spring DAO Type的解决方法【更新版】

    目录(?)[+] IT程序员开发必备-各类资源下载清单,史上最全IT资源,个人收藏总结! 之前有一篇文章中(Hibernate反向工程步骤及DAO Type无法选择Spring DAO解决方法)提到, ...

  4. 剑指offer-第三章高质量代码（树的子结构）

    题目:输入两个二叉树A和B,判断B是不是A的子结构. 思路:遍历A树找到B树的根节点,然后再判断左右子树是否相同.不相同再往下找.重复改过程. 子结构的描述如下图所示: C++代码: #include ...

  5. Winform、WPF、Silverlight、MFC区别与联系

    WinForm 在Windows中,诸如窗体绘制等功能由GDI(图形设备接口)实现,放在操作系统内核中.Windows Forms在底层使用的是GDI+.GDI+是GDI的“面向对象包装”,使用C++ ...

  6. input type="file" accept="image/*"上传文件慢的问题解决办法

    相信大家都写过<input type="file" name="file" class="element" accept=" ...

  7. POI 单元格

    OI 单元格合并中的CellRangeAddress 参数: CellRangeAddress(int, int, int, int) 参数:起始行号,终止行号, 起始列号,终止列号 sheet.ad ...

  8. Java 多个引用类型变量引用同一个对象

    引用类型变量在声明后必须引用对象才能使用. 一个引用变量只能唯一指向一个对象,但同一个对象可被多个引用类型变量引用. 如:MyDate today; //将变量跟配给一个保存引用的空间(栈) toda ...

  9. MyBatis缓存结构

    Mybatis Cache结构图: CacheKey(statementId, sql, sqlParams,other). 上图展示了Mybatis Cache的结构: 1)每个Mapper对应一块 ...

  10. FIR滤波器相关解释

    LTI(Linear Time-Invariant) 线性时不变: 线性时不变系统是根据系统输入和输出是否具有线性关系来定义的.满足叠加原理的系统具有线性特性.线性满足y=kx函数. 根据系统的输入和 ...