前端HTML篇
硬核！一篇文章教你阅遍html。
声明：本篇文章只是一个刚开始学习后端开发的菜鸟汇总完成的 JavaWeb学习前导html篇，所以专业性肯定不如前端人员，但用于学习后端开发足够了，刚接触html的童鞋拿来快速了解html也是很nice的。
HTML部分
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”
一、基础标签
1.标题标签
<!--标题标签：h1~h6
h7和文本内容一样 -->
<h1>内容</h1>
2.段落标签
<p>天生吾族，岂可轻弃</p>
3.换行标签
<!--换行标签是单标签
换行标签：br
分隔标签：hr -->
天生吾族
<br />
岂可轻弃
<hr />
4.图片标签
<!--
图片标签：img
src-图片资源
width：宽度（px-像素 %-浏览器的宽度百分比）
height：高度
alt：图片加载失败后展示的内容 -->
<img src="img/柯南.jpg" width="10%" alt="加载失败 "/>
5.无序列表
<!--
无序列表：ul
type：样式（circle-空心圆 disc-实心圆 square-实心方块）
li：项 -->
<ul type="square">
<li>无序1</li>
<li>无序2</li>
<li>无序3</li>
</ul>
6.有序列表
<!--
有序列表：ol
type:样式(1-数字 a-小写字母 A-大写字母 i-小写罗马数字 I-大写罗马数字)
li：项 -->
<ol type="I">
<li>有序1</li>
<li>有序2</li>
</ol>
7.定义列表
<!--
定义列表：dl
dt：列表标签
dd：列表内容
-->
<dl>
<dt>基德</dt>
<dd>出生于1998年1月1日，三岁精通HTML，五岁精通Java，八岁删库跑路</dd>
</dl>
8.超链接
<!--
超链接标签：a
href：链接地址
target：目标（_self-当前页面 _blank-新增页面）
-->
<a href="http网址" target="_self">百度一下，你就知道</a>
<!--超链接也可以跳转自己的项目文件 -->
<a href="08_列表案例.html" target="_blank">列表案例</a>
<!--将图片作为超链接 -->
<a href="http网址" target="_blank">
<img src="img/百度.jpg" width="10%"/>
</a>
9.锚链接
<a href="#new01">法制</a>
<a href="#new02">国际</a>
<a href="#new03">娱乐</a>
<!--多写点h1标签才好看出效果 -->
<a name="new01"></a><!--锚点-->
<h1>法制新闻</h1>
<a name="new02"></a><!--锚点-->
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<a name="new03"></a><!--锚点-->
<h1>娱乐新闻</h1>
10.表格
<!--
table - 表格
border="1" - 有边框
tr - 行
th - 列（居中加粗）
td - 列
rowspan="2" - 占两行
colspan="2" - 占两列
-->
<table border="1" width="30%">
<tr>
<th>C</th><th>-></th>
<th>+</th><th>-</th>
</tr>
<tr>
<th>7</th><th>8</th>
<th>9</th><th>*</th>
</tr>
<tr>
<th>4</th><th>5</th>
<th>6</th><th>/</th>
</tr>
<tr>
<th>1</th><th>2</th>
<th>3</th><th rowspan="2">=</th>
</tr>
<tr>
<th colspan="2">0</th>
<th>.</th>
</tr>
</table>
11.表单(重点)
<!--以下内容均在body中 -->
<!-- form - 表单 -->
<form action="服务器地址" method="post">
输入框：<input type="text" name="username" placeholder="输入框"/><br />
密码框：<input type="password" name="password" placeholder="密码框" /><br />
<!-- 单选框、多选框：默认选中 - checked="checked" -->
单选框：
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<br />
多选框：
<input type="checkbox" name="hobby" value="football" checked="checked"/>足球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="shop"/>购物
<br />
<!-- 下拉列表：默认选中- selected="selected" -->
下拉列表：
<select name="province">
<option value="sc">四川</option>
<option value="jx" selected="selected">江西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>省
<select name="city">
<option value="cd">成都</option>
<option value="zg">自贡</option>
<option value="ya">雅安</option>
<option value="ls">乐山</option>
<option value="ms">眉山</option>
<option value="my">绵阳</option>
</select>市
<br />
<!-- 提交按钮和图片按钮 功能一样 -->
<input type="button" value="普通按钮" onclick="fun01()"/>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" src="img/图片按钮.jpg" width="10%"/>
<br /><br />
<!--
textarea文本域
rows高度
cols宽度
required必填项
readonly只读 -->
<textarea rows="10" cols="20" required="required" readonly="readonly">
协议：xxxxxxxxxxx
</textarea>
</form>
<script type="text/javascript">
function fun01(){
alert("柯南死神小学生");
}
</script>
12.扩展
图标，百度网页最上方的头部标签
<head>
<meta charset="utf-8" />
<title>百度一下，你就知道</title>
<link rel="shortcut icon" href="img/favicon.ico" />
</head>
二、HTML5新特性
定义文档类型
在文件的开头总是会有一个标签
| 语言 | 文档类型声明方式 |
|---|---|
| html4 | < !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> |
| html5 | < !DOCTYPE html> |
新增语义化标签
| 标签 | 描述 |
|---|---|
| < header > | 头部标签 |
| < nav > | 导航标签 |
| < article > | 内容标签 |
| < section > | 块级标签 |
| < aside > | 侧边栏标签 |
| < footer > | 尾部标签 |
<body>
<style type="text/css">
header,nav,article,aside,footer,section{
background-color: #87A442;
text-align: center;
border: black 1px solid;
border-radius:20px;
margin: 10px;
padding: 10px;
}
header{
height: 120px;
}
nav{
height: 50px;
}
article{
width: 46%;
height: 120px;
float: left;
}
aside{
width: 46%;
height: 120px;
float: right;yu
}
footer{
clear: both;
height: 120px;
}
section{
height: 70px;
}
</style>
<header>头部标签 - header</header>
<nav>导航标签 - nav</nav>
<div>
<article>内容标签 - article
<section>块级标签 - section</section>
</article>
<aside>侧边栏标签 - aside</aside>
</div>
<footer>尾部标签 - footer</footer>
</body>
新增表单内容
<form action="#" method="post">
日期选择器：<input type="date"/><br/>
时间选择器：<input type="time"/><br/>
邮箱输入框：<input type="email"/><br/>
数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
URL输入框： <input type="url" list="url_list"/>
<datalist id="url_list">
<option label="W3School" value="http网址1" />
<option label="谷歌" value="http网址2" />
<option label="百度一下" value="http网址3" />
</datalist><br/>
<input type="submit" value="提交"/>
</form>
css部分
一、CSS 定义
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素，是为了解决内容与表现分离的问题
多个样式定义可层叠为一，样式通常存储在样式表中
二、各种选择器
1.通配符选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<h1>一级标签</h1>
<h6>六级标签</h6>
<p>段落标签1</p>
<p>段落标签2</p>
</body>
2.基本选择器
基本选择器的优先级别：ID > CLASS > 标签
<head>
<style type="text/css">
/*基本选择器 - 标签选择器*/
p{color: red;}
/*基本选择器 - 类选择器*/
.myClass{color: green;}
/*基本选择器 - id选择器
注意：项目中id都是唯一的*/
#myId{color: blue;}
</style>
</head>
<body>
<h1 class="myClass">一级标签</h1>
<h2 id="myId">二级标签</h2>
<h3 class="myClass">三级标签</h3>
<h4>四级标签</h4>
<p>段落标签1</p>
<p>段落标签2</p>
</body>
3.群组选择器
<head><style type="text/css">
/*群组选择器*/
h1,h3,p{
color: red;
}
</style></head>
4.派生选择器
<head><style type="text/css">
/* 派生选择器、上下文关系选择器：
* 后代选择器：ul a{color: red;}
* 子代选择器：li>a{color: red;}
* 相邻兄弟选择器：a+a{color: red;}
* (注意：效果作用在后者)
*/
</style></head>
<body>
<ul>
<li>
<a href="#">超链接1</a>
</li>
<li>
<a href="#">超链接2</a>
</li>
</ul>
<ul>
<li>
<a href="#">超链接3</a>
</li>
<li>
<a href="#">超链接4</a>
</li>
<li>
<a href="#">超链接5</a>
</li>
</ul>
<a href="#">超链接6</a>
<a href="#">超链接7</a>
<a href="#">超链接8</a>
</body>
5.属性选择器
<style type="text/css">
/*
包含标题（title）的所有元素变为红色
*[title] {color:red;}
只对有 href 属性的锚（a 元素）应用样式
a[href] {color:red;}
只对同时有 href 和title属性的锚（a 元素）应用样式
a[href][title] {color:red;}
只对type='text'、name='username1'的input生效
input[type='text'][name='username1']{color: red;}
*/
</style>
6.锚伪类
<head>
<style type="text/css">
/*锚伪类：记录各个状态*/
a:link {color:#FFB6C1} /* 未访问的链接 */
a:visited {color:#000000;}/* 已访问的链接 */
a:hover {color:#00FFFF}/* 鼠标移动到链接上 */
a:active {color:#B22222}/* 选定的链接 */
</style>
</head>
<body>
<a href="http网址">网址</a>
</body>
三、样式的优先级（外部css文件的引入）
<head>
<meta charset="UTF-8">
<title></title>
<!-- 样式的优先级别：行内样式表 >（内部样式和外部样式看加载顺序） -->
<!--内部样式表-->
<style type="text/css">
p{color: red;}
</style>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>
</head>
<body>
<!--行内样式表-->
<p style="color: blue;">段落标签</p>
</body>
四、常用样式
1.字体属性
属性名称
font-family(字体)
font-size（大小）
font-style（风格）
---- normal标准样式
---- italic斜体
---- oblique倾斜
---- inherit从父类继承的字体样式
font-weight(字体加粗)
----normal标准样式
----bold粗体
----bolder更粗
----lighter更细
2.文本属性
属性名称
letter-spacing(字母间隔)
text-decoration（划线修饰）
text-align（文本对齐方式）
text-indent(文本缩进)
line-height（行高）
3.背景
属性名称
background-color
background-image
background-repeat
4.边框
属性名称
border-bottom
solid(实线)
dashed(虚线)
double(双实线)
5.圆角、阴影
<style type="text/css">
#btn{
width: 100px;
height: 50px;
color: white;
font-weight: bolder;
background-color: orange;
border-radius: 10px;/*圆角属性*/
box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}
</style>
五、盒子模型
1.div边距、居中
能用外边距就用外边距
<head><style type="text/css">
div{
border: 1px red solid;
width: 200px;
height: 200px;
margin: 0 auto;/*居中*/
/*设置外边距*/
/*margin-top: 50px;上外边距
margin-left: 50px;左外边距
margin-right: 50px;右外边距
margin-bottom: 50px;下外边距
margin: 50px;上下左右外边距*/
/*设置内边距*/
/*padding-top: 50px;上内边距
padding-left: 50px;左内边距
padding-right: 50px;右内边距
padding-bottom: 50px;下内边距
padding: 50px;上下左右内边距*/
}
</style></head>
2.相对定位
<head><style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 80px;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
}
#box02{
width: 100px;
height: 100px;
border: green 1px solid;
position: relative;/*相对定位：保留原有位置，针对于原有位置进行移位*/
top: 10px;
left: 10px;
}
#box03{
width: 100px;
height: 100px;
border: blue 1px solid;
}
</style></head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
3.绝对定位
<head><style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 80px;
position: relative;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
}
#box02{
width: 100px;
height: 100px;
border: green 1px solid;
position: absolute;/*绝对定位：不保留原有位置，向上找父级标签，查看是否有position的属性，如果没有再向上找，直到找到body标签*/
top: 10px;
left: 10px;
}
#box03{
width: 100px;
height: 100px;
border: blue 1px solid;
}
</style></head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
4.固定定位
<head><style type="text/css">
div{
position: fixed;/*固定定位*/
top: 70%;
left: 90%;
}
</style></head>
<body>
<div>
<a href="#new01">置顶</a>
</div>
<a name="new01"></a><!--锚点-->
<h1>法制新闻</h1>
<h1>国际新闻</h1>
<h1>娱乐新闻</h1>
<!--多写点h1标签方便观察-->
</body>
5.浮动
浮动虽然可以帮我们将原本竖着排的div横着排，但也会造成脱离父级标签的束缚，使得父级标签无法撑开，所以一定要加.clear{clear: both;}清除浮动
<head><style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 80px;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
/*控制是靠左还是靠右*/
float: left;
}
#box02{
width: 100px;
height: 100px;
border: green 1px solid;
float: left;
}
/*清除浮动*/
.clear{
clear: both;
}
</style></head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div class="clear"></div>
</div>
</body>
Javascript部分
一、Javascript基础
1.什么是Javascript
Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。
特点：交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）
安全性（不可以直接访问本地硬盘）
跨平台性（由浏览器解析执行，和平台无关）
2.引入外部js文件
一个html里边可以在 head 和 body标签里放多个 script 标签
<script type="text/javascript" src="out.js"></script>
<!--src是文件相对路径，不是文件名 -->
<!--内部写js代码 -->
<script type="text/javascript">
alert("HelloWorld...3");//弹框
console.log("HelloWorld...333");//在控制台中打印数据
</script>
3.基本数据类型
五大基本数据类型：number、string、boolean、undefined(未定义类型)、null
<script type="text/javascript">
/*var - 变量*/
var v = 123;
v = 123.01;
console.log(v);
v = "abc";
v = true;
var v4;
console.log(v4);
v4 = undefined;
console.log(v4);
var v5 = null;
console.log(v5);
</script>
4.基本数据类型的特点
<script type="text/javascript">
//JS的基本数据类型：number、string、boolean、undefined(未定义类型)、null
//number的特殊点：(Infinity 表示无穷大)
console.log(Infinity + (-Infinity));//NaN:Not a Number
//string的特殊点：
var v1 = "12";
var v2 = "3";
console.log(v1 + v2);//做拼接
console.log(parseInt(v1) + parseInt(v2));
//parseFloat(v1)
console.log(v1 - v2);//9
console.log(v1 * v2);//36
console.log(v1 / v2);//4
console.log(v1 % v2);//0
//boolean的特殊点：0、""、undefined、null、NaN都表示false
if(null){
console.log("true");
}else{
console.log("false");
}
//undefined vs null
var v1;
console.log(typeof v1);//undefined
var v2 = null;
console.log(typeof v2);//object(空对象)
// == vs ===
var v1 = 123;
var v2 = "123";
console.log(v1 == v2);//true：只判断值
console.log(v1 === v2);//false：既判断值，也判断类型
//NaN == NaN 吗？答案是false
console.log(NaN == NaN);
</script>
5.数组、流程控制语句
在Javascript中，可以直接用java的流程语句，虽然这两个语言并没有一毛钱关系。
<script type="text/javascript">
var a = [[1,2,3],[4,5,6]];
//在网页打印三角形
for(var i = 0;i<5;i++){
for(var j = 0;j<=i;j++){
document.write("*");
}
document.write("<br/>");
}
</script>
6.函数
系统提供的预定义函数：
parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN
parseFloat()：同上类似
isNaN(xxx)：判断是否为非数字
isFinite(xxxx)：判断输入的是否是一个既非Infinity也非NaN的数字
eval()：会将其输入的字符串当作javascript代码来执行
自定义函数：
<script type="text/javascript">
//无返回值无参数的方法
function fun01(){
alert("aaa");
}
fun01();
//有参数的方法（参数不用写var）
function fun02(a,b){
alert(a+b);
}
fun02("10","20");
//有返回值的方法
function fun03(a,b){
return a+b;
}
var v = fun03("10","20");
alert(v);
</script>
二、DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
拿到document就可以对html网页为所欲为，DOM是非常强大的一个功能。
HTML DOM 树：
1.操作元素
-
查找元素
<body> <p id="p_id01" class="p_class">段落标签1</p> <p id="p_id02" class="p_class">段落标签2</p> <input type="text" name="text"/> <br /> <input type="text" name="text"/> <script type="text/javascript"> //通过id查找的元素 - 获取的是对象 //var pId01 = document.getElementById("p_id01"); //pId01.onclick = function(){ // this.innerText = "奋斗到感动自己，拼搏到无能为力"; //} //通过class查找的元素 - 获取的是数组 //var p1 = document.getElementsByClassName("p_class")[0]; //p1.onclick = function(){ // this.innerText = "奋斗到感动自己，拼搏到无能为力"; //} //通过标签查找的元素 - 获取的是数组 //var p1 =document.getElementsByTagName("p")[0]; //p1.onclick = function(){ // this.innerText = "奋斗到感动自己，拼搏到无能为力"; //} //通过name查找的元素 - 获取的是数组 var text01 = document.getElementsByName("text")[0]; text01.onclick = function(){ this.style.color = "red"; } //如果觉得上面这么写麻烦，是可以像下面一样写的 //document.getElementsByName("text")[0].onclick = function(){ 代码块 } </script> </body> -
操作内容
<body> <p>段落标签</p> <script type="text/javascript"> document.getElementsByTagName("p")[0].onclick = function(){ //获取内容 //var text = this.innerText; //alert(text);//天生吾族 var text = this.innerHTML; alert(text);//<h1>天生吾族</h1> //设置内容 //this.innerText = "<h1>天生吾族</h1>"; this.innerHTML = "<h1>天生吾族</h1>";//认为内容是html代码 } </script></body> -
操作属性
<body> <img src="img/天生吾族.jpg" width="10%" height="10%"/> <script type="text/javascript"> var img = document.getElementsByTagName("img")[0]; img.onclick = function(){ //获取属性1 //console.log(this.width);//13 //console.log(this.height);//18 //获取属性2 //console.log(this.getAttribute("width"));//10% //console.log(this.getAttribute("height"));//10% //设置属性1 //this.width = "200";//像素 //this.height = "200"; //设置属性2 this.setAttribute("width","20%"); this.setAttribute("height","20%"); } </script></body> -
操作样式
<body> <input type="button" value="显示图片" onclick="fun01()" /> <input type="button" value="隐藏图片" onclick="fun02()" /> <br /> <img src="img/天生吾族.jpg" width="10%" height="10%"/> <script type="text/javascript"> var img = document.getElementsByTagName("img")[0]; function fun01(){ //获取样式 console.log(img.style.backgroundColor) //设置样式 //visibility资源是否可见，visible可见，hidden不可见 img.style.visibility = "visible"; } function fun02(){ img.style.visibility = "hidden"; } </script></body>
2.DOM事件
-
单击事件
<body> <h1 onclick="this.innerText='岂可轻弃'">天生吾族</h1> <h1 onclick="fun01(this)">天生吾族</h1> <input type="button" value="使第3个h1标签改变内容" onclick="fun02()"/> <h1>天生吾族</h1> <input type="button" value="使第4个h1标签改变内容"/> <h1>天生吾族</h1> <script type="text/javascript"> function fun01(obj){ obj.innerText = "岂可轻弃"; } function fun02(){ document.getElementsByTagName("h1")[2].innerText = "岂可轻弃"; } document.getElementsByTagName("input")[1].onclick = function(){ document.getElementsByTagName("h1")[3].innerText = "岂可轻弃"; } </script> </body> -
页面加载事件
<body> <input type="button" value="使h1标签改变内容" /> <h1>天生吾族</h1> <script type="text/javascript"> //onload事件：叫做页面加载事件，等页面的标签和图片资源加载完毕后才调用的事件 window.onload = function(){ document.getElementsByTagName("input")[0].onclick = function(){ var h1 = document.getElementsByTagName("h1")[0]; h1.innerText = "岂可轻弃" } } </script></body> -
键盘事件
<body> <input type="text" onkeydown="down01()" onkeypress="press01()" onkeyup="up01()" /> <script type="text/javascript"> function down01(){ console.log("键盘按下事件"); } function press01(){ console.log("键盘持续事件"); } function up01(){ console.log("键盘松开事件"); } </script></body> -
鼠标事件
<body> <img src="img/天生吾族.jpg" width="40%" onmousedown="down01()" onmouseup="up01()" onmousemove="move01()" onmouseover="over01()" onmouseout="out01()" /> <script type="text/javascript"> function down01(){ console.log("鼠标按下事件"); } function up01(){ console.log("鼠标松开事件"); } function move01(){ console.log("鼠标移动事件"); } function over01(){ console.log("鼠标移进事件"); } function out01(){ console.log("鼠标移出事件"); } </script></body>案列:
<body> <img src="../img/tx1.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)"/> <img src="../img/tx2.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)"/> <img src="../img/tx3.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)"/> <script type="text/javascript"> function over01(obj){ obj.style.opacity = 1;//设置透明度：1完全不透明 0完全太透明 } function out01(obj){ obj.style.opacity = 0.4; } </script></body> -
焦点事件
<body> 账号：<input type="text" value="请输入账号" onfocus="focus01()" onblur="blur01()"/> <script type="text/javascript"> function focus01(){ console.log("获取焦点事件"); } function blur01(){ console.log("失去焦点事件"); } </script></body> -
操作节点
<body> <input type="button" value="新增段落标签" onclick="addP()"/> <input type="button" value="新增图片标签" onclick="addImg()"/> <input type="button" value="克隆图片标签" onclick="cloneImg()"/> <input type="button" value="删除图片标签" onclick="deleteImg()"/> <div id="manager"> <p>段落标签</p> </div> <script type="text/javascript"> var manager = document.getElementById("manager"); function addP(){ //创建节点 var p = document.createElement("p");//<p></p> //创建内容 var text = document.createTextNode("新增段落标签");//新增段落标签 //将内容添加到p标签中 p.appendChild(text);//<p>新增段落标签</p> //将p标签添加到div标签中 manager.appendChild(p); } function addImg(){ //创建节点 var img = document.createElement("img"); //设置属性 img.setAttribute("width","100px"); img.setAttribute("height","100px"); img.setAttribute("src","../img/tx2.jpg"); //将img标签添加到div标签中 manager.appendChild(img); //创建节点 var br = document.createElement("br"); //将br标签添加到div标签中 manager.appendChild(br); } function cloneImg(){ //获取img标签 var img = document.getElementsByTagName("img")[0]; //克隆标签 var newImg = img.cloneNode(true);//true-深入克隆 //将newImg标签添加到div标签中 manager.appendChild(newImg); //获取br标签 var br = document.getElementsByTagName("br")[0]; //克隆标签 var newBr = br.cloneNode(true);//true-深入克隆 //将newBr标签添加到div标签中 manager.appendChild(newBr); } function deleteImg(){ var img = document.getElementsByTagName("img")[0]; var br = document.getElementsByTagName("br")[0]; manager.removeChild(img); manager.removeChild(br); } </script> </body>
三、BOM
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Browser Object Model
1.window的属性和函数（含重点）
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
HTML DOM 的 document 也是 window 对象的属性之一
-
window.location（重点重点重点）
前端能向服务器发送请求的有：超链接、表单、location
实现当前页面的跳转
window.location.href = “http网址”;
window.location = “http网址”;
重新加载页面
location.reload(); -
window.history
history.back() 上一页
history.forward() 下一页
history.go(-1) 上一页
histroy.go(1) 下一页
histroy.go(0) 刷新
histroy.go(number) 随number改变上下几页，一般也就一页
-
window.open
弹出页面（流氓广告）
window.open(“http网址”);有些浏览器是可以屏蔽open函数的（可以自己设置），为的就是防止一直恶意弹出页面，搞蹦服务器。
2.弹框
<script type="text/javascript">
function fun01(){
alert("警告框");
//确认-true 取消-false
var bool = confirm("确认框");
console.log(bool);
//返回输入内容
var v = prompt("提示框","默认值");
console.log(v);
}
</script>
3.定时器(重点)
语法：
var t=setTimeout(“javascript语句”,毫秒) —一次定时
clearTimeout(setTimeout_variable) —取消定时
setInterval(code,millisec) —循环定时，code是执行的代码，millisec是间隔的时间。循环定时是不会停止的，直到你调用了clearTimeout
<script type="text/javascript">
var img = document.getElementsByTagName("img")[0];
//定时器 setTimeout ：过3000毫秒就触发函数
var timeout = setTimeout(function(){
img.src = "../../img/不可描述.jpg";
},3000);
//定时器：每过1000毫秒就触发函数
var timeout1 = setInterval(function(){
console.log("xxx");
},1000);
//取消定时 clearTimeout
function fun01(){
clearTimeout(timeout1);
}
</script>
案例：时钟（当前时间显示）
<body>
<h1></h1>
<script type="text/javascript">
var h1 = document.getElementsByTagName("h1")[0];
function setTime(){
//创建日期对象
var date = new Date();
//获取日期信息
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds()
var time = hour + ":" + minute + ":" + second;
//设置
h1.innerText = time;
}
setTime();
setInterval(function(){
setTime();
},1000);
</script></body>
4.Cookie（重点）
有可能和后面服务器的Session搞混，所以一定要注意
cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。
cookie是存于用户硬盘的一个文件，这个文件通常对应一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨域名使用。
cookie是存在浏览器里边的，不能跨浏览器使用。
Cookie可以做什么？
1，保存用户的登录状态
2，定制页面，如换肤，选择所在地区等等
3，购物车的实现（苏宁易购）（淘宝以前也是，现在在数据库了）
4，记录用户的浏览历史记录
Cookie的缺点：
1，cookie可能被禁用
2，cookie是与游览器相关的，即使访问同一个页面，不同的浏览器保存的cookie也是不能互相访问的
3，cookie可能被删除，因为cookie实际就是硬盘上的一个文件
4，cookie的安全性不够高，所有的cookie都是以纯文本的形式记录于文件中。
Cookie的增删查改：
<body>
<input type="button" value="添加Cookie" onclick="fun01()" />
<input type="button" value="删除Cookie" onclick="fun02()" />
<input type="button" value="修改Cookie" onclick="fun03()" />
<input type="button" value="查询Cookie" onclick="fun04()" />
<script type="text/javascript">
function fun01(){
updateCookie("username","hh",1000*60*60*24*30);
updateCookie("password","123123",1000*60*60*24*30);
}
function fun02(){
updateCookie("username","",-1);
updateCookie("password","",-1);
}
function fun03(){
updateCookie("username","wx",1000*60*60*24*30);
updateCookie("password","666888",1000*60*60*24*30);
}
function fun04(){
//alert(document.cookie);
var username = queryCookie("username");
var password = queryCookie("password");
alert(username + " -- " + password);
}
function queryCookie(key){
var cs = document.cookie.split(";");
for(var i =0;i<cs.length;i++){
var k = cs[i].trim().split("=")[0];
var v = cs[i].trim().split("=")[1];
if(k == key){
return v;
}
}
}
function updateCookie(key,value,time){
var date=new Date();
date.setTime(date.getTime() + time);
document.cookie = key + "=" + value + "; expires=" + date.toGMTString();
}
</script></body>
5.JS对象
JavaScript中的所有事物都是对象：字符串、数值、数组、函数…
此外，JavaScript 允许自定义对象。
但是在JavaScript 没有类的概念
<body>
<script type="text/javascript">
//自定义对象
//创建对象
var stu = new Object();
//设置属性
stu.name = "柯南";
stu.age = 18;
//设置函数
stu.printInfo = function(){
alert(this.name + " -- " + this.age);
}
stu.printInfo();
</script></body>
<body>
<script type="text/javascript">
//自定义对象 - json格式
//创建对象
var stu = {
name:"柯南",
age:18,
printInfo:function(){
alert(this.name + " -- " + this.age);
}
};
stu.printInfo();
</script></body>
<body>
<script type="text/javascript">
//自定义对象 - 使用构造器函数
//构造器
function Student(name,age){
this.name = name;
this.age = age;
}
//创建对象
var stu = new Student("柯南",18);
//for_in遍历对象中所有的属性和方法
for(var v in stu){
console.log(v);
}
//原型：在之前的基础上添加内容
Student.prototype.printInfo = function(){
alert(stu.name + " --- " + stu.age);
}
stu.printInfo();
</script></body>
JavaScript 基于 prototype（原型），而不是基于类的。
注：汇总资料来源于hhy老师，汇总编写：cat_lkh
8297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
