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

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); // => 2jQuery.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();