Python之Web前端：

　　　　　　　　一. jQuery表单验证

　　　　　　　　二. jQuery扩展

　　　　　　　　三. 滚动菜单

 

一. jQuery表单验证：

　　　　任何可以交互的站点都有输入表单，只要有可能，就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统，都不愿意把时间浪费在一些无效的信息上，必须对表单数据进行校验，若有不符合规定的表单输入，应及时返回并给出相应的提示信息。

　　　　1. 表单验证的提示主要有两种实现方式：

　　　　　　(1)浏览器端验证： 

　　　　　　　　通过浏览器的JavaScript验证，由于不需要和服务器交互，加快了响应信息的速度，提高了用户的体验，但是可能会有浏览器兼容性问题。

　　　　　　　　　　浏览器端验证原理图

 

　　　　　　(2)服务器端验证：

　　　　　　　　客户端提交表单到服务器端，服务器端验证通过时则返回表单信息到客户端，需要不断的与客户端交互，大大增加了服务性能和客户体验的问题。

　　　　　　　　　　　　服务器端验证原理图

 　　　　(3)浏览器端和服务器端的双重验证：

　　　　　　在浏览器端验证的基础上增加服务器端的验证，这样既解决了用户的体验，也解决了浏览器兼容性的问题。

　　　　　　　　　　　浏览器端和服务器端双重验证原理图

 

　　2. 表单验证的基本原理：

1  2  3  4     
      5      6  7  8     
      9     
     
      10         
      11     
     
12     21 22 

　　3. 表单验证

　　　　Dom绑定验证

　　　　jQuery绑定验证

1  2  3  4     
       5      6      26 27 28 29     
      
       30         
       
        31             
        
         32                 
         33                 
         34             
        
35             
        
         36                 
         37                 
         38             
        
39             
        40         
       
41     
      
42     43     68 69 

1  2  3  4     
       5      6     26 27 28 29     
      
       30         
       
        31             
        
         32                 
         33                 
         34             
        
35             
        
         36                 
         37                 
         38             
        
39             
        40         
       
41     
      
42     43     75 76 

注： 一般都是用jQuery绑定验证，封装在js里，这样在浏览器就看不到具体的绑定方法了。

 

二. jQuery扩展

　　　jQuery.extend(project): jQuery类级别的插件，相当于添加静态方法

　　　jQuery.fn.extend(project): 添加jQuery对象级的插件，是给jQuery类添加方法

1 //extend书写方法： 2  3 ;(function($){   4     $.extend({   5         "函数名":function(自定义参数){   6             //这里写插件代码   7         }   8     });   9 })(jQuery);  10 或者  11 ;(function($){  12     $.函数名=function(自定义参数){  13         //这里写插件代码  14     }  15 })(jQuery);  16 17 //调用方法： $.函数名(参数);

1 //fn.extend书写方法： 2  3 ;(function($){   4     $.fn.extend({   5         "函数名":function(自定义参数){   6             //这里写插件代码   7         }   8     });   9 })(jQuery);  10 或者  11 ;(function($){  12     $.fn.函数名=function(自定义参数){  13         //这里写插件代码  14     }  15 })(jQuery);  16 17 //调用方法： $("#id").函数名(参数);

为了让我们的插件足够通用，我们需要把一些配置留给用户自己定义，通用的做法是使用一个对象来承载所有的设置项，并给他们默认值。

1 var defaults = {2      msg1: "hello1",3      msg2: "hello2"4 }

然后我们给我们的插件函数加上参数：

1 ;(function($) { 2     var defaults = { 3     msg1: "hello1", 4     msg2: "hello2" 5     }; 6  7     $.NPScrollLoad = function(options) { 8         var opts = $.extend(defaults, options); 9         alert(opts.msg1 + opts.msg2);10     };11 12 }) (jQuery);13 14 //调用结果： 15 //$.NPScrollLoad({msg1 : "你好"});16 //$.NPScrollLoad({msg1 : "你好", msg2 : "呵呵"});17 //$.NPScrollLoad({msg2 : "......"});18 //$.NPScrollLoad();

 注： 没有赋值的属性会使用defaults里面定义的默认值，赋值的属性则会覆盖defaults中相应的属性。

 

JavaScript拾遗之正则表达式：

 

三. 滚动菜单

　　　　　　　1.页面布局CSS（absolute，fixd）

　　　　　　　　　position: absolute :生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　　　　　　　　position: fixd :生成绝对定位的元素，相对于浏览器窗口进行定位。 

　　　　　　　2.监听滚动事件JavaScript：

　　　　　　　　如果滚动>50(举例),菜单固定

　　　　　　　　如果滚动<50(举例),菜单固定取消

 

1   2   3   4     
        5       6      97  98  99 100     
      
       101         
       
        102             
        
         103                 
         104                     105                 106             
        
107             
        
         108                 
         
          109                     
          
110                         首页111                     
112                     
          
113                         功能一114                     
115                     
          
116                         功能二117                     
118                 
         
119             
        
120 121         
       
122     
      
123     
      
       124         
       
        125             
        
         126                 
         
          第1张
         
127                 
         
          第2张
         
128                 
         
          第3张
         
129             
        
130             
        
         131                 
         
          132                     
          
第一章
133                 
         
134                 
         
          135                     
          
第二章
136                 
         
137                 
         
          138                     
          
第三章
139                 
         
140             
        
141         
       
142 143     
      
144 145     146     199 200 

 

其他内容：

　　　　常用前端插件

　　　　　　1. fontawsome： 制作图标

　　　　　　2. easyUI/jQueryUI: 多用于做后台管理

　　　　　　3. bootstrap

　　　　　　　　--引入CSS

　　　　　　　　--引入jQuery(版本必须使用2.X，1.12)

　　　　　　　　--引入JavaScript

注： easyUI,jQuery, bootstrap都需要引入以上三条。

　　　　　　　　-- bootstrap模板

　　　　　　4. bxslider: 滑动插件

　　　　　　5. jQuery.lazyload: 延迟加载插件

 

参考手册： http://www.w3school.com.cn/b.asp