$.extend讲解
$.fn.extend()和$.extend()这二个方法是扩展jQuery,制作JQ插件的关键方法。看个实例
- jQuery.fn.debug = function(msg) {
- this.each(function(){
- if(window.console) {
- console.debug(message);
- } else {
- alert(message);
- }
- });
- return this;
- };
使用方法:
- $.debug('test');
- $('div').debug('test');
可以看到,我们新定义的debug方法,已经可以直接用了。以下是几点注意事项
1、在函数体里,this指代的是当前的jQuery对象
2、在函数结束后,返回jQuery对象
3、使用this.each来遍历每一个符合的元素
4、使用jQuery而不是$
如果只想使用静态方法,可以这样
- jQuery.log =
- {
- error:function(msg){console.error(msg)},
- info:function(msg){console.info(msg)}
- };
- //使用方法
- $.log.info('info');
如果我们想给自定义函数设置默认的选项,同时又允许传入新的参数来覆盖原先的选项,这时就要请$.extend出场了
$.extend会把后面的object里的属性都添加到第一个参数上,如果该属性已经存在,则覆盖之,比如
- jQuery.fn.pluginName = function(url, options) {
- // 先定义默认的选项,同时可以被options覆盖
- settings = jQuery.extend({
- name: "defaultName",
- size: 5,
- global: true
- }, options);
- // 也可以这样
- settings =
- {
- name: "defaultName",
- size: 5,
- global: true
- }
- jQuery.extend(settings,options);
- //接下来就可以使用settings这个object了
- }
实际上我自己是很少使用jq插件的写法,还是比较喜欢面向对象的写法。
原文:http://lab.pianzhizhe.com/archives/28


