<!DOCTYPE html>
<!--
声明:练习素材来自于jquery基础教程
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Developing Plugins</title>
<link rel="stylesheet" href="../../css/08.css" type="text/css" />
<link rel="stylesheet" href="../../ui-themes/smoothness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<script src="../../lib/jquery.js"></script>
<script src="../../lib/jquery-ui-1.10.0.custom.min.js"></script>
<script>
/*1、添加新的全局函数*/
//要向jQuery的命名空间中添加一个函数,只需将这个新函数指定为jQuery对象的一个属性
(function($){
//求和函数
$.sum = function(array){
var sum = 0;
$.each(array, function(index,value) {
var v = parseFloat($.trim(value))||0;
sum += v;
});
return sum;
};
//求平均数函数
$.average = function(array){
if($.isArray(array)){
return parseFloat($.sum(array)/array.length).toFixed(2);
}
return '';
}
})(jQuery);
//测试开发的sum插件
$(document).ready(function(){
// alert($.sum([1,2,3,4,5]));
var qulities = $('#inventory tbody')
.find('td:nth-child(2)')
.map(function(index,o){//这里是返回jquery对象
return $(o).text();
}).get();
var price = $('#inventory tbody')
.find('td:nth-child(3)')
.map(function(index,o){
return $(o).text();
}).get();
//求和
$('#sum')
.find('td:nth-child(2)')
.text($.sum(qulities));
$('#sum').find('td:nth-child(3)')
.text($.sum(price))
//求平均值
$('#average')
.find('td:nth-child(2)')
.text($.average(qulities));
$('#average').find('td:nth-child(3)')
.text($.average(price))
});
/*2、扩展全局jQuery对象*/
//事实上,利用$.extend()函数,还可以通过另外一种语法来定义全局函数
//这样调用$.extend()就可以给全局jQuery对象添加属性(如果原来有相同的属性,就会替换原来的属性)
(function($){
$.extend({
sum:function(array){
var sum = 0;
$.each(array, function(index,o) {
var tmp = parseFloat($.trim(o))||0;
sum += tmp;
});
return sum;
},
average:function(array){
if($.isArray(array)){
return parseFloat($.sum(array)/array.length).toFixed(2);
}
return '';
}
});
})(jQuery);
/*使用命名空间隔离函数*/
//我们的插件在jQuery命名空间中创建了两个独立的全局函数。但这样写有可能污染命名空间。
//换句话说,其他jQuery插件也可能定义相同的函数名。为了避免冲突,最好的办法是把属于
//一个插件的全局函数都封装到一个对象中
(function($){
$.mathUtils = {
sum:function(array){
var sum = 0;
$.each(array, function(index,o) {
var tmp = parseFloat($.trim(o))||0;
sum += tmp;
});
return sum;
},
average:function(array){
if($.isArray(array)){
return parseFloat($.sum(array)/array.length).toFixed(2);
}
return '';
}
};
})(jQuery);
//测试
console.log($.mathUtils.sum([1,2,3]));
console.log($.mathUtils.average([1,2,3]));
</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>