jQuery.extend(object) 扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

我们先把jQuery看成了一个类，这样好理解一些。

jQuery.extend()，是扩展的jQuery这个类。

假设我们把jQuery这个类看成是人类，能吃饭能喝水能跑能跳，现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。这样的话，不论是男人，女人，xx人.....等能继承这个技能（方法）了。

jQuery.extend({

    sing:function(){

        alert("sing");

    }

});
<!DOCTYPE html>

<html>

    <head></head>

    <script src="jquery.min.js"></script>

    <script>

        ;(function($){

            $.extend({

                sing:function(){

                    alert("sing");

                };

            });

        })(jQuery);

    </script>

    <script>

        $(document).ready(function(){

            $.sing();

        });

    </script>

</html>

这说明啥啊，这说明sing()变成了jQuery这个类本身的方法（object）嘛。他现在能”唱歌“了。

但是吧，这个能力啊，只有代表全人类的 jQuery 这个类本身，才能用啊。你个人想用，你张三李四王五麻六，你个小草民能代表全人类嘛？

所以啊，这个扩展也就是所谓的静态方法。只跟这个类本身有关。跟你具体的实例化对象是没关系滴。

我们再看看jQuery.fn.extend()这个方法。

从字面理解嘛，这个拓展的是jQuery.fn的方法。

jQuery.fn是啥玩意呢？

源码如下

jQuery.fn = jQuery.prototype = {

    init:function(selector,context){

        //code

    }

};

哦，原来jQuery.fn=jQuery.prototype，就是原型啊。

那就一目了然了，jQuery.fn.extend拓展的是jQuery对象（原型的）的方法啊！

对象是啥？就是类的实例化嘛，例如，$("#abc")

这个玩意就是一个实例化的jQuery对象嘛。

那就是说，jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！他得是张三李四王五痳六这些实例化的对象才能用啊。

说白了就是得这么用：假设xyz()是拓展的方法，$('selector').xyz();

你要是写成$.xyz();是会出错误滴。

代码如下

<!DOCTYPE html>

<html>

    <head></head>

    <script src="jquery.min.js"></script>

    <script>

        ;(function($){

            $.fn.extend({

                sing:function(){

                    alert("sing");

                };

            });

        })(jQuery);

    </script>

    <script>

        $(document).ready(function(){

            $("#test_div").sing();

        });

    </script>

    <body>

        <div id="test_div"></div>

    </body>

</html>

其实吧，jQuery.extend()这个方法，主要是用来拓展个全局函数啦，例如$.ajax()这种，要不就是拓展个选择器啦，例如$.fn.each()，当选择器用。

大部分插件都是用jQuery.fn.extend()。

jQuery.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法。如：

jQuery.extend({

min: function(a, b) { return a < b ? a : b; },

max: function(a, b) { return a > b ? a : b; }

});

jQuery.min(2,3); //  2

jQuery.max(4,5); //

Objectj jQuery.extend( target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" }; 

//结果：settings被options修改,变成了{ validate: true, limit: 5, name: "bar" }

jQuery.extend(settings, options);

jQuery.fn.extend(object)

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({

    alertWhileClick:function() {

          $(this).click(function(){

                 alert($(this).val());

           });

     }

});

$("#input1").alertWhileClick();

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这 是很重要的，在jQuery.js中到处体现这一点

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的prototype里去，这样的话就是插件机制了。

(function($){

    $.fn.tooltip = function( options ) {

        //code

    };

        //等价于

    var tooltip = {

        function(options){

        //code

        }

    };

    $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip

})( jQuery );

随机推荐

  1. L1正则化与L2正则化的理解

    1. 为什么要使用正则化   我们先回顾一下房价预测的例子.以下是使用多项式回归来拟合房价预测的数据:   可以看出,左图拟合较为合适,而右图过拟合.如果想要解决右图中的过拟合问题,需要能够使得 $ ...

  2. MDL详解

    以下的虚拟内存可以理解成逻辑内存,因为我觉得只有这样才能讲通下面所有的东西.以下的“未分页”指没有为页进行编码. 以下为MDL结构体(我很郁闷,我在MSDN上没有找到这个结构体) typedef st ...

  3. 如何解决Unsupported Architecture. Your executable contains unsupported architecture '[x86_64, i386]

    APP改版测试后准备Archive发布时,结果居然出现题目中的错误提示.查了一下,如果archive的时候没有选[iOS](http://lib.csdn.net/base/ios)  Devices ...

  4. CCF——相邻数对201409-1

    问题描述 给定n个不同的整数,问这些数中有多少对整数,它们的值正好相差1. 输入格式 输入的第一行包含一个整数n,表示给定整数的个数. 第二行包含所给定的n个整数. 输出格式 输出一个整数,表示值正好 ...

  5. python基础（一）简单入门

    一.第一个python程序 1.交互式编程 直接在命令行里面输入python即可进入python交互式命令行,linux下一样: 在 python 提示符中输入以下文本信息,然后按 Enter 键查看 ...

  6. 【移动端debug-1】css3中box-shadow的溢出问题

    今天做项目遇到一个box-shadow的溢出父容器的问题,如下面的代码中,子容器inner的box-shadow在没有任何设置的情况下是溢出父容器的. 代码: <!DOCTYPE html> ...

  7. 第167天：canvas绘制柱状图

    canvas绘制柱状图 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. HDU4675_GCD of Sequence

    很有意思的一个数论题. 是这样的,给你一个数数组a[i],其中给出的每一个数字和要求的数字方位都是[1,m],现在问你根据a[]构造一个b[],且a和b中间的不相等的元素的个数恰好有k个. 现在问你g ...

  9. 洛谷 P2055 [ZJOI2009]假期的宿舍

    洛谷 P2055 题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如 A 和 B 都是学校的学生,A 要回家,而 C 来看B,C ...

  10. （转）修改Android 的framework层后，重新编译

    1.下面方法适合真机:下载android源码,然后编译你修改的framwork的代码,会生成framework.jar,然后push到system/framework目录下,重启机器!ok 2,下面方 ...