jQuery插件

参考：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>










posted @ 2015-08-21 17:19  Python魔法师  阅读(341)  评论(0)    收藏  举报