4. jQuery简化JavaScript
4.1 jQuery概述
4.1.1 什么是jQuery
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
通俗的说jquery先写好很多的JS方法 然后我们通过外部引用 用人家已经写好的方法就可以了
它的设计思想是write less,do more(用更少的代码完成更多的功能)
JavaScript 是js原生技术 jQuery 框架技术(使用更简单 但是功能更丰富)
4.1.2 jQuery用途
- 访问和操作DOM元素(最常用)
- 控制页面样式
- 对页面事件进行处理
扩展新的jQuery插件与Ajax技术完美结合(echarts)
总结来看
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
4.2 jQuery入门程序
4.2.1 下载并导入jQuery
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
4.2.2 jQuery入门使用
4.2.2.1 jQuery的语法结构
$(selector).action() ;
工厂函数 $() ：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
“$”等同于“ jQuery ”
4.2.2.2 jQuery对象与DOM对象
4.2.2.3 DOM对象与jquery对象的转换(了解)
4.3 jQuery入门总结
4.4 jQuery练习:案例支持 : 优化人员管理系统的JS操作
我们使用jQuery的目的很简单就是简化我们现有操作,那么接下来我们也是按数据的 添加 修改 删除 查询 操作来看下jQuery到底给我们做了怎么样的优化
前期准备,一定要看好是否已经引用了jquery文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
已经引入了没有什么问题,那么怎么看引入的是否正确呢?
执行下面的代码即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function sayHello(){
alert("Hello,Jquery");
}
// 让sayHello方法页面加载的时候执行
$(document).ready(function (){
sayHello();
});
</script>
</head>
<body>
</body>
</html>
如果页面可以弹出Hello,Jquery的话就说明jquery已经正常工作了,为啥?
因为上面的代码是将document对象通过工厂构造函数 $() 转换为jquery对象后调用这个对象的 ready()方法,
然后在ready()方法的参数里面写了一个匿名JS方法编写弹窗消息,
而这个ready方法就是页面加载的时候出发执行的方法,
所以页面加载可以看到消息说明jqueyr正在工作;
我们准备玩了jquery,我们就可以使用jquery完成我们的代码优化了
4.4.1 查询优化
jQuery 主要针对JavaScript进行了封装,把好多以前的属性调用都封装成了方法,所以用起来更加便捷;
那现在让我们找到我们已经写好的查询方法
// 编写显示人员方法
function showPersons(){
// 按ID获取table
var tb1 = document.getElementById("tb1");
// 给tb1拼接元素
var str = "<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th></tr>";
// 遍历JSON数组继续拼接
for (var i = 0; i < persons.length; i++) {
var p = persons[i];
str += "<tr><td>"+p.id+"</td><td>"+p.name+"</td><td>"+p.sex+"</td><td>"+p.age+"</td><td>"+p.from+"</td><th><button type='button' onclick='showUpdateForm("+p.id+");' >更新</button>||<button type='button' onclick='deletePerson("+p.id+")'>删除</button></th></tr>";
}
// 最后把拼接好的字符串放入table中
tb1.innerHTML = str;
}
在查询方法中jQuery可以帮助我们优化的有两处
- 按ID获取页面数据
以前我们是这么写的
// 按ID获取table
var tb1 = document.getElementById("tb1");
现在有了jquery你就可以这么写了
// 按ID获取table
var tb1 = $("#tb1");
怎么样是不是方便了不少
2. 给标签之间的的内容赋值
以前我们是这么写的
// 最后把拼接好的字符串放入table中
tb1.innerHTML = str;
现在你可以这么写
// 最后把拼接好的字符串放入table中
tb1.html(str);
验证是否报错
功能正常,这也验证了jQuery所倡导的,用更少的代码完成更多的功能;
4.4.2 添加优化
之前的添加代码
// 编写添加方法
function addPerson(){
// 接收页面数据
var pname = document.getElementById("pname");
var sex = document.getElementById("sex");
var age = document.getElementById("age");
var pfrom = document.getElementById("pfrom");
// 获取这个对象的主键信息
var id = id_index;
// 主键用过就自增
id_index++;
// 开始添加数据
var p = {"id":id,"name":pname.value,"sex":sex.value,"age":age.value,"from":pfrom.value};
// 添加到数组
persons.push(p);
// 因为数组数据发生了改变,重新调用查询方法刷新页面显示
showPersons();
}
现在的添加代码
// 编写添加方法
function addPerson(){
// 接收页面数据
var pname = $("#pname");
var sex = $("#sex");
var age = $("#age");
var pfrom = $("#pfrom");
// 获取这个对象的主键信息
var id = id_index;
// 主键用过就自增
id_index++;
// 开始添加数据
var p = {"id":id,"name":pname.val(),"sex":sex.val(),"age":age.val(),"from":pfrom.val()};
// 添加到数组
persons.push(p);
// 因为数组数据发生了改变,重新调用查询方法刷新页面显示
showPersons();
}
优化了什么呢?
JavaScript : document.getElementById(标签ID) 等价于 jQuery : $("#标签ID")
dom对象.value 等价于 jquery对象.val()
4.4.3 删除优化
删除操作中并不涉及对DOM对象的操作,所以jQuery也帮不上什么忙
4.4.4 更新优化
更新优化就很多了,我们先来看看更新优化之前的代码
展示要更新信息的JS
JavaScript原生的
// 显示数据方法
function showUpdateForm(pid){
// 找到要更新的数据
for (var i = 0; i < persons.length; i++) {
if(persons[i].id == pid){
var p = persons[i];
// 将获取到的数据显示到form表单中的元素
document.getElementById("upid").value = p.id;
document.getElementById("upname").value = p.name;
document.getElementById("uage").value = p.age;
document.getElementById("usex").value = p.sex;
document.getElementById("upfrom").value = p.from;
// 显示form
document.getElementById("form2").style.display = "";
}
}
}
jQuery优化的
// 显示数据方法
function showUpdateForm(pid){
// 找到要更新的数据
for (var i = 0; i < persons.length; i++) {
if(persons[i].id == pid){
var p = persons[i];
// 将获取到的数据显示到form表单中的元素
$("#upid").val(p.id);
$("#upname").val(p.name);
$("#uage").val(p.age);
$("#usex").val(p.sex);
$("#upfrom").val(p.from);
// 显示form
$("#form2").show();
}
}
}
此处我们需要注意一个细节,就是jQuery展示和隐藏标签也是采用的方法,如果你想隐藏某个标签
(
s
e
l
e
c
t
o
r
)
.
h
i
d
e
(
)
;
∗
∗
如
果
你
想
显
示
某
个
标
签
∗
∗
(selector).hide();** 如果你想显示某个标签 **
(selector).hide();∗∗如果你想显示某个标签∗∗(selector).show();
举个例子:
JavaScript原生的隐藏form表单的写法
// 根据ID隐藏form表单
function hideForm(formid){
// 按ID获取这个form
var form = document.getElementById(formid);
// 设置form表单的显示属性为隐藏
form.style.display = "none";
}
jquery优化后的隐藏form表单的写法
// 根据ID隐藏form表单
function hideForm(formid){
// 按ID获取这个form
$("#"+formid).hide();
}
怎么样是不是很灵活?
最后我们再检查检查哪里需要优化吧;
JavaScript原生的显示添加form的JS’
// 显示添加表单
function showAddForm(){
// 获取添加表单
var form1 = document.getElementById("form1");
// 设置form1的属性为显示 因为标签本来就是可以显示的 我们只要把display的属性值去掉即可
form1.style.display = "";
}
jquery优化之后的
// 显示添加表单
function showAddForm(){
// 获取添加表单
$("#form1").show();
}
到此 人员信息管理系统的JS部分优化完毕
5. Bootstrap技术美化页面
5.1 Bootstrap概述
5.1.1 什么是bootstrap?
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
这个表格就是在bootstrap的基础上构建的一个表格;所以使用bootstrap来构建我们以后用到的简单页面效果还是不错的
5.1.2 为什么使用bootstrap?
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
说白了就是人家已经写好了一套CSS样式,而我们只需要掌握一点点的CSS技巧就能应用bootstrap构建一套非常漂亮的页面效果
5.1.3 Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
5.2 Bootstrap使用
5.2.1 下载Bootstrap
5.2.2 Bootstrap入门
使用bootstrap也非常简单,一共就分两步操作即可
5.2.2.1 引入相关文件
<!-- 引入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文件
5.2.2.2 修改样式
样式的修改可以借助菜鸟教程,上面有很多bootstrap的现成案例我们拿过来用就可以了
菜鸟教程bootstrap地址
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
举个例子,比如我们现在有两个按钮
不是很好看,我们来美化一下这两个按钮
<div style="margin: 15px;">
<button type="button" class="btn btn-primary" onclick="showPersons();">显示人员数据</button>
<button type="button" class="btn btn-success" onclick="showAddForm();">添加新人员</button>
</div>
根据上面的案例启示不难发现,我们原来的代码什么也不用改,只需要添加我们向添加的class样式就可以了,下面就给大家提供一个bootstrap按钮的样式表:
5.2.2.3 Bootstrap 按钮
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
以下样式可用于<a>, <button>, 或 <input> 元素上：
5.2.3 Bootstrap字体图标
字体图标是在 Web 项目中使用的图标字体
在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
字体支持来自于https://www.glyphicons.com/
虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链接。
5.2.3.1 如何使用字体图标
如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
代码:
<span class="glyphicon glyphicon-search"></span>
我们刚才写的按钮加上字体图表的样子
代码:
<div style="margin: 15px;">
<button type="button" class="btn btn-primary" onclick="showPersons();"><span class="glyphicon glyphicon-th-list"></span> 显示人员数据</button>
<button type="button" class="btn btn-success" onclick="showAddForm();"><span class="glyphicon glyphicon-plus"></span> 添加新人员</button>
</div>
当然有按钮的地方都可以这么优化,而且还有很多图表可以供大家设置,我们一会再设置,先继续往下优化
5.2.4 表格类
下表样式可用于表格中：
一个基础表格就优化好了,但是不太好看,没关系稍微调试就好看了
第一步 : 表头价格淡蓝色背景
代码
// 给tb1拼接元素
var str = "<tr class='info'><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th></tr>";
怎么样这个表格是不是好看多了呢,但是里面有两个按钮不好看,我们也来美化一下吧
代码 :
// 编写显示人员方法
function showPersons(){
// 按ID获取table
var tb1 = $("#tb1");
// 给tb1拼接元素
var str = "<tr class='info'><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th></tr>";
// 遍历JSON数组继续拼接
for (var i = 0; i < persons.length; i++) {
var p = persons[i];
var buttonstr = "<th><button type='button' class='btn btn-warning' onclick='showUpdateForm("+p.id+");' ><span class='glyphicon glyphicon-edit'></span> 更新</button> <button type='button' class='btn btn-danger' onclick='deletePerson("+p.id+")'><span class='glyphicon glyphicon-remove'></span> 删除</button></th>";
str += "<tr><td>"+p.id+"</td><td>"+p.name+"</td><td>"+p.sex+"</td><td>"+p.age+"</td><td>"+p.from+"</td>"+buttonstr+"</tr>";
}
// 最后把拼接好的字符串放入table中
tb1.html(str);
}
5.2.5 form表单的优化
这回 就好看多了吧,美滋滋,那么我们再继续优化,比如再优化我们的form表单
我们对表单的优化可能就要麻烦一些了,bootstrap并没有成型的太好看的表单,所以我们要借助table来优化我们的添加个修改页面
第一步 : table加css
<table class="table table-hover">
第二步 : 每个添加项都以一行两列展开,完成数据的接收
<input class="form-control" type="text" id="upname" required="required" placeholder="请输入人员姓名......" />
大家此处要注意优化输入框的CSS是 form-control
第三步 优化最下面的两个按钮
<button type="submit" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-floppy-saved"></span> 确定</button>
<button type="reset" class="btn btn-danger btn-lg" onclick="hideForm('form1');"><span class="glyphicon glyphicon-floppy-remove"></span> 取消</button>
三步优化好之后我们的添加界面现在是这样的
代码 :
<div id="form1" style="display: none;">
<form method="post" action="#" onsubmit="addPerson();return false;" >
<fieldset>
<legend>添加人员信息</legend>
<table class="table table-hover">
<tr>
<td>姓名:</td>
<td>
<input class="form-control" type="text" id="pname" required="required" placeholder="请输入人员姓名......" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<select class="form-control" id="sex" required="required">
<option value="">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input class="form-control" type="number" id="age" required="required" placeholder="请输入人员年龄......" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<input class="form-control" type="text" id="pfrom" required="required" placeholder="请输入人员籍贯......" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-floppy-saved"></span> 确定</button>
<button type="reset" class="btn btn-danger" onclick="hideForm('form1');"><span class="glyphicon glyphicon-floppy-remove"></span> 取消</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
怎么样是不是有点效果了呢,好吧,那我们继续完成最后的优化吧,把更新的form表单也变成添加这样的
代码 :
<div id="form2" style="display: none;">
<form method="post" action="#" onsubmit="updatePerson();return false;">
<input type="hidden" id="upid" />
<fieldset>
<legend>添加人员信息</legend>
<table class="table table-hover">
<tr>
<td>姓名:</td>
<td>
<input class="form-control" type="text" id="upname" required="required" placeholder="请输入人员姓名......" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<select class="form-control" id="usex" required="required">
<option value="">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input class="form-control" type="number" id="uage" required="required" placeholder="请输入人员年龄......" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<input class="form-control" type="text" id="upfrom" required="required" placeholder="请输入人员籍贯......" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="submit" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-floppy-saved"></span> 确定</button>
<button type="reset" class="btn btn-danger btn-lg" onclick="hideForm('form2');"><span class="glyphicon glyphicon-floppy-remove"></span> 取消</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
修改完后的更新:
到此页面美化工作结束
2200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
