• jQuery.fn的作用是什么


    jQuery.fn的作用是什么:
    在自定义jQuery插件中,会经常见到jQuery.fn的身影,下面就简单介绍一下它的作用到底是什么。
    想要认识它的本质,最好的办法直接看jQuery的源码,否则一切都是根据现象进行的猜测,难免出现失误。
    jQuery1.83中的代码如下:

    [HTML] 纯文本查看 复制代码运行代码
    1
    2
    3
    jQuery.fn = jQuery.prototype = {
       //代码
    }

    由上面的代码可以清晰的看出jQuery.fn执行jQuery的原型对象。
    明白了上面的道理也可以有助于对其他函数的理解,例如

    [HTML] 纯文本查看 复制代码运行代码
    1
    jQuery.fn.extend(object)

    以上代码可以为jQuery对象添加方法,可以和以下方法一起学习:

    [HTML] 纯文本查看 复制代码运行代码
    1
    jQuery.extend(object);

    以上代码可以为jQuery"类"添加方法,当然js中并没有类这个概念,不过就是那个意思。
    相关阅读:
    1.jQuery.extend()函数可以参阅jQuery.extend()方法一章节。

    2.jQuery.fn.extend()函数可以参阅$.extend()和$.fn.extend()区别一章节。

    jQuery.extend()方法的定义和用法:
    此方法用一个或多个其他对象来扩展一个对象,并返回被扩展的对象。
    这有助于插件作者为jQuery增加新方法。

    语法结构:

    [HTML] 纯文本查看 复制代码运行代码
    1
    jQuery.extend(deep, target, object1,object2,.. objectN)

    参数列表:

    参数 描述
    deep 可选。如果设为true,则递归合并。
    target 可选。待修改对象。
    object1 待合并到第一个对象的对象。
    objectN 可选。待合并到第一个对象的对象


    如果不指定target,则给jQuery命名空间本身进行扩展。
    如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。
    未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。
    代码实例:

    [HTML] 纯文本查看 复制代码运行代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>$.extend()用法详解-蚂蚁部落</title>
    <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      var settings={validate:false,limit:5,name:"foo"};
      var options={validate:true,name:"bar"};
      $.extend(settings,options);
      $.each(settings,function(i,n){
        alert("Item #" + i + ":"+ n);
      })
    })
    </script>
    </head>
    <body>
    </body>
    </html>


    注意:运行编辑器之后,再按F5刷新网页即可查看演示。

    $.extend()和$.fn.extend()用法和区别:
    在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区别是巨大的,下面就简单介绍一下它们的区别是什么。
    在javascript中,没有尽管没有类这个概念,但是作为一门面向对象的语言,其实是有着类似于类的实际应用,那么从标准面向对象的概念来说,jQuery就是一个封装好了的jQuery类,那么通过选择器获得的就是jQuery对象实例。
    一.$.extend():
    此方法是用来扩展jQuery类,它所方法是全局性,直接用jQuery类即可引用,例如:

    [HTML] 纯文本查看 复制代码运行代码
    1
    2
    $.extend({minValue:function(a,b){return a<b?a:b;}})
    $.minValue(5.6);

    一般也可以把这类函数称作为工具函数,它们不直接操作DOM元素,而是操作Javascript的非元素对象,或者执行其他非对象的特定操作。
    更多相关$.extend()函数的用法可以参阅$.extend()函数用法详解一章节。
    二.$.fn.extend():
    此方法则是用来扩展jQuery的实例方法,也就是说jQuery类的实例对象可以调用此函数,代码如下:

    [HTML] 纯文本查看 复制代码运行代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    <script type="text/javascript">
    $(document).ready(function(){
       $.fn.extend({
       theAlert:function(){
          alert("自定义的函数");
        }
      })
      $("thediv").theAlert()
    })
    </script>
    </head>
    <body>
      <div id="thediv">按钮</div>
    </body>
    </html>

    以上代码通过$.fn.extend()方法为jQuery扩展一个实例方法,那么就必须要用对象实例来调用此方法,$("thediv")就是一个对象实例,这样它就可以调用添加的方法,当然在实际的开发中,几乎不可能有这么简单的例子,这里只是讲述一下原理。

  • 相关阅读:
    涡轮增压中冷器
    TortoiseSVN文件及文件夹图标不显示解决方法
    无线路由器无法登录管理界面,怎么办?
    TP-LINK-TL-WVR450G路由器经常断网
    阿里云DNS地址
    农村社保和职工社保能同时交吗?
    电视机顶盒遥控器可以同时遥控电视和机顶盒
    各种汽车的高端品牌
    金蝶云星空系统打印提示:对象不支持“SetGraphicsMode”属性或方法
    怎么去掉视频的背景音乐?
  • 原文地址:https://www.cnblogs.com/ejllen/p/3716284.html
Copyright © 2020-2023  润新知