QQ登录 - 设为首页 - 加入收藏 - 网站地图 木易瓶子屋!第一时间了解互联网开发技术新鲜事儿!

亲!来点一下试试嘛。。。

木易瓶子屋每日新鲜技术平台 第一时间了解互联网的那些事儿

JQuery添加扩展方法($.extend(),与$.fn.extend()的区别)

作者:木易瓶子┆ 分类:服务器技术┆时间:2015-01-01┆点击: 45次┆tags: JQuery扩展方法$.extend()$.fn.extend()

理解$.extend(),与$.fn.extend()方法区别

1.$.extend()方法

$.extend()方法在JQuery中有两个用法,第一次是扩展方法,

第二个方法是

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

返回值:Object

把2个对象合并得到新的target,deep是可选的(递归合并)

合并 settings 和 options,修改并返回 settings。

jQuery 代码:
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }

描述:

合并 defaults 和 options, 不修改 defaults。

jQuery 代码:
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

2中扩展:

第一种,看代码

[javascript] view plaincopyprint?
  1. $(function(){  
  2.             jQuery.extend({  
  3.                 modalshow: function (options) {  
  4.                     var defaults = {  
  5.                         triggerID: 'LoginShow',  
  6.                         callback: function () { }  
  7.                     }
           //这里是$.extend的第二种用法
           var opts = $.extend({},defaults, options);
      
  8.                     if ($("#" + opts.triggerID)[0] == null) {  
  9.                         var $triggerBTN = $('');  
  10.                         $triggerBTN.bind("click"function () {  
  11.                             alert(opts.triggerID);  
  12.                         });  
  13.                         $("body").append($triggerBTN);  
  14.                     } else {  
  15.                         $("#" + opts.triggerID).bind("click"function () {  
  16.                             alert(opts.triggerID);  
  17.                         })  
  18.                     }  
  19.                 }  
  20.             });  
  21.             $.modalshow();//这里是调用的地方,id为'loginshow'的button可以先不再HTML中添加可以自动生成  
  22.         })  
  23. 第二种扩展  
  24. ?  
  25. $(function(){  
  26.             jQuery.fn.extend({  
  27.                 modalshow: function (options) {  
  28.                     var defaults = {  
  29.                         //这里的this是JQuery对象  
  30.                         triggerID: this.attr("id"),  
  31.                         callback: function () { }  
  32.                     }
             //这里是$.extend的第二种用法
             var opts = $.extend(defaults, options);
      
  33.                     $("#" + opts.triggerID).bind("click"function () {  
  34.                           alert(opts.triggerID);  
  35.                     })  
  36.                 }  
  37.             });  
  38.             $("#loginShow").modalshow();//这里是调用的地方,这里需要先在HTML中加入元素  
  39.         }) 
欢迎转载但请注明出处及链接,商业媒体使用请联系编辑(QQ 363630845)。
JQuery,扩展方法,$.extend(),$.fn.extend()
正在加载中……