Python之Web前端：
一. jQuery表单验证
二. jQuery扩展
三. 滚动菜单
一. jQuery表单验证：
任何可以交互的站点都有输入表单，只要有可能，就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统，都不愿意把时间浪费在一些无效的信息上，必须对表单数据进行校验，若有不符合规定的表单输入，应及时返回并给出相应的提示信息。
1. 表单验证的提示主要有两种实现方式：
(1)浏览器端验证：
通过浏览器的JavaScript验证，由于不需要和服务器交互，加快了响应信息的速度，提高了用户的体验，但是可能会有浏览器兼容性问题。
浏览器端验证原理图
(2)服务器端验证：
客户端提交表单到服务器端，服务器端验证通过时则返回表单信息到客户端，需要不断的与客户端交互，大大增加了服务性能和客户体验的问题。
服务器端验证原理图
(3)浏览器端和服务器端的双重验证：
在浏览器端验证的基础上增加服务器端的验证，这样既解决了用户的体验，也解决了浏览器兼容性的问题。
浏览器端和服务器端双重验证原理图
2. 表单验证的基本原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证的基本原理</title>
</head>
<body>
<!--表单验证的基本原理-->
<form>
<input type="submit" onclick="check()">
</form>
<script>
function check(){
//进行用户输入内容的验证
//获取from表单中所有的input，逐个检测 //继续事件的执行 return true
//终止后续事件 return false
}
</script>
</body>
</html>
3. 表单验证
Dom绑定验证
jQuery绑定验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证DOM</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style> </head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>密码不能为空</span>-->
</div>
<input type="submit" value="提交" onclick="return CheckValid();" />
</form>
</div>
<script src="博客/jquery-1.12.4.js"></script>
<script>
function CheckValid() {
// 找到form标签下的所有需要验证的标签
// $('form .cl') 查找form标签下的cl类
// $('form input[type="text"],form input[type="text"]') 查找form标签下的input标签type等于text或者password的标签 $('form .item span').remove();//默认将所有span标签移除
var flag = true;//定义全局变量
//循环所有需要验证的标签，获取内容。
$('form .c1').each(function () {
// 每个元素执行一次匿名函数
// this：循环当前的元素
// console.log(this,$(this))
var val = $(this).val();//获取当前标签内容
if(val.length<=0){ //判断当前标签内容长度
var lable = $(this).attr('label');//定义变量获取当前标签的属性执行，这里为label属性。
var tag = document.createElement('span');//定义变量创建span标签
tag.innerText = lable + "不能为空";//获取tag(span)的文本值变量
$(this).after(tag); // 将添加的span标签通过after的方式添加到input的下面
flag = false;//结束当前循环
}
});
return flag;
}
</script>
</body>
</html>
Dom绑定验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证jQuery</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style> </head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>密码不能为空</span>-->
</div>
<input type="submit" value="提交">
</form>
</div>
<script src="博客/jquery-1.12.4.js"></script>
<script>
$(function () {
BindCheckValid();
//当页面框架加载完成之后，自动执行。
}); function BindCheckValid() {
$('form :submit').click(function () {//点击submit时触发click事件
var flag = true;//定义全局变量 $('form .item span').remove();//默认将所有span标签移除
//循环所有需要验证的标签，获取内容。
$('form .c1').each(function () {
// 每个元素执行一次匿名函数
// this：循环当前的元素
// console.log(this,$(this))
var val = $(this).val();//获取当前标签内容
if (val.length <= 0) {//判断当前标签内容长度
var label = $(this).attr('label');//定义变量获取当前标签的属性执行，这里为label属性。
var tag = document.createElement('span');//定义变量创建span标签
tag.innerText = label + '不能为空';//获取tag(span)的文本值变量
$(this).after(tag);// 将添加的span标签通过after的方式添加到input的下面
flag = false;//结束当前循环
return false;//终止所有循环，相当于break.及用户名不通过则不再验证密码。 }
});
return flag;
})
} </script>
</body>
</html>
jQuery绑定验证
注： 一般都是用jQuery绑定验证，封装在js里，这样在浏览器就看不到具体的绑定方法了。
二. jQuery扩展
jQuery.extend(project): jQuery类级别的插件，相当于添加静态方法
jQuery.fn.extend(project): 添加jQuery对象级的插件，是给jQuery类添加方法
//extend书写方法：
;(function($){
$.extend({
"函数名":function(自定义参数){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.函数名=function(自定义参数){
//这里写插件代码
}
})(jQuery);
//调用方法： $.函数名(参数);
//fn.extend书写方法：
;(function($){
$.fn.extend({
"函数名":function(自定义参数){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.fn.函数名=function(自定义参数){
//这里写插件代码
}
})(jQuery);
//调用方法： $("#id").函数名(参数);
为了让我们的插件足够通用，我们需要把一些配置留给用户自己定义，通用的做法是使用一个对象来承载所有的设置项，并给他们默认值。
var defaults = {
msg1: "hello1",
msg2: "hello2"
}
然后我们给我们的插件函数加上参数：
;(function($) {
var defaults = {
msg1: "hello1",
msg2: "hello2"
};
$.NPScrollLoad = function(options) {
var opts = $.extend(defaults, options);
alert(opts.msg1 + opts.msg2);
};
}) (jQuery);
//调用结果：
//$.NPScrollLoad({msg1 : "你好"});
//$.NPScrollLoad({msg1 : "你好", msg2 : "呵呵"});
//$.NPScrollLoad({msg2 : "......"});
//$.NPScrollLoad();
注： 没有赋值的属性会使用defaults里面定义的默认值，赋值的属性则会覆盖defaults中相应的属性。
JavaScript拾遗之正则表达式：
三. 滚动菜单
1.页面布局CSS（absolute，fixd）
position: absolute :生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
position: fixd :生成绝对定位的元素，相对于浏览器窗口进行定位。
2.监听滚动事件JavaScript：
如果滚动>50(举例),菜单固定
如果滚动<50(举例),菜单固定取消
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .wrap{
width: 980px;
margin: 0 auto;
} .pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px; }
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{ }
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
} .pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
} .pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body> <div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div> </div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div> </div> <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
//自动执行
Init();
});
function Init(){ $(window).scroll(function() {
//监听窗口的滚动时间 // 获取滚动条高度
var scrollTop = $(window).scrollTop();
if(scrollTop > 50){
//滚动到50像素时，左侧菜单添加fixed标签固定
$('.catalog').addClass('fixed');
}else{
$('.catalog').children().removeClass('active');
$('.catalog').removeClass('fixed');//否则移除固定
} // 循环所有的内容
$('.content').children().each(function(){
// 当前标签距离顶部高度
var offSet = $(this).offset();//高度，左边有多远。 // 当前内容高度 - 滚动高度，如果滚动到内容一时，此值为0；
var offTop = offSet.top - scrollTop;
// 自身高度
var height = $(this).height(); // 当前内容位于用户阅览区
if(offTop<=0 && offTop> -height){ var docHeight = $(document).height();
var winHeight = $(window).height();
// 如果，滚轮到达底部，则显示最后一个菜单
if(docHeight == winHeight+scrollTop)
{
$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
}else{
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
}
return false;
}
}); }); } </script>
</body>
</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