参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
jQuery插件分类：
1.封装方法插件（常用）
是对象级别的插件，通过jQuery选择器获取对象，然后为对象添加方法。即可使用，例如：$("li").foucsColor();
编写简单，容易调用。
2.封闭函数插件
是类级别的插件，就是可以直接给jQuery添加静态方法。类似于$.ajax(),$.trim();
3.选择器插件（很少用）
插件开发要点：
1.插件名称必须遵循jQuery.[插件名称].js，例如：jQuery.newplugin.js
2.对象级别插件，使用jQuery.fn.extend()方法进行扩展
类级别插件，使用jQuery.extend()方法进行扩展
3.结尾都必须以;结尾
4.插件内部可以使用this来获取元素，this.each遍历全部元素
5.为了保证jquery原有的能使用方法链的形式调用多个方法，每个插件本身最后比较返回一个jquery对象，也就是this
插件开发示例：
1、对象级别插件开发示例：jquery.lifocuscolor.js
|
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
27
|
/*-----------------------------------/
功能：设置ul中li的鼠标经过和离开背景色
参数：【li_col】可选，鼠标所在行的颜色
返回：原调用的对象
示例：$("ul").focusColor(); 或者$("ul").focusColor("red");
/-----------------------------------*/
;(
function
($){
$.fn.extend({
"focusColor"
:
function
(li_col){
//focusColor表示插件名称，li_col表示调用该函数时参数
//插件具体代码开始
//1.设置默认属性
var
def_col =
"#ccc"
;
var
lst_col =
"#fff"
;
li_col = (li_col == undefined)?def_col:li_col;
//2.插件实现代码
this
.find(
"li"
).each(
function
(index, el) {
$(
this
).mousemove(
function
() {
//鼠标经过
$(
this
).css(
"background-color"
,li_col);
}).mouseout(
function
() {
//鼠标离开
$(
this
).css(
"background-color"
,
"#fff"
);
});
return
$(
this
);
//返回jQuery对象
})
//插件具体代码结束
}
})
})(jQuery);
|
测试jquery.lifocuscolor.js插件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
script
type
=
"text/javascript"
src
=
"jquery-1.4.4.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.lifocuscolor.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(function(){
// $("#ul").focusColor();//使用默认样式
$("#ul").focusColor("red");//鼠标经过红色
});
</
script
>
<
title
>测试lifocuscolor插件</
title
>
</
head
>
<
body
>
<
ul
id
=
"ul"
>
<
li
>张三</
li
>
<
li
>李四</
li
>
<
li
>王五</
li
>
<
li
>赵六</
li
>
</
ul
>
</
body
>
</
html
>
|
默认样式调用结果：
使用红色调用结果：
2、类级别插件开发示例：jquery.twoaddresult.js
|
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
|
/*-----------------------------------/
功能：计算两个数字相加或相减的结果
参数：数字p1，p2
返回：原调用的对象
示例：$.addNum(1,2); $.subNum(4,2);
/-----------------------------------*/
;(
function
($){
$.extend({
"addNum"
:
function
(p1,p2){
//两数相加
p1 = (p1 == undefined)?0:p1;
p2 = (p2 == undefined)?0:p2;
var
resultInt = parseInt(p1) + parseInt(p2);
return
resultInt;
},
"subNum"
:
function
(p1,p2){
//两数相减
var
resultInt = 0;
p1 = (p1 == undefined)?0:p1;
p2 = (p2 == undefined)?0:p2;
if
(p1 > p2) {
resultInt = parseInt(p1) - parseInt(p2);
};
return
resultInt;
return
$(
this
);
}
});
})(jQuery);
|
测试twoaddresult插件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
script
type
=
"text/javascript"
src
=
"jquery-1.4.4.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.twoaddresult.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(function(){
console.info($.addNum(-2,2));//0
console.info($.subNum(4,2));//2
});
</
script
>
<
title
>测试twoaddresult插件</
title
>
</
head
>
<
body
>
</
body
>
</
html
>
|
747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
