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教程