上一篇中讲到了扩展jquery方法,并且传递options,但当我们传递的options给定一个默认值来应对在调用扩展对象时不传递options怎么办呢?
先看代码:
$.fn.bgChange = function(options){ //给定一个默认值。 <span style="color:#FF6666;">var defaults = { color:"black",fontSize:"12" }</span> //将传递的值替换为默认值,可以避免传递的options为null和没有传递options的情况。 <span style="color:#FF6666;">var options = $.extend(defaults,options);</span> this.css("background-color",options.color); this.css("font-size",options.fontSize); }调用形式有如下三种:
1、传递所有options参数调用形式如下:
//调用时的代码如下: $(document).ready(function(){ $('#btn').on('click',function(){ $(this).bgChange({ color:"blue", fontSize:"23px" }); // alert(this); }); })2、传递部分options参数调用(未传递的参数将由默认参数补充)格式如下:
//调用时的代码如下: $(document).ready(function(){ $('#btn').on('click',function(){ $(this).bgChange({ color:"blue" }); }); })3、不传递options(系统将使用默认default)调用参数如下:
//调用时的代码如下: $(document).ready(function(){ $('#btn').on('click',function(){ $(this).bgChange(); }); })