jquery插件开发总结

一，常用jquery插件简介：
1，jquery.validation 和 jquery metadata：
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery UI Demos</title>
    <style type="text/css">
    *{
        font-family:Verdana;
        font-size:96%;
     }
     label {width:10em; float:left; }
     label.error {float:none; color:blue;padding-left:5em;vertical-align:top;}
     p {clear:both;}
     .submit {margin-left:12em;}
     em {font-weight:bold;padding-right:1em;vertical-align:top;}
     em.error {
      background:url("images/unchecked.gif") no-repeat 0px 0px;
      padding-left: 16px;
    }
    em.success {
      background:url("images/checked.gif") no-repeat 0px 0px;
      padding-left: 16px;
    }
    </style>
    <script src="jquery-1.8.3.js" type="text/javascript" ></script>
    <script src="jquery-valid-v1_11_1/jquery.validate.min.js" type="text/javascript" ></script>
    <script src="jquery-valid-v1_11_1/localization/messages_zh.js" type="text/javascript" ></script>
    <script type="text/javascript" >
        $(function(){
            //自定义验证规则
            $.validator.addMethod("doFormula",function(value,element,param){
                return value == eval(param);
            }, "请正确输入计算结果");
  
            $("#commentForm").validate({
                rules:{
                    username:{required:true,minlength:2},
                    email:{required:true,email:true},
                    url:"url",
                    comment:"required",
                    valcode:{doFormula:"7+9"} //应用自定义验证规则
                }
                ,messages:{
                    username:{required:"姓名必填",minlength:"最少2个字"}
                }
                ,errorElement:"em"
                ,success:function(label){
                    label.text("").addClass("success");
                }
            });
        });
    </script>
</head>
<body>
    <form action="#" id="commentForm" method="GET">
    <fieldset>
    <legend>评论信息</legend>
    <p>
        <label for="txtUserName">姓名</label><em>*</em>
        <input id="txtUserName" name="username" class="{validate:{required:true}}" size="25"></input>
    </p>
    <p>
    <label for="txtEmail">电子邮件</label><em>*</em>
        <input id="txtEmail" name="email" size="25"></input>
    </p>
    <p>
        <label for="txtUrl">网址：</label><em>&nbsp;</em>
        <input id="txtUrl" name="url" size="25" type="text"></input>
    </p>
    <p>
        <label for="txtComment">评论：</label><em>*</em>
        <textarea id="txtComment" name="comment"></textarea>
    </p>
    <p>
        <label for="txtValCode">验证码：</label><em>&nbsp;</em>
        <input id="txtValCode" name="valcode" size="25" type="text"></input>
    </p>
    <p>
        <input type="submit" id="btnForm" value="submit"></input>
    </p>
    </fieldset>
    </form>
</body>
</html>
2，表单插件：form:
 ajaxForm:仅准备数据，提交还需要submit
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
28
29
30
<script src="jquery-1.8.3.js" type="text/javascript" ></script>
    <script src="jquery.form.js" type="text/javascript" ></script>
    <script type="text/javascript" >
        function showRequest(formData, jqForm,options)
        {
            //formData是一个对象数组，数据格式如下：
            // [ {name:password, value:123456},  {name:age, value:20} ]
            //jqForm是一个封装了表单元素的jqeury对象，options就是下面定义的options对象。
            var queryStr=$.param(formData);
            return true;//如果返回false，将会终止表单提交
        }
        function showResponse(responseText,statusText,xhrObj,$form)
        {
            $("#output1").html(responseText);
        }
        $(function(){
            var options ={
                        target:"#output1",
                        beforeSubmit:showRequest,
                        success:showResponse,
                        url:"http://localhost:9000/php/7-2-Form/json.php",
                        type:"post",
                        dataType:"html",
                        clearForm:true,
                        //resetForm:true,
                        timeout:3000
                    };
            $("#myForm").ajaxForm(options);
        });
    </script>
3，模态窗口插件：SimpleModal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link type='text/css' href='modal/css/basic.css' rel='stylesheet' media='screen' />
    <style type="text/css">
    </style>
  
    <script src="jquery-1.8.3.js" type="text/javascript" ></script>
    <script src="modal/jquery.simplemodal.1.4.4.min.js" type="text/javascript" ></script>
    <script type="text/javascript" >
  
        $(function(){
            var options = {
                maxWidth:300,
                maxHeight:400
            };
            $("#divMain").modal(options);
        });
    </script>
