$.fn.extend和$.extend的用法

最新推荐文章于 2020-09-08 17:33:01 发布
最新推荐文章于 2020-09-08 17:33:01 发布
阅读量280 收藏 1
点赞数 1
分类专栏： javascript 文章标签： $.fn.extend $.extend
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010156872/article/details/82932929
版权

$.fn.extend  给jquery对象添加方法，相当于把方法扩展到了对象的prototypes上。

$.extend 给jquery类添加方法，可理解为静态方法，可直接调用。

<!doctype html>
<html>
<head>
    <meta charset="urf-8">
    <title>Demo</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <input id="input1" value="" />
    <input id="input2" value="" />
    <input id="input3" value="" />
    <input id="input4" value="" />

    <script type="text/javascript">
        //$.fn.extend
        $.fn.addTest = function (a, b) {
            return a + b;
        };
        //$.fn.extend
        $.fn.extend({
            mulipTest: function (a, b) {
                return a * b;
            }
        });

        //$.extend
        $.minusTest = function (a, b) {
            return a - b;
        };
        //$.extend
        $.extend({
            divisionTest: function (a, b) {
                return a / b;
            }
        });

        var result = $("#input1").addTest(1, 2);
        $("#input1").val(result);

        var result2 = $("#input2").mulipTest(3, 4);
        $("#input2").val(result2);

        var result3 = $.minusTest(10, 8);
        $("#input3").val(result3);

        var result4 = $.divisionTest(27, 3);
        $("#input4").val(result4);

    </script>
</body>
</html>

结果

