写代码,注意,布局
布局
模拟数据库为例
声明写在一块
函数的定义写在一起,函数按照类别集中放在一起
命名
一定注意,命名的规范
从现在起,命名不要太随便
命名的原则
起名字,见名知义
比如,要拿到一个套接字对象
起一个变量名接收
tcp_server = get_tcp_server()
命名的时候,变量以名词形式命
方法或者函数,以动词形式命名
在js与jquery中的命名
js 声明一个变量
var 变量 = 值
拿一个标签对象
aEle
aTag
拿一个字符串
aStr
bInt
jquery中命名
如果要拿一个标签对象
var $aTag = $(“a”);
var aTag = $aTag[0]
获取学生名称
获取input标签,取里面的value就可以
1,普通标签取值
<div> 张三 </div>
2, input控件取值
<input type="text">
对于input控件,通过value属性取值
对于jquery的input标签对象,通过val方法
可以获取该标签的value值
》找到标签
通过dom标签对 象的value属性,可以拿到
input标签对象的value属性值
小结
获取form表单中控件的value值的比对
jquery对象.val()
相当于
dom对象.value
这些控件包括
input select 等等
》pycharm中写代码
考虑下,这个input控件是用一次还是用多次
如果只用一次两次,直接拿了直接调方法
如果要频繁的使用,先声明一个变量,然后要用时,随时用这个变量
获取下拉框中的value值
计算下一行的序号
定义新标签在内存中
往内存中的标签添加内容
<td>内容</td>
其它操作完结功能
<!DOCTYPE html>
<!--作者:pyhui-->
<html lang="zh-CN">
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal{
background: black;
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
opacity: 0.4;
/*display: none;*/
}
.info{
position: fixed;
background-color: white;
width: 400px;
height: 300px;
left:50%;
top: 50%;
margin-top:-150px;
margin-left:-200px;
/*display: none;*/
}
form{
width: 80%;
height: 40%;
/*background-color: yellow;*/
margin: 50px auto 0;
}
</style>
<!-- js-->
<script>
$(main);
function main() {
// 绑定事件,当取消的按钮被点击的时候,有一个函数对应
$("#btn_cancle").click(dismiss_modal);
// 绑定事件,当显示按钮被点击的时候,模态框显示
$("#btn_show").click(show_modal);
// 绑定事件,当提交按钮点击的时候,新增一行
$("#btn_tijiao").click(add_line_data);
// 事件委托
// 委托table标签,当删除按钮被点击的时候,执行一个事件
$("table")
// 点击提交添加一行
function add_line_data() {
// 数据的处理。。
// 拿到学生姓名
var stuName = $("form input[name=username]").val();
// 拿到所学专业
var subject = $("form select[name=subject]").val();
// 计算下一行的序号
// 得拿到最后一行的第一个td的值
// 拿最后一行
var $lastTrTag = $("table tr:last");
// 拿第一个td
var $firstTdTag = $lastTrTag.find("td:first");
// 取td里面的值
var indexStr = $firstTdTag.text();
// 字符串转整数
var indexInt = parseInt(indexStr)
// 下一行的序号
var nextIndexInt = indexInt + 1
// 标签的处理,内存中准备新的标签。。。
// tr行标签
var $trTag = $("<tr>");
// td序号标签
var $tdIndex = $("<td>");
// td学生姓名标签
var $tdName = $("<td>");
// td所学专业标签
var $tdSubject = $("<td>");
// td通用的操作标签
var $tdAct = $("<td><a href=\"\" class=\"edit\">编辑</a>| <a href=\"\" class=\"del\">删除</a></td>");
// 标签中插入数据
// td序号标签,添入序号
$tdIndex.text(nextIndexInt);
// td姓名插入
$tdName.text(stuName);
// 专业的插入
$tdSubject.text(subject);
// 标签的填入操作
// tr标签的填入。 使用 父标签.append(子标签的方法填入)
$("table").append($trTag);
// tr标签append,序号标签 <tr><td>序号</td></tr>
// tr标签append,学生标签 <tr><td>序号</td> <td>学生姓名</td></tr>
// tr添加专业标签
// tr添加操作标签
$trTag.append($tdIndex, $tdName, $tdSubject, $tdAct);
// 添加前 table标签是这样的 <table> <tr>第一行</tr></table>
// table标签append,我们准备好的这个tr标签 <table> <tr>第一行</tr><tr>上面准备好的tr</tr> </table>
}
// 让模态框出现
function show_modal() {
$(".modal").css("display","block");
$(".info").css("display", "block");
}
//让模态框消失
function dismiss_modal() {
// 目标,点击取消,让模态框消失
// 拿到标签对象
var $divInfo = $(".info");
// 操作标签对象的属性,设置css的display为none
$divInfo.css("display","none");
$(".modal").css("display","none");
}
}
</script>
</head>
<body>
<input type="button" value="添加学生" id="btn_show">
<!--遮罩层-->
<div class="modal">1</div>
<!--信息层-->
<div class="info">
<!-- 表单-->
<form action="">
姓名:<input type="text" name="username"> <br>
<select name="subject" id="">
<option value="python">python</option>
<option value="php">php</option>
<option value="go">go</option>
<option value="java">java</option>
</select>
<br>
<input type="button" value="提交" id="btn_tijiao">
<input type="button" value="取消" id="btn_cancle">
</form>
</div>
<h1>学生列表</h1>
<table border="1">
<tr>
<td>序号</td>
<td>学生姓名</td>
<td>所选专业</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>python</td>
<td><a href="" class="edit">编辑</a>| <a href="" class="del">删除</a> </td>
</tr>
</table>
</body>
</html>
删除
对新增的行的编辑,删除按钮,绑定事件
需要用到事件委托