$.extend讲解

发布于,归属于jquery教程沙发还空着,抢! 共有138人围观    

$.fn.extend()和$.extend()这二个方法是扩展jQuery,制作JQ插件的关键方法。看个实例

  1. jQuery.fn.debug = function(msg) { 
  2.      this.each(function(){      
  3.             if(window.console) {         
  4.                 console.debug(message);        
  5.             } else {           
  6.                 alert(message);       
  7.             }    
  8.     });   
  9.     return this;
  10. };

使用方法:

  1. $.debug('test');
  2. $('div').debug('test');

可以看到,我们新定义的debug方法,已经可以直接用了。以下是几点注意事项

1、在函数体里,this指代的是当前的jQuery对象
2、在函数结束后,返回jQuery对象
3、使用this.each来遍历每一个符合的元素
4、使用jQuery而不是$

如果只想使用静态方法,可以这样

  1. jQuery.log =
  2.     { 
  3.        
  4.     error:function(msg){console.error(msg)},
  5.       
  6.     info:function(msg){console.info(msg)} 
  7.     };
  8. //使用方法
  9. $.log.info('info');

如果我们想给自定义函数设置默认的选项,同时又允许传入新的参数来覆盖原先的选项,这时就要请$.extend出场了
$.extend会把后面的object里的属性都添加到第一个参数上,如果该属性已经存在,则覆盖之,比如

  1. jQuery.fn.pluginName = function(url, options) { 
  2. // 先定义默认的选项,同时可以被options覆盖
  3. settings = jQuery.extend({    
  4.     name: "defaultName",    
  5.     size: 5,    
  6.     global: true 
  7.     }, options)
  8. // 也可以这样  
  9. settings
  10.     {    
  11.     name: "defaultName",     
  12.     size: 5,    
  13.     global: true
  14.     }  
  15. jQuery.extend(settings,options)
  16. //接下来就可以使用settings这个object了
  17. }

实际上我自己是很少使用jq插件的写法,还是比较喜欢面向对象的写法。
原文:http://lab.pianzhizhe.com/archives/28

(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)