4，Cookie插件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="jquery-1.8.3.js" type="text/javascript" ></script>
    <script src="jquery.cookie.js" type="text/javascript" ></script>
    <script type="text/javascript" >
        $(function(){
            var COOKIE_ADDR="address";
            var jAddress = $("#txtAddress");
  
            if($.cookie(COOKIE_ADDR))
            {
                jAddress.val($.cookie(COOKIE_ADDR));
            }
  
            $("#btnMain").click(function(){
                $.cookie(COOKIE_ADDR,jAddress.val(),{path:'/',expires:10});
            });
        });
    </script>
5，jquery ui插件：
 
主要分4部分：1）jquery ui核心库：ui.core.js 
2) 交互，比如Draggable,  Droppable, Resizable, Selectable, Sortable,  这些库需要ui.core.js的支持。
3) 微件：主要是界面的扩展，比如：Accordion,  Autocomplete, ColorPicker, Dialog, Slider, Tabs, Datepicker, Magnifier等， 这些库也需要 ui.core.js的支持。
4）效果库：提供额外动画功能，无需ui.core.js支持，但需要effects.core.js的支持。
以sortable为例：
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
28
29
30
31
32
33
34
<link type='text/css' href='jquery-ui-1.10.3/themes/base/jquery-ui.css' rel='stylesheet' media='screen' />
    <style type="text/css">
    #myList {width:80px;background:#EEE;padding:5px;}
    #myList a{text-decoration:none;color:#D077B0;}
    #myList a:hover{text-decoration:underline;}
    #myList .qlink{font-size:12px;color:#666;margin-left:10px;}
    </style>
  
    <script src="jquery-1.8.3.js" type="text/javascript" ></script>
    <script src="jquery-ui-1.10.3/ui/jquery-ui.js" type="text/javascript" ></script>
    <script type="text/javascript" >
    $(function(){
            $("#myList").sortable({
                delay:10,
                stop:function(){
                    alert("排序动作完成后执行的函数。");
                }
            });
        });
    </script>
<body>
    <ul id="myList">
    <li><a href="#">心情</a></li>
    <li><a href="#">相册</a>
    <a href="#" class="qlink">上传</a>
    </li>
    <li><a href="#">日志</a>
    <a href="#" class="qlink">发表</a>
    </li>
    <li><a href="#">投票</a></li>
    <li><a href="#">分享</a></li>
    <li><a href="#">群组</a></li>  
    </ul>
  </body>
二，编写jquery插件：
1，主要分三种类型：
1）封装对象方法的插件：对jquery对象进行操作的插件。通过jQuery.fn.extend()来扩展。
2）封装全局函数的插件：类似$.ajax(), $.trim()方法，即将独立的函数加到jquery命名空间下。通过jQuery.extend()来扩展。
3）选择器插件：扩展jquery选择器，定义一些jquery不支持的选择器。通过jQuery.extend()来扩展。
 
2，编写插件规范：
1）所有对象方法应该附加到jQuery.fn对象上，所有全局函数应当附加到jQuery对象上。
2）在插件内部，this指向的是jquery对象，而一般方法内部的this指向的是dom对象。
3)  可通过this.each遍历所有元素。
4）插件头部先加一个分号，插件末尾也应加分号。
5）一般情况下插件应返回一个jQuery对象，以保证插件可链式操作。
6）除非使用闭包技巧，否则避免在插件内部使用$作为jQuery对象的别名。
 
3，闭包解释：
1）内部函数：在一个函数内部定义的函数，包含内部函数的就是外部函数。
2）内部函数可以访问外部函数的参数、局部变量、其它内部函数。
3）在外部函数之外调用内部函数时（即不是在外部函数内调用的），就形成了闭包。
此时内部函数会在外部函数返回后执行，执行时内部函数仍然可以访问外部函数的参数、局部变量、其它内部函数，
这些参数、局部变量和函数声明的值是外部函数返回时的值，但内部函数也可以改变它们。
 
4，插件声明方式：
常见声明方式：
1
2
3
;(function($){  // 用$为匿名函数的形参
        //插件代码写在这里，可以使用$作为jQuery的别名
    })(jQuery);//jQuery作为实参传给匿名函数了。
再具体一点如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
;(function($){  // $为匿名函数的形参，注意前面的分号不能少。
            //代码写在这里，可以使用$作为jQuery的别名
            //定义一个局部变量foo，仅可以在函数内部访问
            var foo;
  
            var bar=function(options){
                //bar是一个内部函数，所以可以访问匿名函数(外部函数)的局部变量foo，
                //但在匿名函数外部无法直接访问foo
                options=jQuery.extend({
                    name:"bar",
                    length:5,
                    dataType:"json" //以上为默认参数
                },options);//options为传递的参数
            }
  
            $.barfunc=bar;//这样匿名函数外部就可以通过jQuery.barfunc来间接调用bar函数了。
        })(jQuery);//jQuery作为实参传给匿名函数了。

