码迷,mamicode.com
首页 > Web开发 > 详细

jQuery.extend()与 jQuery.fn.extend()比较

时间:2015-03-02 19:11:55      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:jquery扩展

相同点

两者都是用来扩展 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>

jQuery.extend()与 jQuery.fn.extend()比较

标签:jquery扩展

原文地址:http://blog.csdn.net/ruoyiqing/article/details/44021049

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!