2019-7-25 [HTML_jQuery_Bootstrap] jQuery[语法/对象之间的转化] 案例优化[CURD] Bootstrap优化[样式/按钮/字体/表格/表达]

最新推荐文章于 2024-04-11 14:32:47 发布

景子墨

最新推荐文章于 2024-04-11 14:32:47 发布

阅读量251

点赞数 1

分类专栏： HTML 文章标签： jQuery Bootstrap HTML

本文链接：https://blog.csdn.net/weixin_45172861/article/details/98201593

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

4. jQuery简化JavaScript
5. Bootstrap技术美化页面

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).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>&nbsp;&nbsp;&nbsp;&nbsp;<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>

修改完后的更新:
在这里插入图片描述
到此页面美化工作结束

景子墨

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2019-7-25 [HTML_jQuery_Bootstrap] jQuery[语法/对象之间的转化] 案例优化[CURD] Bootstrap优化[样式/按钮/字体/表格/表达]

4.jQuery简化JavaScript4.1 jQuery概述4.1.1 什么是jQueryjQuery由美国人John Resig于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装通俗的说jquery先写好很多的JS方法然后我们通过外部引用用人家已经写好的方法就可以了它的设计思想是write less,do more...
复制链接

扫一扫