jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

  jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法.

  例如:

  

复制代码 代码如下:

  jQuery.extend({

  showName : function(name){

  alert(name)

  }

  });

  jQuery.showName("深蓝");

  jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象.

  例如:

  

复制代码 代码如下:

  var a = {

  name : "blue",

  pass : 123

  }

  var b = {

  name : "red",

  pass : 456,

  age : 1

  }

  var c = jQuery.extend({},a,b);

  c拥有a,b对象的属性,由于,b对象在a对象之后,其name属性优先在c对象里.

  jQuery.extend()方法为插件传递系列选项,包括默认值.

  

复制代码 代码如下:

  function fn(options){

  var options = jQuery.extend({ //默认参数选项列表

  name1 : value1,

  name2 : value2,

  name3 : value3

  },options); //使用函数的参数覆盖或合并到默认参数选项列表中

  //函数体

  }

  fn({ name1 : value3, name2 : value2 , name3 : value1 });//使用新值

  fn({ name4 : value3, name5 : value2 });//在默认上添加新选项

  fn(); //保持默认选项值

  当在调用该方法时,传递新的参数值,就会覆盖掉默认的参数选项值,否则,使用默认参数值.

  使用JQuery.fn对象创建JQuery对象方法

  可以通过jQuery.fn对象来添加属性和方法,实际上jQuery.fn对象就是挂接在jQuery.prototype上的,jQuery把它简写了.

  fn 是什么东西呢。查看jQuery代码,就不难发现。

  

复制代码 代码如下:

  jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

   //......

  };

  原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

  例如:

  

复制代码 代码如下:

  jQuery.fn.test = function(){

  alert("这是jQuery对象方法!");

  }

  jQuery("div").click(function(){

  $(this).test(); //在当前的jQuery对象上调用test()方法

  });

  我们可以调用jQuery.fn.extend()方法来创建jQuery对象方法.

  

复制代码 代码如下:

  jQuery.fn.extend({

  test : function(){

  return this.each(function(){

  alert(this.nodeName)

  });

  }

  });

  jQuery("body *").click(function(){

  $(this).test(); //调用jQuery对象方法

  });

  一句话:jQuery.extend是对JQuery类的自定义扩展,jQuery.fn.extend是对JQuery对象的自定义扩展.