忆落
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery的.fn.extend使用方法
海生的博客
08-03 652
jQuery为开发插件提拱了两个方法，分别是： $.fn.extend()和$.extend(); 下面来看下两个方法的具体使用： 1)  $.extend() extend(data,src1,src2,src3…);该方法是将src1,src2,src3…合并到data中,返回值为合并后的data。 var newObj=$.extend({},s
$.fn.extend详解
why2010ps的专栏
01-27 558
看别人的js代码，看到$.fn.extend，不懂事啥意思，百度学习了下。这里做个小总结。首先，.extend和.extend和.fn.extend都是用来扩展jQuery的。区别是.extend扩展的是JQuery的全局对象，.extend扩展的是JQuery的全局对象，.fn.extend扩展的是JQuery的实例对象。Demo说话，//扩展到全局Jquery对象 $.extend({
$.fn.extend简单学习
weixin_34191845的博客
07-24 102
(function($){ /** 1. $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法, 那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子：$("#div").abc(); 2....
JQ_插件开发
weixin_30394981的博客
07-22 179
在开发过很多 jQuery 插件以后，我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以 copy & paste 大部分的代码结构，只要专注最主要的逻辑代码就行了。使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂。我在这里分享10条我总结的经验。1. 把你的代码全部放在闭包里面...
【JavaScript】JQuery中$.fn、$.extend、$.fn.extend
weixin_30628077的博客
01-26 84
Web开发肯定要使用第三方插件，对于一个炫丽的效果都忍不住想看看对方是如何实现的，刚下载了一个仿京东商品鼠标经过时局部放大的插件。看了两眼JQuery源码，看看就感觉一头雾水。JQuery本来自己学的就半吊子，再加智商又不惊人。。。当开发插件的时候难免会使用$.fn与$.extend。原来看到这个时候非常抵触，今天再次看到的时候简单的查了查外加一个Demo实验了一下。以下为几分钟补脑后的小记，如有...
深入理解jquery的$.extend()、$.fn和$.fn.extend()
10-19
在jQuery中，`$.extend()`、`.fn`（即`jQuery.fn`）和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...
Jquery实现$.fn.extend和$.extend函数
10-22
接着，他们分别实现了`_$.fn.extend`和`$.extend`，这两个方法都遍历传入的对象并将其属性复制到`this`对象上。`isObj`函数用于检查传入的对象是否是真正的JavaScript对象。 `_$.fn.extend`中的`this`指的是`$....
jQuery中$.fn的用法示例介绍
01-19
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子：...
jquery $.fn.extend
09-04
`$.fn.extend`是jQuery库中的一个核心方法，主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数，从而实现对DOM元素的操作或添加新的功能。在jQuery中，`$.fn`实际上是`$.prototype`的一个...
jQuery插件开发的两种方法及$.fn.extend的详解
12-10
开发扩展其方法时使用$.extend方法，即jQuery.extend(object); 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用： 代码如下: var i = $.add(3,2); var j ...
jQuery.fn.extend() 函数详解
时清云的博客
03-31 705
jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。 jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。 该函数属于jQuery的原型对象(jQuery.fn)。 语法 jQuery 1.0 新增该静态函数。
$.fn.extend
qq_31123547的博客
01-20 291
在做动态生成属性列表的时候，有一项是合并列表中的相同项，然后发现有也样的代码 就是这里，发现两个函数的名称一样，但是不同的函数创建方法不同。一种是使用 $.extend 另一种是使用 $.fn.extend两种有什么不同，我百度了一下，解释的比较简单易懂的是这个 http://jingyan.baidu.com/article/fec4bce259ef67f2608d8b10.html要向j
Jquery 中的扩展方法$.extend() 和$.fn.extend()
分享我的点点滴滴，在成长路上与你同行！
09-08 518
jQuery为开发插件提拱了两个方法分别是：· 1、jQuery.extend() or$.extend()函数用于将一个或多个对象的内容合并到目标对象； 语法：.extend( [deep ], target, object1 [, objectN ] ) 案例1：属性 <body> <div id="box"></div> </body> </html> <scri...
jquery的$.extend和$.fn.extend的使用详解
亿卢向倍的专栏
11-30 6499
 Jquery.extend() 可以理解成为 Jquery 类添加静态方法，扩展方法原型是： 1 extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3…合并到 dest 中，返回值为合并后的 dest ，由此可以看出该方法合并后，是修改了 dest
$.extend()和$.fn.extend()的区别和他们相应的作用
Asuria
07-07 2783
jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend(object);    给jQuery对象添加方法jQuery.extend(object);     为扩展jQuery类本身.为类添加新的方法。如果二者按照类的概念来理解的话: jQuery.extend(object)为jQuery类添加添加类方法，可以理解为添加静态方法。    // 静态方法， 跟jq实例没关...
js中$.fn.extend()和$.extend()的应用
mm_hello11的博客
10-05 1723
$.extend( [deep ], target, object1 [, objectN ] ) jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。 注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。 2. 如果多个对象具有相...
jQuery中的 $.extend() 和 $.fn.extend()
ANGWH的博客
05-24 347
$.extend() 和 $.fn.extend() 这两个方法都是给jQuery进行拓展，开发jQuery插件时经常使用 在jQuery源码中，你会看到关于这两个方法的代码的第一行是这样的 jQuery.extend = jQuery.fn.extend = function(){} 可以看出两个方法共用的是同一个函数体，所有的操作都是一样的，只不过两个方法使用的对象不同。 $.extend是为jQuery类添加添加类方法，可以理解为添加静态方法（工具方法） $.extend({ min: fu
js插件之$.extend()、$.fn和$.fn.extend()区别
sq2879897094的博客
04-26 678
jQuery为开发插件提拱了两个方法，jQuery.fn.extend();jQuery.extend(); jQuery.fn = jQuery.prototype;$(“#btn1″) 会生成一个 jQuery类的实例,即可以直接调用jQuery.prototype里面的方法。对于jQuery.extend：1、jquery.extend(obj):为jQuery类添加类方法，可以理解为添加静...
$.fn.extend({
最新发布
11-23
根据引用内容，$.fn.extend()是用来扩展jQuery实例对象的方法。下面是一个例子，演示如何使用$.fn.extend()来扩展jQuery实例对象： ```javascript // 定义一个扩展方法 $.fn.extend({ myMethod: function() { console.log("This is my custom method!"); } }); // 使用扩展方法 $("button").myMethod(); // 输出：This is my custom method! ``` 上述代码中，我们使用$.fn.extend()定义了一个名为myMethod的自定义方法，然后我们可以在任何jQuery对象上使用这个方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值