前端工程师-jQuery-理解$.extend()、$.fn.extend()、$.fn、

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30885111

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/nanshine/p/8778415.html

本文详细解析了jQuery中的三种扩展方法：jQuery.fn.extend、jQuery.extend及jQuery.fn。分别介绍了它们的用途和区别，通过示例展示了如何使用这些方法来扩展jQuery的功能。

以下是自己的理解，欢迎借鉴的小伙伴指正，谢谢谢谢

1.jQuery.fn.extend(object)：一般用来制作插件

官方解释：A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. （一个我们用于扩展jquery原型对象的新的简单的jquery插件）

一看到扩展原型对象，那就明白了就是给jquery原型上添加方法,那么生成的jquery实例都可以通过原型链的规则，使用到这个方法

<script>
        $(function() {
            $.fn.extend({
                min: function(a, b) {
                    return a < b ? a : b;
                },
                max: function(a, b) {
                    return a > b ? a : b;
                }
            });
            console.log($.min(1, 2));
            //报错：$.min is not a function
            console.log($("p").min(1, 2));
            //1
        });
    </script>

2.jQuery.extend(object)

官方解释：扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。

扩展对象本身的话，那么，实例是找不到这些方法的

<script>
        $(function() {
            $.extend({
                min: function(a, b) {
                    return a < b ? a : b;
                },
                max: function(a, b) {
                    return a > b ? a : b;
                }
            });
            console.log($.min(1, 2));
　　　　  //1
            console.log($("p").min(1, 2));        
            //报错：$(...).min is not a function
 });

3.jQuery.fn(object)

为什么放在最后说呢，请大家借鉴这个小伙伴的分享，感谢这位小伙伴，借用一下你的地址，

http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html

摘要：借鉴以上地址的，原版就戳那个地址

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//….
//……
};
所以扩展方法的时候，要写在extend里面，不能把原型都改了呀，出大事

转载于:https://www.cnblogs.com/nanshine/p/8778415.html