-
- 相同点
- 不同点
- jQueryextend
- jQueryfnextend
- 代码示例
相同点
两者都是用来扩展 jQuery，为 jQuery添加方法的，在开发jQuery 的相关插件时经常用到。
不同点
jQuery.extend()
为 jQuery 类本身添加类方法，即为静态方法；
调用添加的方法时只能通过 jQuery 本身来调用，jQuery 实例对象是无法调用新添加的方法的。比如 添加了 show 和 hide 方法，则调用方式为： jQuery.show()和 jQuery.hide().
jQuery.fn.extend()
看 jQuery 的源代码时会看到： jQuery.fn=jQuery.prototype，不难发现 jQuery.fn实际即为 jQuery 的原型。则调用jQuery.fn.extend()实际是在扩展jQuery.prototype对象的方法。由于 jQuery原型中的所有成员方法会被所有jQuery实例对象继承，则只要是 jQuery 实例对象就有添加的方法。
与 jQuery.extend()不同，jQuery.fn.extend()是为jQuery 原型添加方法，即为jQuery实例对象的成员方法。
调用方式也发生了改变，不用通过 jQuery 本身来调用添加的方法，所有 jQuery 实例对象都可以调用。
代码示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery.extend()</title>
</head>
<body>
<div id="sample">extend</div>
</body>
<script src="jquery-1.11.0.js"></script>
<script>
$(document).ready(function($){
jQuery.extend({
show:function(){
alert("show message!");
},
hide: function () {
alert("hide message!");
}
});
jQuery.hide();
jQuery.show();//使用jQuery本身调用新添加的方法
})
jQuery(function($){
jQuery.fn.extend({
show:function(){
alert("show message!");
},
hide: function () {
alert("hide message!");
}
});
$("#sample").show();
$("#sample").hide();//使用jQuery 实例对象调用新添加的方法
})
</script>
</html>时间： 2024-10-13 13:54:32