一、

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. WPF导学目录

    很早就知道WPF这个东西,做项目中没用到,也就没去整理学习.作为winForm的升级版,未来windows桌面应用程序的趋势,有些公司招聘需求中也会提到熟悉WPF,于是就整理学习了一下WPF. 主要参 ...

  2. 计算机信息类ComputerInfo

    using System; using System.Management; using System.Net; using System.Net.Sockets; using System.Text ...

  3. 洛谷P2835 刻录光盘

    传送门 题目大意:有光盘可以传着看,问最少从哪几个人分发,能全部传一遍. 题解:缩点后求入度为0的点的个数 代码: #include<iostream> #include<cstdi ...

  4. button和input type=button的区别及注意事项

    <button>标签 定义和用法 <button>标签定义一个按钮. 在button元素内部,您可以放置内容,比如文本或图像.这是该元素与使用input元素创建的按钮之间的不同 ...

  5. fn project Message Queues 配置

      Message Queues A message queue is used to coordinate asynchronous function calls that run through ...

  6. C#检测应用程序重复启动----函数检测(可以在多用户登录情况下检测)

    上文是在网上找的检测程序重复运行的类,但是感觉不是很好用,而且还使用了API,似乎完全没有必要,于是晚上自己写了一个函数,经过测试,在多用户下仍然可以检测到程序的多次运行.当然,如果程序改了名字还是可 ...

  7. Swift-ScrollView轮播图的简易封装和使用

    不多说,轮播图是开发中必要一项技能,直接上代码: 先说我的思路:首次继承于UIScrollView类自定义MyScrollView,在MyScrollView里自定制方法,func creatMySc ...

  8. VUE API 重点

    VUE API 重点 生命周期方法 每个组件都有生命周期,是向 ReactJs 学习的. computed 在一个组件声明一个人,人有名,人有姓,输入姓和名.((&--&%--& ...

  9. (转)App工程结构搭建:几种常见Android代码架构分析

    关于Android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的角度,看到整齐的代码,优美的分层总是一种舒服的享受的. 从艺术的角度看,其实我们是在追求一种美. 本文先分析几个当 ...

  10. 分布式锁之三:Redlock实现分布式锁

    之前写过一篇文章<如何在springcloud分布式系统中实现分布式锁?>,由于自己仅仅是阅读了相关的书籍,和查阅了相关的资料,就认为那样的是可行的.那篇文章实现的大概思路是用setNx命 ...