Python之Web前端：
一. jQuery表单验证
二. jQuery扩展
三. 滚动菜单
一. jQuery表单验证：
任何可以交互的站点都有输入表单，只要有可能，就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统，都不愿意把时间浪费在一些无效的信息上，必须对表单数据进行校验，若有不符合规定的表单输入，应及时返回并给出相应的提示信息。
1. 表单验证的提示主要有两种实现方式：
(1)浏览器端验证：
通过浏览器的JavaScript验证，由于不需要和服务器交互，加快了响应信息的速度，提高了用户的体验，但是可能会有浏览器兼容性问题。
浏览器端验证原理图
(2)服务器端验证：
客户端提交表单到服务器端，服务器端验证通过时则返回表单信息到客户端，需要不断的与客户端交互，大大增加了服务性能和客户体验的问题。
服务器端验证原理图
(3)浏览器端和服务器端的双重验证：
在浏览器端验证的基础上增加服务器端的验证，这样既解决了用户的体验，也解决了浏览器兼容性的问题。
浏览器端和服务器端双重验证原理图
2. 表单验证的基本原理：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证的基本原理</title> 6 </head> 7 <body> 8 <!--表单验证的基本原理--> 9 <form> 10 <input type="submit" onclick="check()"> 11 </form> 12 <script> 13 function check(){ 14 //进行用户输入内容的验证 15 //获取from表单中所有的input，逐个检测 16 17 //继续事件的执行 return true 18 //终止后续事件 return false 19 } 20 </script> 21 </body> 22 </html>
3. 表单验证
Dom绑定验证
jQuery绑定验证
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证DOM</title> 6 <style> 7 .item{ 8 width: 250px; 9 height: 60px; 10 position: relative; 11 } 12 .item input{ 13 width: 200px; 14 } 15 .item span{ 16 position: absolute; 17 top: 20px; 18 left: 0px; 19 font-size: 8px; 20 background-color: indianred; 21 color: white; 22 display: inline-block; 23 width: 200px; 24 } 25 </style> 26 27 </head> 28 <body> 29 <div> 30 <form> 31 <div class="item"> 32 <input class="c1" type="text" name="username" label="用户名"/> 33 <!--<span>用户名不能为空</span>--> 34 </div> 35 <div class="item"> 36 <input class="c1" type="password" name="pwd" label="密码"/> 37 <!--<span>密码不能为空</span>--> 38 </div> 39 <input type="submit" value="提交" onclick="return CheckValid();" /> 40 </form> 41 </div> 42 <script src="博客/jquery-1.12.4.js"></script> 43 <script> 44 function CheckValid() { 45 // 找到form标签下的所有需要验证的标签 46 // $('form .cl') 查找form标签下的cl类 47 // $('form input[type="text"],form input[type="text"]') 查找form标签下的input标签type等于text或者password的标签 48 49 $('form .item span').remove();//默认将所有span标签移除 50 var flag = true;//定义全局变量 51 //循环所有需要验证的标签，获取内容。 52 $('form .c1').each(function () { 53 // 每个元素执行一次匿名函数 54 // this：循环当前的元素 55 // console.log(this,$(this)) 56 var val = $(this).val();//获取当前标签内容 57 if(val.length<=0){ //判断当前标签内容长度 58 var lable = $(this).attr('label');//定义变量获取当前标签的属性执行，这里为label属性。 59 var tag = document.createElement('span');//定义变量创建span标签 60 tag.innerText = lable + "不能为空";//获取tag(span)的文本值变量 61 $(this).after(tag); // 将添加的span标签通过after的方式添加到input的下面 62 flag = false;//结束当前循环 63 } 64 }); 65 return flag; 66 } 67 </script> 68 </body> 69 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证jQuery</title> 6 <style> 7 .item{ 8 width: 250px; 9 height: 60px; 10 position: relative; 11 } 12 .item input{ 13 width: 200px; 14 } 15 .item span{ 16 position: absolute; 17 top: 20px; 18 left: 0px; 19 font-size: 8px; 20 background-color: indianred; 21 color: white; 22 display: inline-block; 23 width: 200px; 24 } 25 </style> 26 27 </head> 28 <body> 29 <div> 30 <form> 31 <div class="item"> 32 <input class="c1" type="text" name="username" label="用户名"/> 33 <!--<span>用户名不能为空</span>--> 34 </div> 35 <div class="item"> 36 <input class="c1" type="password" name="pwd" label="密码"/> 37 <!--<span>密码不能为空</span>--> 38 </div> 39 <input type="submit" value="提交"> 40 </form> 41 </div> 42 <script src="博客/jquery-1.12.4.js"></script> 43 <script> 44 $(function () { 45 BindCheckValid(); 46 //当页面框架加载完成之后，自动执行。 47 }); 48 49 function BindCheckValid() { 50 $('form :submit').click(function () {//点击submit时触发click事件 51 var flag = true;//定义全局变量 52 53 $('form .item span').remove();//默认将所有span标签移除 54 //循环所有需要验证的标签，获取内容。 55 $('form .c1').each(function () { 56 // 每个元素执行一次匿名函数 57 // this：循环当前的元素 58 // console.log(this,$(this)) 59 var val = $(this).val();//获取当前标签内容 60 if (val.length <= 0) {//判断当前标签内容长度 61 var label = $(this).attr('label');//定义变量获取当前标签的属性执行，这里为label属性。 62 var tag = document.createElement('span');//定义变量创建span标签 63 tag.innerText = label + '不能为空';//获取tag(span)的文本值变量 64 $(this).after(tag);// 将添加的span标签通过after的方式添加到input的下面 65 flag = false;//结束当前循环 66 return false;//终止所有循环，相当于break.及用户名不通过则不再验证密码。 67 68 } 69 }); 70 return flag; 71 }) 72 } 73 74 </script> 75 </body> 76 </html>
注： 一般都是用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 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 body{ 9 margin: 0px; 10 } 11 img { 12 border: 0; 13 } 14 ul{ 15 padding: 0; 16 margin: 0; 17 list-style: none; 18 } 19 .clearfix:after { 20 content: "."; 21 display: block; 22 height: 0; 23 clear: both; 24 visibility: hidden; 25 } 26 27 .wrap{ 28 width: 980px; 29 margin: 0 auto; 30 } 31 32 .pg-header{ 33 background-color: #303a40; 34 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 35 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 36 box-shadow: 0 2px 5px rgba(0,0,0,.2); 37 } 38 .pg-header .logo{ 39 float: left; 40 padding:5px 10px 5px 0px; 41 } 42 .pg-header .logo img{ 43 vertical-align: middle; 44 width: 110px; 45 height: 40px; 46 47 } 48 .pg-header .nav{ 49 line-height: 50px; 50 } 51 .pg-header .nav ul li{ 52 float: left; 53 } 54 .pg-header .nav ul li a{ 55 display: block; 56 color: #ccc; 57 padding: 0 20px; 58 text-decoration: none; 59 font-size: 14px; 60 } 61 .pg-header .nav ul li a:hover{ 62 color: #fff; 63 background-color: #425a66; 64 } 65 .pg-body{ 66 67 } 68 .pg-body .catalog{ 69 position: absolute; 70 top:60px; 71 width: 200px; 72 background-color: #fafafa; 73 bottom: 0px; 74 } 75 .pg-body .catalog.fixed{ 76 position: fixed; 77 top:10px; 78 } 79 80 .pg-body .catalog .catalog-item.active{ 81 color: #fff; 82 background-color: #425a66; 83 } 84 85 .pg-body .content{ 86 position: absolute; 87 top:60px; 88 width: 700px; 89 margin-left: 210px; 90 background-color: #fafafa; 91 overflow: auto; 92 } 93 .pg-body .content .section{ 94 height: 500px; 95 } 96 </style> 97 </head> 98 <body> 99 100 <div class="pg-header"> 101 <div class="wrap clearfix"> 102 <div class="logo"> 103 <a href="#"> 104 <img src=""> 105 </a> 106 </div> 107 <div class="nav"> 108 <ul> 109 <li> 110 <a href="#">首页</a> 111 </li> 112 <li> 113 <a href="#">功能一</a> 114 </li> 115 <li> 116 <a href="#">功能二</a> 117 </li> 118 </ul> 119 </div> 120 121 </div> 122 </div> 123 <div class="pg-body"> 124 <div class="wrap"> 125 <div class="catalog"> 126 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 127 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 128 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 129 </div> 130 <div class="content"> 131 <div menu="function1" class="section"> 132 <h1>第一章</h1> 133 </div> 134 <div menu="function2" class="section"> 135 <h1>第二章</h1> 136 </div> 137 <div menu="function3" class="section"> 138 <h1>第三章</h1> 139 </div> 140 </div> 141 </div> 142 143 </div> 144 145 <script type="text/javascript" src="jquery-1.8.2.min.js"></script> 146 <script type="text/javascript"> 147 $(function(){ 148 //自动执行 149 Init(); 150 }); 151 function Init(){ 152 153 $(window).scroll(function() { 154 //监听窗口的滚动时间 155 156 // 获取滚动条高度 157 var scrollTop = $(window).scrollTop(); 158 if(scrollTop > 50){ 159 //滚动到50像素时，左侧菜单添加fixed标签固定 160 $('.catalog').addClass('fixed'); 161 }else{ 162 $('.catalog').children().removeClass('active'); 163 $('.catalog').removeClass('fixed');//否则移除固定 164 } 165 166 // 循环所有的内容 167 $('.content').children().each(function(){ 168 // 当前标签距离顶部高度 169 var offSet = $(this).offset();//高度，左边有多远。 170 171 // 当前内容高度 - 滚动高度，如果滚动到内容一时，此值为0； 172 var offTop = offSet.top - scrollTop; 173 // 自身高度 174 var height = $(this).height(); 175 176 // 当前内容位于用户阅览区 177 if(offTop<=0 && offTop> -height){ 178 179 var docHeight = $(document).height(); 180 var winHeight = $(window).height(); 181 // 如果，滚轮到达底部，则显示最后一个菜单 182 if(docHeight == winHeight+scrollTop) 183 { 184 $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active'); 185 }else{ 186 var target = $(this).attr('menu'); 187 $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); 188 } 189 return false; 190 } 191 }); 192 193 }); 194 195 196 } 197 198 </script> 199 </body> 200 </html>
其他内容：
常用前端插件
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