0.本周知识点预览
- jQuery 基础
- web框架
- django基础
1.jQuery 基础
1.DOM事件绑定
需求：得到一个需要输入用户名、密码的表单，未输入则提示，如图：
利用DOM绑定事件的代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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="用户名"/>
div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
div>
<input type="submit" value="提交" onclick="return CheckValid();" />
form>
div>
<script src="../jquery-1.12.4.js">script>
<script>
// DOM 版本 绑定onclick事件
function CheckValid(){
// 设置个返回值,以便抢占submit默认事件
var flag = true;
// 对于form的每个c1类,进行循环,each是循环的意思
$("form .c1").each(function (){
// 获取当前标签的内容
var val = $(this).val();
// 假如内容长度小于等于0,就是没输入
if (val.length <=0){
// 则增加个span标签,提示用户名未输入
var tag = document.createElement("span");
// 获取自定义属性label,用于字符拼接
var label = $(this).attr("label");
tag.innerText = label + "不能为空";
// 在标签之后插入新标签
$(this).after(tag);
flag = false
}else {
// 假如输入过了,就删除新增的span标签,也可以最开始就删除所有span标签
$(this).next().remove();
}
});
return flag;
}
});
}