jQuery $.extend()方法的用法
时间：03-07来源：作者：点击数：
在前面几节中，我们学习了各种 jQuery 内置的工具函数。但是这些内置工具函数的功能是有限的，如果我们想要自己定义一个工具函数，此时又该怎么实现呢？
在 jQuery 中，我们可以使用$.extend()方法来自定义工具函数，以便自己开发使用。
语法：
(function($){
$.extend({
"函数名": function(参数){
……
}
});
})(jQuery);
$.extend({
"函数名": function(参数){
……
}
});
})(jQuery);
(function(){})() 是 JavaScript 立即执行函数，这种语法在高级开发中经常用到。
$.extend({
"函数名": function(参数){
……
}
});
"函数名": function(参数){
……
}
});
如果不考虑其他情况，仅仅使用上面这段代码，其实也可以定义 jQuery 工具函数。但是为什么我们不这样做，而要在外面套一个立即执行函数呢？
这是因为很多其他的 JavaScript 库都会用到$这个符号，使用$.extend()方法定义工具函数时，就有可能受到其他 JavaScript 库中$变量的影响。我们在外面套一个如下所示的立即执行函数，是为了让$变量只属于这个立即执行函数的作用域，从而避免受到其他 JavaScript 库的“污染”。
(function($){
……
})(jQuery);
……
})(jQuery);
如果只看语法，我们可能一头雾水，还是先来看一个实际例子。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
(function($){
$.extend({
"maxNum": function(m, n){
return (m>n)?m:n;
}
});
})(jQuery);
$(function () {
var result=$.maxNum(10, 5)
console.log("最大值是："+result);
})
</script>
</head>
<body>
</body>
</html>
控制台输出结果如图 1 所示。
图 1：自定义工具函数
在这个例子中，我们采取自定义工具函数的方式定义了一个 maxNum() 函数，用于计算两个数的最大值。应特别注意一点，自定义的工具函数与普通函数在调用时是不一样的。对于自定义的工具函数，我们需要在前面加上$.，以表示这是属于 jQuery 对象下的一个函数。
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:jQuery工具函数简介
下一篇:jQuery $.each()方法的用法
推荐内容
相关内容
栏目更新
栏目热门
湘公网安备 43102202000103号