Python之Web前端jQuery扩展

　　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