jQuery插件
来源:互联网 发布:linux 内核下载 编辑:程序博客网 时间:2024/06/07 03:49
参考:jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
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
>
来自为知笔记(Wiz)
0 0
- jquery插件
- jquery 插件
- jQuery插件
- jquery 插件
- Jquery插件
- jquery 插件
- JQUERY 插件
- jquery 插件
- jquery插件
- jQuery插件
- jquery 插件
- JQuery插件
- Jquery插件
- jQuery插件
- JQuery插件
- jquery 插件
- Jquery 插件
- jQuery插件
- jQuery操作dom
- jQuery操作dom事件
- 说不完的JavaScript的作用域
- jQuery动画与特效
- jQuery操作Ajax
- jQuery插件
- jQuery对象和dom对象
- dict和set的使用
- jQuery实现点击式选项卡
- eclipse中在框架开发时编写xml等配置文件的时候,引号中的包、路径等文件不提示的解决方法
- jQuery实现导航栏
- jQuery实现select三级联动
- SpringXML方式配置bean的懒加载lazy-init
- SpringXML方式配置bean的生命周期lifecycle