zoukankan      html  css  js  c++  java
  • $.extend()与$.fn.extend()

    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); //  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 );
  • 相关阅读:
    php 将英文引号成对转换为中文引号
    centos 6.2 x86_64 编译安装 httpd2.4.2时,apr报错
    PHP在通过非HTTP方式或多客户端的情况下,session的共享
    用c链接mysql
    多进程和多线程有什么区别
    进程和线程的区别
    linux中重要数据声明
    春节后返校第三天
    窗外下着雨——来到南京的第一篇
    中断门与陷阱门的区别
  • 原文地址:https://www.cnblogs.com/zcynine/p/5003098.html
Copyright © 2011-2022 走看看