Python之Web前端jQuery扩展
Posted 浮光掠影转瞬间
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python之Web前端jQuery扩展相关的知识，希望对你有一定的参考价值。
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({ 进击的Python第十六章：Web前端基础之jQuery