jquery插件开发总结

时间  2019-12-09
标签 jquery 插件 开发 总结 栏目 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对象方法的插件：javascript

1）jquery.color.js:php

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:css

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);

页面代码：html

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，封装全局函数的插件：java

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

 

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选择器：git

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

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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程