首页 > 代码库 > day16 jquery、Django
day16 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 // this60 // 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 flag73 }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="http://www.mamicode.com/提交" 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 // this62 // 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="http://www.mamicode.com/jquery-1.12.4.js"></script> <script src="http://www.mamicode.com/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 |
day16 jquery、Django
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。