5，封装jquery对象方法的插件：

1）jquery.color.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
;(function($){
    //采用对jquery对象方法扩展的方式来开发颜色插件
    $.fn.extend({
        color:function(value){
            if(!value)
            {
                return this.css("color");
            }
            else
            {
                return this.css("color",value);
            }
        }
    });
})(jQuery);

2）jquery.bgcolor.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
;$(function($){
    $.fn.extend({
        //插件代码 begin
        bgcolor:function(options){
            options=$.extend({
                odd:"odd",
                even:"even",
                selected:"selected"
            },options);
 
            $("tbody>tr:odd",this).addClass(options.odd);
            $("tbody>tr:even",this).addClass(options.even);
 
            $("tbody>tr",this).click(function(){
                //这里的this是dom对象，因为是在函数内部
                var hasSelected = $(this).hasClass(options.selected);
                $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                    .find(":checkbox").attr("checked",!hasSelected);
            });
 
            //这里的this是jquery对象，因为是在插件内部
            $("tbody>tr:has(:checked)",this).addClass(options.selected);
            return this;//返回this，使方法可链。
        }
        //插件代码 end
    });
})(jQuery);

页面代码：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery UI Demos</title>
    <style type="text/css">
    table       { border:0;border-collapse:collapse;}
    td  { font:normal 12px/17px Arial;padding:2px;width:100px;}
    th          { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px   solid #333;}
    .even       { background:#FFF38F;}  /* 偶数行样式*/
    .odd        { background:#FFFFEE;}  /* 奇数行样式*/
    .selected   { background:#FF6500;color:#fff;}
    </style>
     
    <script src="jquery-1.8.3.js" type="text/javascript" ></script>
    <script src="jquery.bgcolor.js" type="text/javascript" ></script>
     
    <script type="text/javascript" >
        $(function(){
            $("#table1").bgcolor().find("th").css("color","red");
        });
         
    </script>
</head>
  <body>
    <table id="table1">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="choice" value=""/></td>
            <td>张山</td>
            <td>男</td>
            <td>浙江宁波</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" /></td>
                <td>李四</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
                    <td>王五</td>
            <td>男</td>
            <td>湖南长沙</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" /></td>
            <td>找六</td>
            <td>男</td>
            <td>浙江温州</td>  
        </tr>
        <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
                <td>Rain</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
            <td>MAXMAN</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
    </tbody>
</table>
  </body>
</html>

6，封装全局函数的插件：

比如要添加两个函数：$.ltrim()  和 $.rtrim()​

 

1
2
3
4
5
6
7
8
9
10
11
12
;$(function($){
    $.extend({
        //封装全局函数 begin
        ltrim:function(text){
            return (text || "").replace(/^\s+/g, "");
        },
        rtrim:function(text){
            return (text || "").replace(/s+$/g,"");
        }
        //封装全局函数 end
    });
})(jQuery);


三，编写jquery选择器：

先说一下遇到的问题，在1.8.0到1.9(我测试过)的版本中，下面的自定义选择器不起作用，不知道是bug还是api变了，所以，建议用1.8以下版本，上代码：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>插件4，between</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--   引入jQuery -->
    <script src="jquery-1.7.js" type="text/javascript" ></script>
    <script  type="text/javascript">
        //插件编写
        ;(function($) {
            $.extend(jQuery.expr[":"], {
                between :   function( a , i ,m ) {
                    //a表示当前遍历到的dom元素，i是当前dom元素的索引值，从0开始；
                    //以$("div:gt(1)")来说明m参数：
                    //m[0]代表:gt(1)，m[1]是选择器的引导付，这里代表 :,
                    //m[2]代码选择器函数，即gt
                    //m[3]是选择器函数的参数，即gt(1)里面的1
                    //m[4]，这里参数要另举一个例子：$("div :ls(ss(dd))")，m[4]就代表 (dd)，注意带括号,m[3]的值就变成了ss(dd)
                    var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
                    return tmp[0]-0<i&&i<tmp[1]-0;
                }
            });
        })(jQuery);
  
        //插件应用
        $(function(){
            alert("执行前");
            $("div:between(2,5)").css("background","white");
            alert("执行后");
        })
    </script>
</head>
  
<body>
  
<div style="background:red">0</div>
<div style="background:blue">1</div>
<div style="background:green">2</div>
<div style="background:yellow">3</div>
<div style="background:gray">4</div>
<div style="background:orange">5</div>
  
</body>
</html>
posted @ 2013-10-27 21:51  imap  阅读(704)  评论(0)  编辑  收藏  举报