快速掌握jQuery插件开发(2)

上面的代码用到了$.extend方法,这个方法在这里的用法就是合并两个对象,即把后面一个对象的存在的属性值赋值给第一个对象,具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。

这样定义的插件,我们在使用时如果不传fontSize,那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。

使用方式:$("p").changeStyle({colorStr:"red"});

注意:在为插件定义默认参数时,一定要把默认参数写在插件方法内部,这样默认参数的作用域就在插件内部。

总结

定义插件的方式除了上面说的用$.fn来定义,还有另外一种方式来定义插件,那就是使用$.fn.extend方法。类似下面的写法:

(function($){ $.fn.extend({ changeStyle:function(option){ var defaultSetting = { colorStr:"green",fontSize:12}; var setting = $.extend(defaultSetting,option); this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px"); return this; } }); }(jQuery));

PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能,通过阅读jQuery源码我们可以发现这两个方法的本质区别,那就是$.extend方法是在jQuery全局对象上扩展方法,$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法,定义插件一般用$.fn.extend方法。

参考资料

How to Create a Basic Plugin

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdzpz.html