一、HTMLDOM的基本剖析
1.document对象获取element元素对象的方法
getElementById() 返回对拥有指定 id 的第一个对象的引用
getElementsByName() 返回带有指定名称的对象集合
getElementsByTagName() 返回带有指定标签名的对象集合
2.在核心dom(所有的标签语言上的共性提取出来的)的基础上对element又进行了一次封装
3.Image对象
属性：
src 设置或返回图像的 URL
通过Image对象获取图片的src
<img id="img1" src="../img/dog.jpg">
<script>
function method1(){
var image=document.getElementById("img1");
console.log(image.src);
}
</script>
4.Form对象
属性：
action 设置或返回表单的 action 属性
method 设置或返回将数据发送到服务器的 HTTP 方法
target 设置或返回表单提交结果的 Frame 或 Window 名
length 返回表单中的元素数目
方法：
reset() 把表单的所有输入元素重置为它们的默认值
submit() 提交表单
二、HTMLDOM的体系了解及常用属性
1.整个Dom体系的理解
html文档--加载到浏览器内存-->DOM树
DOM树--->核心DOM--->Node document,Element,attr,text
核心DOM--->HtmlDom,在核心DOM的基础上对Elements细分成html的各个元素标签，通过htmlDom中的对象就能够非常方便的去操作html元素的属性
2.常用属性
1.1 获取元素内容
document.getElementById("").innerText; //只得到文本的内容
document.getElementById("").innerHTML; //得到里面指定标签中所有的内容
当innerHTML没有赋值的时候是获取元素里面全部的内容（html元素）
当innerHTML进行赋值之后，设置元素里面的内容，并且覆盖里面的内容
1.2 举例说明：
<a id="a1" href="https://www.baidu.com">百度</a>
var div1=document.getElementById("a1");
console.log(div1.innerHTML);
console.log(div1.innerHTML);
2.1 获取表单中的内容
所有的表单元素都有一个属性：value，可以直接通过表单元素获取对应的value中的内容，value属性同样可以赋值
document.getElementById("input1").value;
修改value属性
document.getElementById("input1").value="张三";
//单选和复选按钮没有赋值的时候，value的值默认是on
2.2 获取样式 document.getElementById("div1").style.backgroundColor;
修改样式 div1.style.backgroundColor="blue";
3.1 在js上面进行事件绑定
<input type="button" value="按钮" id="btn1">
<script>
<!--第一种方式-->
document.getElementById("btn1").click(function(){
console.log("按钮被点击了");
});
<!--第二种方式-->
document.getElementById("btn1").click(method1);
function method1(){
console.log("按钮被点击了");
}
//如果进行click(method1)方法虽然不会报null异常，但是调用时会出现问题（什么信息都不显示），只能通过给onclick=method1赋值的方式进行事件绑定的正确方式
<!--第三种方式:最正确的方式-->
document.getElementById("btn1").onclick=method1;
function method1(){
console.log("按钮被点击了");
}
</script>
<!--html加载进浏览器内存时，是从上到下加载，如果在js代码中进行事件的绑定，如果js代码在input的上面，会出现内容为null的错误,所以，我们应该在整个body的最后面写js代码-->
3.2 监听页面被完全加载(如果想js写在html的上面，那么可以使用这个属性进行事件绑定，在页面被完全加载完之后，再执行js代码)
window.onload=function(){
document.getElementById("btn1").onclick=function () {
console.log("按钮被点击了...");
};
}
三、JS案例演示
1.使用JS进行表单的校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
/*表单校验的时机
* 1.元素失去焦点
* 2.提交表单*/
function checkUserName(){
var content=document.getElementById("username").value;
var regexp=/^\w{4,6}$/;
var isSuccess=regexp.test(content);
if(!isSuccess){
document.getElementById("errorMsg").innerHTML="用户名必须是4-6位字符！！";
}else {
document.getElementById("errorMsg").innerHTML="";
}
return isSuccess;
}
window.onload=function () {
/*1.元素失去焦点*/
document.getElementById("username").onblur=checkUserName;
/*表单提交之后要校验*/
var form_element=document.getElementById("myform");
/*如果用户提交表单之后的校验一旦通过就进行页面跳转
* 如果校验不通过就不进行页面跳转*/
form_element.onsubmit=function () {
/*校验用户名或者密码输入的是否正确*/
var isSuccess=checkUserName();
return isSuccess;
/*如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。*/
/*出现了问题：校验不通过，进行了页面跳转*/
}
}
</script>
<body>
<!--在提交表单之前先进行表单校验，只有表单校验完之后才能进行提交-->
<form action="XuQiu1.html" id="myform">
用户名：<input type="text" id="username" placeholder="只能输入4-16位的字符">
<span id="errorMsg" style="color:red;"></span><br>
密码： <input type="password" id="password"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
在没有输入前的效果如下所示：
失去焦点之后的没有输入4-16位的字符的效果如下所示：
点击提交之后没有输入4-16位的字符的效果如下所示：
输入正确的用户名之后的效果如下所示：
2.点击全选之后将下面复选框中的内容全部选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
document.getElementById("firstCheck").onclick=function(){
/*1.获取被点击的复选框的选中状态
* 2.判断选中状态
* 3.根据选中状态设置后面所有复选框的选中状态*/
var ischecked=document.getElementById("firstCheck").checked;
/*if(ischecked){
var checkItem=document.getElementsByName("checkItem");
for (var i = 0; i < checkItem.length ; i++) {
checkItem[i].checked=true;
}
}else{
var checkItem=document.getElementsByName("checkItem");
for (var i = 0; i < checkItem.length ; i++) {
checkItem[i].checked=false;
}
}*/
var checkItem=document.getElementsByName("checkItem");
for (var i = 0; i < checkItem.length ; i++) {
checkItem[i].checked=ischecked;
}
}
}
</script>
</head>
<body>
<table align="center" border="1px" width="300px" id="tableID">
<tr>
<td><input name="checkItem" type="checkbox" id="firstCheck"></td>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td><input name="checkItem" type="checkbox"></td>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td><input name="checkItem" type="checkbox"></td>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
</body>
</html>
没有点击第一行不进行全选的效果
点击第一行之后进行全选的效果
3.使用JS进行抽奖的活动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var imgs=[
"a1.png",
"a2.png",
"a3.png",
"a6.png",
"a7.jpg",
"a8.jpg"
];
function randomIndex(){
return Math.floor(Math.random()*imgs.length);
}
window.onload=function(){
var sid;
var index;
document.getElementById("startID").onclick=function () {
sid=window.setInterval(function () {
/*console.log("不断滚动图片")*/
index=randomIndex();
document.getElementById("imgID").src= imgs[index];
},10)
}
document.getElementById("stopID").onclick=function () {
window.clearInterval(sid);
document.getElementById("img2ID").src=imgs[index];
}
}
</script>
</head>
<body>
<!--抽奖-->
<img src="a1.png" width="100px" height="75px" id="imgID"><br>
<img src="a1.png" width="200px" height="150px" id="img2ID"><br>
<!--开始按钮-->
<input type="button" value="点击开始" id="startID">
<!--结束按钮-->
<input type="button" value="点击停止" id="stopID">
</body>
</html>
页面的默认效果
点击开始之后小的图片开始随机跳转，点击停止，小图片停止跳动，并且将图片设置为大的图片
四、前端框架:Bootstrap的研究和学习
1.bootstrap框架
1.1 把前端的一些通用的模板组件/样式封装好，开发工程师直接拿来用就可以/*bootstrap elementUI layUI*/
1.2 bootstrap.js 内容时相同的，源码版本/bootstrap.min.js 压缩版本，减少了一些空格，注释... 小一些可以在网络上更加快速的传输
2.进入bootstrap的官网
3.下载bootstrap的源码和文件包
链接：https://pan.baidu.com/s/1tNnFlKW6DnZdrMWJJpsZXw
提取码：ptrd
复制这段内容后打开百度网盘手机App，操作更方便哦
4.将bootstrap-3.3.7-dist整个文件拷贝到项目模块中,这个不是jar包，不需要添加项目依赖
5.新建一个pages文件，新建一个Demo1.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<style>
.divclass{
border: red solid 1px;
height: 200px;
}
</style>
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
注意：bootstrap-3.3.7-dist与pages处于同一级目录下，可以更改引入的css和js
从bootstrap官网下载的超级简单的HTML模版中包含了下面的三个东西
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
那么为了更够更好的使用自己项目中引入的css和js的东西，我们可以使用相对路径替换掉原本的链接官网的地址
<!-- Bootstrap -->
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
五、了解bootstrap框架中的一些相关的使用方式
1.在了解bootstrap的一些使用方式之前，我们先来说一个响应式布局
1.1 容器里面支持响应式布局
<!--占满整个屏幕的-->
<div class="container-fluid">
hello world
</div>
<!--留白的-->
<div class="container">
hello world
</div>
1.2 响应式布局：一个页面会根据展示的屏幕尺寸自动调节页面的展示样式
1.3 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
1.4 栅格系统通过行和列进页面布局，如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
2.Demo1.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<style>
.divclass{
border: red solid 1px;
height: 200px;
}
</style>
</head>
<body>
<h1>你好，世界！</h1>
<!--占满全屏-->
<div class="container-fluid">
hello world
</div>
<!--留白的-->
<div class="container">
hello world
</div>
<div class="container">
<div class="row">
<div class="row">
<div class="divclass col-md-3 col-sm-6 col-xs-12">div1</div>
<div class="divclass col-md-3 col-sm-6 col-xs-12">div2</div>
<div class="divclass col-md-3 col-sm-6 col-xs-12">div3</div>
<div class="divclass col-md-3 col-sm-6 col-xs-12">div4</div>
</div>
<div class="row">
<!--bootstrap如果超过了12列会自动换行-->
<div class="divclass col-md-8">div1</div>
</div>
</div>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
演示截图如下所示：
Demo2.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<style>
.divclass{
border: red solid 1px;
height: 200px;
}
</style>
</head>
<body>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
The following snippet of text is <strong>rendered as bold text</strong>
<table class="table table-hover">
<tr class="active">
<td>First Name</td>
<td>Last Name</td>
<td>Username</td>
</tr>
<tr class="danger">
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="info">
<td>Larry</td>
<td>Thornton</td>
<td>@twitter</td>
</tr>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</table>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
演示截图如下所示：
Demo3.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
<img src="../img/a1.png" alt="..." class="img-rounded">
<img src="../img/a2.png" alt="..." class="img-circle">
<img src="../img/a3.png" alt="..." class="img-thumbnail">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
演示截图如下所示：
总结
bootstrap是一个前端的框架，封装html，css，js，我们在使用时只需要知道基本的引入bootstrap包，然后会拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。之后如果我们想要使用它封装好的一些样式或者js代码只需要去官网复制粘贴，然后在这个基础上进行需求的更改即可！！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
