jQuery基础教程-第8章-001Adding new global functions
一、
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的更多相关文章
- jQuery基础教程-第8章-002Adding jQuery object methods
一.Object method context 1.We have seen that adding global functions requires extending the jQuery ob ...
- 总结: 《jQuery基础教程》 1-4章
前言: 因为公司的项目用到了jQuery+Bootstrap,而Bootstrap基于jQuery,突然发现自己只是很久前看过jQuery的视频教程,对jQuery的一些API有一些了解,在使用中还是 ...
- jQuery基础教程-第8章-004完整代码
1. /****************************************************************************** Our plugin code c ...
- jQuery基础教程-第8章-003Providing flexible method parameters
一.The options object 1.增加阴影效果 (function($) { $.fn.shadow = function() { return this.each(function() ...
- 《jQuery基础教程(第四版)》学习笔记
本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...
- 《jQuery基础教程》读书笔记
最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- Objective-C 基础教程第三章,面向对象编程基础知
目录 Objective-C 基础教程第三章,面向对象编程基础知 0x00 前言 0x01 间接(indirection) 0x02 面向对象编程中使用间接 面向过程编程 面向对象编程 0x03 OC ...
- Objective-C 基础教程第五章,复合
目录 Objective-C 基础教程第五章,复合 什么是复合? Car程序 自定义NSLog() 存取方法get Set Tires(轮胎) 存取方法 Car类代码的其他变化 扩展Car程序 复合还 ...
随机推荐
- 剑指offer-第六章面试中的各项能力(二叉树的深度)
题目:1:输入一个二叉树,求二叉树的深度.从根节点开始最长的路径. 思路:我们可以考虑用递归,求最长的路径实际上就是求根节点的左右子树中较长的一个然后再加上1. 题目2:输入一颗二叉树的根节点,判断该 ...
- 1.1对java web开发的一点理解
前言 Q:通常行内人士见面会问你,你做哪方面开发的? A:java web开发的 那么,什么是java web开发? java web开发通常是指java web应用程序的开发.一个B/S架构的 we ...
- c#代碼小集
一.字符串[Uri]轉換出RouteData private RouteData UriToRouteData(Uri uri) { var query = uri.Query; ) { query ...
- ORACLE系统表大全
下面全面是对Oracle系统表的一些介绍: 数据字典dict总是属于Oracle用户sys的. 1.用户: select username from dba_users; 改口令 alter user ...
- AppScan 8.0.3安全漏洞扫描总结
本文记录了通过AppScan 8.0.3工具进行扫描的安全漏洞问题以及解决方案, 1.使用SQL注入的认证旁路 问题描述: 解决方案: 一般通过XSSFIlter过滤器进行过滤处理即可,通过XSSFI ...
- bzoj 3796 Mushroom追妹纸——后缀数组
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3796 长度一般都是 1e5 ,看这个是 5e4 ,一看就是把两个串接起来做. 自己本来想的是 ...
- xe 最大连接数限制、记录客户连接、心跳
xe 最大连接数限制.记录客户连接.心跳 //author: cxg unit DSServerContainer; interface uses SysUtils, Classes, IniF ...
- 不常用的linux命令
不太常用的命令 vipw ##打开密码配置文件 dmesg ##补充说明:kernel会将开机信息存储在ring buffer中.您若是开机时来不及查看信息,可利用dme ...
- windows抓包工具Wireshark(过滤)
1.IP过滤 ip.src ==192.168.0.208(ip.src eq 192.168.0.208) //来源等于某个ip ip.dst ==192.168.0.208(ip.dst eq 1 ...
- 工具软件集合 Adobe AE PS Pr CC 2018 2019 破解教程
来源https://mp.weixin.qq.com/s/zeq1sTmaPsKt7Bsok0Ldrg(若链接失效,请关注软件安装管家公众号) 相关链接 Office 2019破解教程 Adobe 2 ...