一、项目概述
- 项目名称 : 人员信息管理系统
- 项目需求 : 使用jQuery+Bootstrap对人员信息管理系统进行优化
- 项目展示：
二、项目实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>人员管理系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 定义人员JSON
var person1 = {
"personno": "1",
"personname": "张三",
"personsex": "男",
"personage": 20,
"personfrom": "北京"
};
var person2 = {
"personno": "2",
"personname": "李四",
"personsex": "男",
"personage": 23,
"personfrom": "上海"
};
// 定义JSON数组
var persons = new Array;
persons.push(person1, person2);
// 建立索引,用于自动编号
var index = 2;
// 显示表单
function showAddForm() {
$("#addform").show();
}
// 隐藏表单
function hiddenAddForm() {
$("#addform").hide();
}
function hiddenUpdateForm(){
$("#updateform").hide();
}
// 展示表格信息
function showTable() {
// 根据id获取表格
// var maintable = document.getElementById("maintable");
var $maintable = $("#maintable");
var str = "<tr class='info'><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th></tr>";
for (var i = 0; i < persons.length; i++) {
// 拼接人员信息
str += "<tr><td>" + persons[i].personno + "</td><td>" + persons[i].personname + "</td><td>" + persons[i].personsex +
"</td><td>" +
persons[i].personage + "</td><td>" + persons[i].personfrom +
"</td><td><button class='btn btn-danger' οnclick='deletePersonInfo(" + persons[i].personno +
");'>删除</button> <button class='btn btn-warning' οnclick='showUpdateForm(" + persons[i].personno + ");'>更新</button></td></tr>";
}
// 将拼接好的字符串添加到表格中
// maintable.innerHTML = str;
$maintable.html(str);
$maintable.show();
}
// 添加人员信息
function addPersonInfo() {
// 根据id获取添加表单
// var addform = document.getElementById("addform");
var $addform = $("#addform");
// 每次使用了索引就需要自增
var addno = ++index;
// var addname = addform.personname.value;
var addname = $("#personname").val();
// var addage = addform.personage.value;
var addage = $("#personage").val();
// var addsex = addform.personsex.value;
var addsex = $("#personsex").val();
// var addfrom = addform.personfrom.value;
var addfrom = $("#personfrom").val();
// 用临时JSON对象保存信息
var person = {
"personno": addno,
"personname": addname,
"personsex": addsex,
"personage": addage,
"personfrom": addfrom
};
// 将JSON添加到数组
persons.push(person);
// 刷新一下，展示人员信息
showTable();
alert("添加成功！")
$addform.hide();
}
// 删除人员信息
function deletePersonInfo(no) {
var res = confirm("确定要删除编号为" + no + "的记录嘛？")
if (res) {
// 找到要删除的元素进行删除
for (var i = 0; i < persons.length; i++) {
if (persons[i].personno == no) {
delete persons[i];
break;
}
}
// [1] [2] [3] 删除第2个元素
// [1] null [3] 这里有一个空值，因此personno接不到值,需要去空值
// 删除后需要去null值
// 方法一：替换法
var arr = new Array; // 新建一个数组
for (var i = 0; i < persons.length; i++) {
if (persons[i] != null) {
arr.push(persons[i]); // 将非空数组添加到新数组
}
}
persons = arr; // 把新数组的值替换给老数组
/*
// 方法二：splice(素组下标,个数，添加的值1，值2，...)方法
for (var i = 0; i < persons.length; i++) {
if (persons[i] == '' || persons[i] == null || typeof(persons[i]) == undefined) {
// splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
persons.splice(i, 1);
i = i - 1;
}
}
*/
// 刷新一下表格
showTable();
}
}
// 回显表单数据
function showUpdateForm(no) {
// 找到要更新的数据
for (var i = 0; i < persons.length; i++) {
if (persons[i].personno == no) {
// 将获取到的数据回显到表单
// document.getElementById("updatepersonno").value = persons[i].personno;
$("#updatepersonno").val(persons[i].personno);
// document.getElementById("updatepersonname").value = persons[i].personname;
$("#updatepersonname").val(persons[i].personname);
// document.getElementById("updatepersonage").value = persons[i].personage;
$("#updatepersonage").val(persons[i].personage);
// document.getElementById("updatepersonsex").value = persons[i].personsex;
$("#updatepersonsex").val(persons[i].personsex);
// document.getElementById("updatepersonfrom").value = persons[i].personfrom;
$("#updatepersonfrom").val(persons[i].personfrom);
// 显示updateform表单
// document.getElementById("updateform").style.display = "";
$("#updateform").show();
}
}
}
// 更新人员信息
function updatePersonInfo() {
// var updateform = document.getElementById("updateform");
var $updateform = $("#updateform");
// var updateno = updateform.updatepersonno.value;
var updateno = $("#updatepersonno").val();
// var updatename = updateform.updatepersonname.value;
var updatename = $("#updatepersonname").val();
// var updatesex = updateform.updatepersonsex.value;
var updatesex = $("#updatepersonsex").val();
// var updateage = updateform.updatepersonage.value;
var updateage = $("#updatepersonage").val();
// var updatefrom = updateform.updatepersonfrom.value;
var updatefrom = $("#updatepersonfrom").val();
// 将输入的信息保存到临时JSON
var person = {
"personno": updateno,
"personname": updatename,
"personsex": updatesex,
"personage": updateage,
"personfrom": updatefrom
};
// 开始更新
for (var i = 0; i < persons.length; i++) {
if (persons[i].personno == person.personno) {
persons[i] = person;
// break;
}
}
// 刷新一下
showTable();
alert("更新成功！")
// hiddenForm("updateform")
$updateform.hide();
}
</script>
</head>
<body>
<!-- 头部控制表格按钮 -->
<div>
<button class="btn btn-primary" type="button" onclick="showTable();"><span class="glyphicon glyphicon-th-list"></span> 显示人员信息</button>
<button class="btn btn-success" type="button" onclick="showAddForm();"><span class="glyphicon glyphicon-plus"></span> 添加人员信息</button>
</div>
<hr />
<!-- 主表格 -->
<div>
<table class="table table-hover" id="maintable" style="display: none;">
</table>
</div>
<!-- 添加人员信息表单 -->
<div>
<!-- 需要提交表单才能获取信息,因此提交表单的方法是在form上加onsubmit方法 -->
<!-- 在onsubmit方法里面添加一个return false;这样页面就会认为这个表单还没有完成操作,所以就不会提交了,这是一种欺骗页面的手段; -->
<form id="addform" action="#" method="get" onsubmit="addPersonInfo();return false;" style="display:none;">
<fieldset>
<legend>添加人员信息</legend>
<table class="table table-hover">
<tr>
<td>名称：</td>
<td><input class="form-control" type="text" id="personname" required="required" maxlength="32" /></td>
</tr>
<tr>
<td>年龄：</td>
<td><input class="form-control" type="number" id="personage" required="required" min="0" max="100" step="1" /></td>
</tr>
<tr>
<td>性别：</td>
<td><select class="form-control" id="personsex" required="required" >
<option value="null">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select></td>
</tr>
<tr>
<td>籍贯：</td>
<td><input class="form-control" type="text" name="personfrom" id="personfrom" required="required" maxlength="64" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<button class="btn btn-success" type="submit">确定添加</button>
<button class="btn btn-danger" type="reset" onclick="hiddenAddForm()">取消添加</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<!-- 更新人员信息表单 -->
<div>
<form id="updateform" action="#" method="get" onsubmit="updatePersonInfo();return false;" style="display: none;">
<fieldset>
<legend>更新人员信息</legend>
<input type="hidden" id="updatepersonno" />
<table class="table table-hover">
<tr>
<td>名称：</td>
<td><input class="form-control" type="text" id="updatepersonname" required="required" maxlength="32" /></td>
</tr>
<tr>
<td>年龄：</td>
<td><input class="form-control" type="number" id="updatepersonage" required="required" min="0" max="100" step="1" /></td>
</tr>
<tr>
<td>性别：</td>
<td><select class="form-control" id="updatepersonsex" required="required" >
<option value="null">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select></td>
</tr>
<tr>
<td>籍贯：</td>
<td><input class="form-control" type="text" id="updatepersonfrom" required="required" maxlength="64" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<button class="btn btn-success" type="submit">确定更新</button>
<button class="btn btn-danger" type="reset" onclick="hiddenUpdateForm()">取消更新</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
三、jQuery简化代码风格
1、jQuery概述
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。
通俗的说jquery先写好很多的JS方法，然后我们通过外部引用，用人家已经写好的方法就可以了。
- JavaScript是js原生技术
- jQuery框架技术(使用更简单、功能更丰富)
- jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。
jQuery用途：
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
2、jQuery的简单使用
进行开发时，需要引入外部js
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
- jQuery的语法结构
$(selector).action();
// 工厂函数 $() ：将DOM对象转化为jQuery对象
// 选择器 selector：获取需要操作的DOM元素
// 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
// “$”等同于“ jQuery ”
- jQuery对象与DOM对象
DOM对象：直接使用JavaScript获取的节点对象
var objDOM = document.getElementById("title");
var objHTML = objDOM.innerHTML;
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
$("#title").html();
// 等价于
document.getElementById("title").innerHTML;
注：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery的初步使用</title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function showMessage(){
// JS
var button = document.getElementById("button1").innerHTML;
alert("JS:" + button);
// jQuery
var button = $("#button1").html();
alert("jQuery:" + button)
}
</script>
</head>
<body>
<button type="button" id="button1" onclick="showMessage();">单击按钮</button>
</body>
</html>
| DOM的方法 | jQuery的方法 |
|---|---|
| innerHTML | html() |
| value | val() |
| style.display="" | show() |
| style.display=none | hide() |
- DOM对象与jquery对象的转换
- DOM对象转jQuery对象
使用$()函数进行转换：$(DOM对象)
var txtName = document.getElementById("txtName"); // DOM对象
var $txtName = $(txtName); // jQuery对象
注：jQuery对象命名一般约定以$开头，在事件中经常使用$(this)，this是触发该事件的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM转jQuery</title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function showMessage(){
// DOM对象
var txt = document.getElementById("textname");
// 转换为jQuery对象 通过$(DOM对象)的形式进行转换
// jQuery对象的命名规范一般约定以$开头
// jQuery在事件中经常使用$(this),this是触发该事件的对象
var $a = $(txt);
// 这里才能使用jQuery方法
alert($a.val());
}
</script>
</head>
<body>
<input type="text" name="textname" id="textname" value="abc" onchange="showMessage();" />
</body>
</html>
- jQuery对象转DOM对象
方式一：jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName = $("#txtName"); // jQuery对象
var txtName = $txtName[0]; // DOM对象
方式二：通过get(index)方法得到相应的DOM对象
var $txtName = $("#txtName") // jQuery对象
var txtName = $txtName.get(0); // DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery转DOM</title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function showMessage(){
// jQuery对象
var $txt = $("#textname");
// 转换为DOM对象
// jQuery对象是一个类似数组的对象，可以通过中括号[index]进行转换
// var a = $txt[0];
// 也可以通过get(index)方法转换
var a = $txt.get(0);
// 使用DOM对象的方法
alert(a.value);
}
</script>
</head>
<body>
<input type="text" name="textname" id="textname" value="abc" onchange="showMessage();" />
</body>
</html>
四、Bootstrap美化页面技术
1、Bootstrap概述
Bootstrap来自Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。
特点：
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持：所有的主流浏览器都支持 Bootstrap。
- 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
- 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
- 为开发人员创建接口提供了一个简洁统一的解决方案。
- 包含了功能强大的内置组件，易于定制。
- 提供了基于 Web 的定制。
- 开源
通俗讲就是大牛已经写好了一套CSS样式,而我们只需要掌握一点点的CSS技巧就能应用bootstrap构建一套非常漂亮的页面效果
Bootstrap包含的内容
- 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
- CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
- 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
- JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
2、Bootstrap的简单使用
引入相关文件
<!-- 引入CSS文件 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!-- 引入jquery -->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入bootstrap的JS -->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
注：bootstrap有些功能是依赖于jquery实现的,所以要引入文件的话 CSS文件和JS文件都需要引入，并且包括jQuery文件
1、Bootstrap按钮
任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。Bootstrap提供了一些选项来定义按钮的样式。
以下样式可用于a、button或input元素上：
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap按钮</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
</head>
<body>
<!-- 这些样式可用于<a>, <button>, 或 <input> 元素上： -->
<button class="btn btn-default">按钮1</button>
<button class="btn btn-block">按钮2</button>
<!-- danger 红色 -->
<button class="btn btn-danger">按钮3</button>
<button class="btn btn-group">按钮4</button>
<button class="btn btn-group-justified">按钮5</button>
<button class="btn btn-group-lg">按钮6</button>
<button class="btn btn-group-sm">按钮7</button>
<button class="btn btn-group-vertical">按钮8</button>
<button class="btn btn-group-xs">按钮9</button>
<button class="btn btn-">按钮10</button>
<!-- info 天蓝色 -->
<button class="btn btn-info">按钮11</button>
<button class="btn btn-lg">按钮12</button>
<button class="btn btn-link">按钮13</button>
<!-- primary 蔚蓝色 -->
<button class="btn btn-primary">按钮14</button>
<button class="btn btn-sm">按钮15</button>
<!-- success 绿色 -->
<button class="btn btn-success">按钮16</button>
<button class="btn btn-toolbar">按钮17</button>
<!-- warning 橙色 -->
<button class="btn btn-warning">按钮18</button>
<button class="btn btn-xs">按钮19</button>
<button class="btn visible-print-inline-block">按钮20</button>
<button class="btn glyphicon-object-align-bottom">按钮21</button>
<button class="btn glyphicon-object-align-horizontal">按钮22</button>
<button class="btn glyphicon-object-align-left">按钮23</button>
<button class="btn glyphicon-object-align-right">按钮24</button>
<button class="btn glyphicon-object-align-top">按钮25</button>
<button class="btn glyphicon-object-align-vertical">按钮26</button>
<button class="btn btn-lg">按钮27</button>
<button class="btn btn-xs">按钮28</button>
<button class="btn active">按钮29</button>
<button class="btn disabled">按钮30</button>
</body>
</html>
2、Bootstrap字体图标
字体图标是在 Web 项目中使用的图标字体
在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.woff2
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap字体图标</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-bed"></span >
<span class="glyphicon glyphicon-bold"></span >
<span class="glyphicon glyphicon-bookmark"></span >
<span class="glyphicon glyphicon-camera"></span >
<span class="glyphicon glyphicon-cloud"></span >
<span class="glyphicon glyphicon-cog"></span >
<span class="glyphicon glyphicon-copy"></span >
<span class="glyphicon glyphicon-download"></span >
<span class="glyphicon glyphicon-edit"></span >
<span class="glyphicon glyphicon-export"></span >
<span class="glyphicon glyphicon-file"></span >
<span class="glyphicon glyphicon-glass"></span >
<span class="glyphicon glyphicon-fire"></span >
<span class="glyphicon glyphicon-heart"></span >
<span class="glyphicon glyphicon-user"></span >
<span class="glyphicon glyphicon-search"></span >
</body>
</html>
3、Bootstrap表格和表单
应用于table中的样式：
| 类 | 描述 |
|---|---|
| .table | 为任意table添加基本样式 (只有横向分隔线) |
| .table-striped | 在table内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在table内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
| .table-responsive | 根据设备屏幕大小使用不同样式（当屏幕小于768且内容过多时，会出现横向滚动条） |
应用于tr，th，td这些元素的样式
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
表单使用form-control 表示圆角并占满整行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap表格</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!-- table-condensed：让表格更紧凑 -->
<!-- table-hovel：在table内的任一行启用鼠标悬停状态 -->
<!-- table-bordered：为所有表格的单元格添加边框 -->
<!-- table-striped：在table内添加斑马线形式的条纹 -->
<!-- table-responsive：根据设备屏幕大小，出不同样式，当屏幕小于768，并且内容过多时，会出现横向滚动条 -->
<table class="table table-hovel">
<tr class="active">
<th>表头第1列</th>
<th>表头第2列</th>
</tr>
<tr class="success">
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr class="info">
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
<tr class="warning">
<td>第四行第一列</td>
<td>第四行第二列</td>
</tr>
<tr class="danger">
<td>第四行第一列</td>
<td>第四行第二列</td>
</tr>
</table>
<form >
<input class="form-control" type="text"/> <br>
</form>
</body>
</html>
3135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
