jQuery-devPlugin(1)

最新推荐文章于 2024-08-30 20:29:15 发布

chuoyingqing7288

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/Craft/blog/1588571

版权

<!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>

转载于:https://my.oschina.net/Craft/blog/1588571

chuoyingqing7288

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-devPlugin(1)

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <t...
复制链接

扫一扫