• 【JavaScript】JQuery中$.fn、$.extend、$.fn.extend


    Web开发肯定要使用第三方插件,对于一个炫丽的效果都忍不住想看看对方是如何实现的,刚下载了一个仿京东商品鼠标经过时局部放大的插件。看了两眼JQuery源码,看看就感觉一头雾水。JQuery本来自己学的就半吊子,再加智商又不惊人。。。当开发插件的时候难免会使用$.fn与$.extend。原来看到这个时候非常抵触,今天再次看到的时候简单的查了查外加一个Demo实验了一下。以下为几分钟补脑后的小记,如有错误请大神急时指出以免误导他人。

    进入正题:

    1、$.fn.【UserDefinitionName】(PS:UserDefinitionName为自定义的方法名称)

    $.fn是指JQuery的命名空间,加上fn上的方法及属性,会对JQuery实例每一个都有效。例如:

        <script type="text/javascript">

            $.fn.sayhello = function () { alert('提示:$.fn.sayhello'); };

            $(document).ready(function () {

                $("#btn").sayhello();     // btn为Button的Id

            });

    </script>

    注:我对$.fn的理解是相当于给一个Object对象添加了一个扩展方法(PS:个人观点)

    2、$.extend

           其实他和$.fn是非常相似的,详细做Web的人大部分都用过$.ajax、$.get等方法,而这个$.extend就是用来添加自定义”静态”方法的。例如:

    <script type="text/javascript">

            $.fn.sayhello = function () { alert('提示:$.fn.sayhello'); };

     

            $.extend({

                sayChinese: function () { alert('提示:世界、你好!');},

                sayEnglish: function () { alert('Message:Hello World !');}

            });

            $(document).ready(function () {

                $("#btn").sayhello();

                $.sayChinese();

                $.sayEnglish();

            });

    </script>

             3、$.fn.extend

                       如果你要问我这个与$.fn.【UserDefinitionName】有什么区别,那我只能说“我母鸡耶。。。”!我测试了一下他与$.fn.【UserDefinitionName】都能实现Object对象的扩展方法。原因我不清楚。不过还是贴出这个的代码吧

    <script type="text/javascript">

            $.fn.sayhello = function () { alert('提示:$.fn.sayhello'); };

     

            $.extend({

                sayChinese: function () { alert('提示:世界、你好!');},

                sayEnglish: function () { alert('Message:Hello World !');}

            });

     

            $.fn.extend({

                objectMethod: function () { alert('提示:$.fn.extend'); }

            });

     

            $(document).ready(function () {

                $("#btn").sayhello();

                $.sayChinese();

                $.sayEnglish();

                $("#btn").objectMethod();

            });

    </script>

    4、$.【UserDefintionName】

    这个与$.extend如出一辙,如果硬要让我说他俩不同点那只能说写法不通了

    <script type="text/javascript">

            $.fn.sayhello = function () { alert('提示:$.fn.sayhello'); };

     

            $.extend({

                sayChinese: function () { alert('提示:世界、你好!');},

                sayEnglish: function () { alert('Message:Hello World !');}

            });

     

            $.fn.extend({

                objectMethod: function () { alert('提示:$.fn.extend'); }

            });

     

            $.CodeMonkey = function () { alert('CodeMonkey是神!');};

     

            $(document).ready(function () {

                $("#btn").sayhello();

                $.sayChinese();

                $.sayEnglish();

                $("#btn").objectMethod();

                $.CodeMonkey();

            });

    </script>

  • 相关阅读:
    1. Dubbo原理解析-Dubbo内核实现之SPI简单介绍 (转)
    经典算法问题的java实现 (二)
    经典算法问题的java实现 (一)
    Bitmap的秘密
    Java Networking: UDP DatagramSocket (翻译)
    Java字节码浅析(二)
    Sql server 浅谈用户定义表类型
    Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库
    ASP.NET获取上传图片的大小
    ASP.Net大文件上传组件详解
  • 原文地址:https://www.cnblogs.com/MangoCai/p/4250514.html
Copyright © 2020-2023  润新知