jQuery基础教程-第8章-001Adding new global functions

转载

mob604756ffeae8 2016-05-16 22:07:00

文章标签 jQuery jquery html css javascript 文章分类 Storm 大数据

一、

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

a property of the jQuery object:

1 (function($) {
2     $.sum = function(array) {
3         // Code goes here
4     };
5 })(jQuery);

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

$.sum();

2.添加函数的例子

1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4   <head>
 5     <meta charset="utf-8">
 6     <title>Developing Plugins</title>
 7 
 8     <link rel="stylesheet" href="08.css" type="text/css" />
 9     <link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />
10 
11     <script src="jquery.js"></script>
12     <script src="jquery-ui-1.10.0.custom.min.js"></script>
13     <script src="08.js"></script>
14     <script type="text/javascript">
15     (function($) {
16         $.sum = function(array) {
17             var total = 0;
18             $.each(array, function(index, value) {
19                 value = $.trim(value);
20                 value = parseFloat(value) || 0;
21                 total += value;
22             });
23             return total;
24         };
25 
26         $.average = function(array) {
27           if ($.isArray(array)) {
28           return $.sum(array) / array.length;
29           }
30           return '';
31         };
32     })(jQuery);
33 
34     $(document).ready(function() {
35       var $inventory = $('#inventory tbody');
36       var quantities = $inventory.find('td:nth-child(2)')
37         .map(function(index, qty) {
38         return $(qty).text();
39         }).get();
40         var sum = $.sum(quantities);
41         $('#sum').find('td:nth-child(2)').text(sum);
42 
43       var prices = $inventory.find('td:nth-child(3)')
44         .map(function(index, qty) {
45         return $(qty).text();
46         }).get();
47         var average = $.average(prices);
48         $('#average').find('td:nth-child(3)').text(average.toFixed(2));
49       });
50     </script>
51   </head>
52   <body>
53     <div id="container">
54       <h1>Inventory</h1>
55       <table id="inventory">
56         <thead>
57           <tr class="one">
58             <th>Product</th>
59             <th>Quantity</th>
60             <th>Price</th>
61           </tr>
62         </thead>
63         <tfoot>
64           <tr class="two" id="sum">
65             <td>Total</td>
66             <td></td>
67             <td></td>
68           </tr>
69           <tr id="average">
70             <td>Average</td>
71             <td></td>
72             <td></td>
73           </tr>
74         </tfoot>
75         <tbody>
76           <tr>
77             <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
78             <td>4</td>
79             <td>2.50</td>
80           </tr>
81           <tr>
82             <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
83             <td>12</td>
84             <td>4.32</td>
85           </tr>
86           <tr>
87             <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
88             <td>14</td>
89             <td>7.89</td>
90           </tr>
91         </tbody>
92       </table>
93     </div>
94   </body>
95 </html>

3.Extending the global jQuery object

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

1 (function($) {
 2     $.extend({
 3         sum: function(array) {
 4             var total = 0;
 5             $.each(array, function(index, value) {
 6                 value = $.trim(value);
 7                 value = parseFloat(value) || 0;
 8                 total += value;
 9             });
10             return total;
11         },
12         average: function(array) {
13             if ($.isArray(array)) {
14                 return $.sum(array) / array.length;
15             }
16             return '';
17         }
18     });
19 })(jQuery);

4.Isolating functions within namespaces

1 (function($) {
 2     $.mathUtils = {
 3         sum: function(array) {
 4             var total = 0;
 5             $.each(array, function(index, value) {
 6                 value = $.trim(value);
 7                 value = parseFloat(value) || 0;
 8                 total += value;
 9             });
10             return total;
11         },
12         average: function(array) {
13             if ($.isArray(array)) {
14                 return $.mathUtils.sum(array) / array.length;
15             }
16             return '';
17         }
18     };
19 })(jQuery);
20 
21 $.mathUtils.sum(sum);
22 $.mathUtils.average(average);