扩展jquery的时候。最核心的方法是以下两种:
$.extend(object) 可以理解为jquery添加一个静态方法
$.fn.extend(object) 可以理解为jquery实例添加一个方法
$.extend(object)
例子:
1
2
3
4
5
6
7
8
9
10
11
12
|
/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun:
function
() { alert(
"执行方法一"
); } });
//定义
$.fun();
//调用
$.fn.extentd(object)
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun:
function
() { alert(
"执行方法"
); } });
$(
this
).fun();
//等同于
$.fn.fun =
function
() { alert(
"执行方法三"
); }
$(
this
).fun();
|
定义jquery插件的基本结构
1. 定义作用域:
为插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰,也不会污染到全局变量。
1
2
3
|
//step 定义JQuery的作用域
(
function
($) {
})(jQuery);
|
2. 为插件添加扩展方法:
1
2
3
4
5
6
7
|
//step01 定义JQuery的作用域
(
function
($) {
//step02 插件的扩展方法名称
$.fn.easySlider =
function
(options) {
}
})(jQuery);
|
3. 设置默认值:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//step 定义JQuery的作用域
(
function
($) {
//step-a 插件的默认值属性
var
defaults = {
prevId: ‘prevBtn‘,
prevText: ‘Previous‘,
nextId: ‘nextBtn‘,
nextText: ‘Next‘
//……
};
//step 插件的扩展方法名称
$.fn.easySlider =
function
(options) {
//step-b 合并用户自定义属性,默认属性
var
options = $.extend(defaults, options);
}
})(jQuery);
|
其中:var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值,并把值赋给了options。
在插件环境中,就表示用户设置的值,覆盖了插件的默认值;如果用户没有设置默认值的属性,还是保留插件的默认值。
4. 支持jquery选择器:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//step 定义JQuery的作用域
(
function
($) {
//step-a 插件的默认值属性
var
defaults = {
prevId: ‘prevBtn‘,
prevText: ‘Previous‘,
nextId: ‘nextBtn‘,
nextText: ‘Next‘
//……
};
//step 插件的扩展方法名称
$.fn.easySlider =
function
(options) {
//step-b 合并用户自定义属性,默认属性
var
options = $.extend(defaults, options);
//step 支持JQuery选择器
this
.each(
function
() {
});
}
})(jQuery);
|
5 .支持JQuery的链接调用:
为了能达到链接调用的效果必须要把循环的每个元素return
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//step 定义JQuery的作用域
(
function
($) {
//step-a 插件的默认值属性
var
defaults = {
prevId: ‘prevBtn‘,
prevText: ‘Previous‘,
nextId: ‘nextBtn‘,
nextText: ‘Next‘
//……
};
//step 插件的扩展方法名称
$.fn.easySlider =
function
(options) {
//step-b 合并用户自定义属性,默认属性
var
options = $.extend(defaults, options);
//step 支持JQuery选择器
//step 支持链式调用
return
this
.each(
function
() {
});
}
})(jQuery);
|
6. 插件里的方法:
在插件里定义的方法,外界不能直接调用,我在插件里定义的方法也没有污染外界环境。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
//step01 定义JQuery的作用域
(
function
($) {
//step03-a 插件的默认值属性
var
defaults = {
prevId: ‘prevBtn‘,
prevText: ‘Previous‘,
nextId: ‘nextBtn‘,
nextText: ‘Next‘
//……
};
//step06-a 在插件里定义方法
var
showLink =
function
(obj) {
$(obj).append(
function
() {
return
"("
+ $(obj).attr(
"href"
) +
")"
});
}
//step02 插件的扩展方法名称
$.fn.easySlider =
function
(options) {
//step03-b 合并用户自定义属性,默认属性
var
options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return
this
.each(
function
() {
//step06-b 在插件里定义方法
showLink(
this
);
});
}
})(jQuery);
|
通过以上内容给大家介绍了jQuery定义插件的方法,希望大家喜欢。