<!DOCTYPE html>
<html>
<head>
<title>使用$.extend()扩展工具函数</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">自定义工具函数求两值中最小值</span>
<span class="fr">
<input id="btnShow" name="btnShow" type="button" value="计算" />
</span>
</div>
<div class="content">
<div class="tip"></div>
</div>
</div>
<script type="text/javascript">
/*------------------------------------------------------------/
功能:返回两个数中最小值
参数:数字p1,p2
返回:最小值的一个数
示例:$.MinNum(1,2);
/------------------------------------------------------------*/
(function ($) {
$.extend({
"MinNum": function (p1, p2) {
// 这种格式是什么意思,也可以表示函数吗
return (p1 > p2) ? p2 : p1;
}
});
})(jQuery);
// 这里的jQuery括起来是什么意思
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "17与18中最小的数是:";
strTmp +=$.MinNum (17, 18);
//显示在页面中
$(".tip").show().append(strTmp);
});
});
</script>
</body>
</html>
(1) 这种格式是什么意思,也可以表示函数吗?extend是jQuery提供的扩展方法的函数,在这里给jquery添加一个方法 MinNum,javascript是弱类型的,function代表 MinNum就是一个函数,之后可以通过 $.MinNum 来调用
(2) jQuery 是作为参数传递给函数,即 (function($) { 中的$,为了避免污染全局变量,也常用于多个jQuery版本一起使用的情况,可以避免版本冲突。
1 object对象
2 将jQuery对象传递给function ($)中的$,可以防止命名冲突
这是重写 JQuery 里的 extend 这个方法