day17 jquery、Django
jQuery
dom事件绑定：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* item样式 */ 8 .item{ 9 width: 250px; 10 height: 60px; 11 position: relative; 12 } 13 .item input{ 14 width: 200px; 15 } 16 .item span{ 17 position: absolute; 18 top: 20px; 19 left: 0px; 20 font-size: 8px; 21 background-color: indianred; 22 color: white; 23 display: inline-block; 24 width: 200px; 25 } 26 </style> 27 28 </head> 29 <body> 30 <div> 31 <form> 32 <div class="item"> 33 <!--样式c1，type为text，label为自定义属性--> 34 <input class="c1" type="text" name="username" label="用户名"/> 35 <!--<span>用户名不能为空</span>--> 36 </div> 37 <div class="item"> 38 <input class="c1" type="password" name="pwd" label="密码"/> 39 <!--<span>密码不能为空</span>--> 40 </div> 41 <input type="submit" value="提交" onclick="return CheckValid();" /> 42 </form> 43 </div> 44 <script src="jquery-1.12.4.js"></script> 45 <script> 46 function CheckValid() { 47 // 找到form标签下的所有需要验证的标签 48 // $("from .c1") 49 // $('from input[type="text"], form input[type="password"]') 50 // 循环所有需要验证的标签，获取内容 51 52 // 每次提交前清除上次验证结果 53 $('from .item span').remove(); 54 55 // 定义flag为true，验证 56 var flag = true; 57 $('form .c1').each(function () { 58 // 每个元素执行一次匿名函数 59 // this 60 // console.log(this, $(this)); 61 var val = $(this).val(); 62 // 判断长度 63 if(val.length<=0){ 64 var label = $(this).attr('label'); 65 var tag = document.createElement('span')''; 66 tag.innerText = label + "不能为空"; 67 $(this).after(tag); 68 flag = false; 69 } 70 }); 71 // 返回flag值 72 return flag 73 } 74 </script> 75 76 </body> 77 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* item样式 */ 8 .item{ 9 width: 250px; 10 height: 60px; 11 position: relative; 12 } 13 .item input{ 14 width: 200px; 15 } 16 .item span{ 17 position: absolute; 18 top: 20px; 19 left: 0px; 20 font-size: 8px; 21 background-color: indianred; 22 color: #ffffff; 23 display: inline-block; 24 width: 200px; 25 } 26 </style> 27 28 </head> 29 <body> 30 <div> 31 <form> 32 <div class="item"> 33 <!--样式c1，type为text，label为自定义属性--> 34 <input class="c1" type="text" name="username" label="用户名"/> 35 <!--<span>用户名不能为空</span>--> 36 </div> 37 <div class="item"> 38 <input class="c1" type="password" name="pwd" label="密码"/> 39 <!--<span>密码不能为空</span>--> 40 </div> 41 <!--<input type="submit" value="提交" onclick="return CheckValid();" />--> 42 <input type="submit" value="提交" /> 43 </form> 44 </div> 45 <script src="jquery-1.12.4.js"></script> 46 <script> 47 $(function () { 48 // 当页面框架加载完成之后，自动挂靠 49 BindCheckValid(); 50 }); 51 52 function BindCheckValid() { 53 $('form :submit').click(function () { 54 55 $('form .item span').remove(); 56 57 // 定义flag为true，验证 58 var flag = true; 59 $('form .c1').each(function () { 60 // 每个元素执行一次匿名函数 61 // this 62 // console.log(this, $(this)); 63 var val = $(this).val(); 64 // 判断长度 65 if(val.length<=0){ 66 var label = $(this).attr('label'); 67 var tag = document.createElement('span'); 68 tag.innerText = label + "不能为空"; 69 $(this).after(tag); 70 flag = false; 71 } 72 }); 73 // 返回flag值 74 return flag; 75 }); 76 } 77 </script> 78 79 </body> 80 </html>
$each return false 标示break
<script>
$(function () {
// 当页面框架加载完成之后，自动挂靠
BindCheckValid();
});
function BindCheckValid() {
$('form :submit').click(function () {
$('form .item span').remove();
// 定义flag为true，验证
var flag = true;
$('form .c1').each(function () {
// 每个元素执行一次匿名函数
// this
// console.log(this, $(this));
var val = $(this).val();
// 判断长度
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
return false;
}
});
// 返回flag值
return flag;
});
}
自定义jQuery扩展的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script src="extend1.js"></script>
<script>
// $ == jQuery
$.dalong1('222222');
</script>
</body>
</html>
扩展文件：/**
* Created by think on 2016/8/28.
*/
(function (jq) {
jq.extend({
'dalong1': function (arg) {
console.log(arg);
}
});
function f1() {
}
})(jQuery)
jquery扩展实现验证：
l 支持是否允许为空
l 长度
l 正则表达式
定义正则表达式
reg = /正则表达式/ *****
g
i
m ===> 特殊
利用正则匹配
reg.test(字符串) *****
reg.exec(字符串)
全局
非全局
字符串三个方法：
search
match
replace
----特殊符号
滚动菜单：
页面布局（absolute）
监听滚动
前端插件：
fontawsome easyui: http://www.jeasyui.net/ Bootstrap: http://v3.bootcss.com/ 引入css 引入jQuery（2.x,1.12） 引入js bootstartrap模版 bxslider jquery.lazyload: http://www.cnblogs.com/wupeiqi/articles/5813161.html
django
针对python的web 框架的实现分为两种：
1、Tornado自带的web框架，2、以django为代表的web框架，它是基于wsgi模块的。
MVC/MTV分类其实就是目录的归类：
| WEB框架 | 处理用户请求 | 放置HTML模板 | 操作数据库 | 框架 |
| MVC | Controller | Views | Modals | |
| MVT | Views | Template | Modals | django |
