一、
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);