jQuery中extend()和fn.extend()方法详解

2024-05-06 14:41:15

字体：大中小

来源：转载

供稿：网友

这两个方法用的是相同的代码，一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例，对于基本用法举几个例子：

html代码如下：

代码如下:
<!doctype html>
<html>
   <head>
      <title></title>
        <script src='jquery-1.7.1.js'></script>
   </head>
   <body>
    <img src=''/>
   </body>
</html>

下面写js里面的用法：

合并两个普通对象

代码如下:
      //给两个普通对象合并属性
      var obj1={name:'Tom',age:22};
      var obj2={name:'Jack',height:180};
      console.log($.extend(obj1,obj2)); //Object {name: "Jack", age: 22, height: 180}

给jQuery对象添加属性或者方法

代码如下:
$.extend({hehe:function(){alert('hehe');}});
$.hehe(); //alert('hehe')

这个用法很重要，是jQuery内部添加实例属性和方法以及原型属性和方法的实现方法也是编写jQuery插件的方法,下面是jQuery1.7.1中使用extend方法扩展自己的方法和属性

代码如下:
jQuery.extend({
    noConflict: function( deep ) {
        if ( window.$ === jQuery ) {
            window.$ = _$;
        }
        if ( deep && window.jQuery === jQuery ) {
            window.jQuery = _jQuery;
        }
        return jQuery;
    },
    // Is the DOM ready to be used? Set to true once it occurs.
    isReady: false,
    // A counter to track how many items to wait for before
    // the ready event fires. See #6781
    readyWait: 1,
    .....

在这个例子中只传入了一个对象参数，那么默认就把this当做待合并修改的对象

给jQuery对象实例添加属性或者方法

代码如下:
//针对jQuery实例扩展合并
console.log($('img').extend({'title':'img'}));//[img, img#img.img, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "img", title: "img", constructor: function…]

只合并不修改待合并对象

代码如下:
var obj1={name:'Tom',age:22};
var obj2={name:'Jack',height:180};

上一篇：JavaScript中的函数嵌套使用

下一篇：JavaScript基本语法讲解