jQuery插件( jquery.extend 与 jquery.fn.extend的区别)

最新推荐文章于 2023-05-24 13:37:15 发布

原创最新推荐文章于 2023-05-24 13:37:15 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件 #jquery

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用jQuery创建全局及实例插件，并详细解释了jQuery.extend与jQuery.fn.extend的使用方法，包括静态方法和实例方法的扩展技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery插件

第三方插件能帮我们提高开发效率。不用再自己重复造轮子

开源社区：http://www.oschina.net/project/tag/273/jquery/
jQuery插件网：https://www.jq22.com/

如何创建jQuery插件：

http://learn.jquery.com/plugins/basic-plugin-creation/

jQuery插件机制

全局插件:如 $.cookie

实例插件: 如 $().val()

//全局插件,静态方法
 $.abc = function(){}
 $.extend({
     abc: function(){}
})

//实例插件,实例方法
$.fn.abc = function(){}
$.fn.extend({
   abc: function(){}    
})

1、全局jQuery函数扩展方法


    $.pluginName = function() {};
    $.setOneColor = function (aaa) {
                aaa.css("color","blue");
            }
    //测试
    $("button").click(function () {
          $.setOneColor($(this));
            });

2、实例插件jQuery.fn.pluginName


    //只增加一个插件方法
    $.fn.setColor = function () {
                this.css("color","red");
            }
    //测试
    $("button").click(function () {
         $(this).setColor();
                }
            );

3、 jquery.extend 与 jquery.fn.extend的区别和使用

$.extend()方法在JQuery中有两个用法，第一种是扩展方法，第二种是用jquery实现的继承方式

3.1 jquery.extend

1、扩展方法
jQuery.extend对jQuery对象的扩展，可以理解为静态方法，是全局的，不需要实例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

2、 jQuery实现的继承方式(属性复制)

合并两个或更多的对象的内容汇集到第一个对象。

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

返回值:Object
把2个对象合并得到新的target,deep是可选的（递归合并，即深拷贝）

把后面对象的属性覆盖掉前面对象的属性，有的话就覆盖，没有的话就追加上。


    var obj = {
         name : 'lisi',
         age : '12',
         sex : 'male',
     }
     var obj1 = {
         name : 'zhangsan',
         score : 100,
     }
     $.extend(obj,obj1);
    console.dir(obj);

这里写图片描述

// 浅层复制（只复制顶层的非 object 元素）
var newObject = jQuery.extend({}, oldObject);

// 深层复制（一层一层往下复制直到最底层）
var newObject = jQuery.extend(true, {}, oldObject);

//测试如下：
var obj1 = {
  'a': 's1',
  'b': [1,2,3,{'a':'s2'}],
  'c': {'a':'s3', 'b': [4,5,6]}
}

var obj2 = $.extend(true, {}, obj1);
obj2.a='s1s1';
obj2.b[0]=100;
obj2.c.b[0]=400;

console.log(obj1);
console.log(obj2);

属性复制的底层实现：for in 遍历

    var obj = {
         name : 'lisi',
         age : '12',
         sex : 'male',
         friend : {
             name : 'zhangsan',
             age : 12
         }
     }
     var obj1 = {
         name : 'zhangsan',
         score : 100,
         friend : {
             name : 'zhaoliu',
             sex : 'female'
         }
     }
    for(var key in obj1){
        obj[key] = obj1[key];
    }
     console.dir(obj);

这里写图片描述

如果对象里面的属性，里面的对象也要实现存在的属性替换，不存在的属性追加这一比较复杂的功能，可以使用jQuery.extend(true,obj,obj1);

3.2 jquery.fn.extend

对jQuery元素的扩展，只能用在jQuery元素上，可以理解为普通方法。定义插件时需要返回this，以支持jQuery的链式操作。


    jQuery.fn.extend({
      red: function() {
        return $(this).css('color', '#ff0000');
      }
    });
    $('#test').red();