unit01-HTML、CSS

HTML: 用于开发网页的一门技术

CSS: 用于修饰、渲染网页的一门技术

HTML+CSS可以开发一个非常美观、非常漂亮的网页

开发网页盖房子

HTML标签搭建网页的结构砖块(搭建房子的结构)

CSS属性石灰、油漆等涂料

HTML概述

HTML是什么

HTML(Hyper Text Markup Language): 超文本标记语言

超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图片、音频、视频等各种格式）

标记：也叫标签、元素、节点等，就是用尖括号(<>)括起来的一组内容，例如：

<head> <body> <div> <span> <table>等

HTML是最基础的开发网页的语言。

HTML由W3C组织提供(CSS/xml)

关于HTML的细节:

(1)使用HTML开发的网页文件通常以 .htm或 .html 为后缀!

(2)使用HTML开发的网页文件由浏览器负责解析并显示（浏览器就是一个html解析器）

(3)HTML是文档的一种(txt/word/ppt/pdf等)

总结: HTML就是用于开发网页的一门语言!!

HTML的结构

1、案例：编写我的第一个HTML网页，并用浏览器打开

新建一个txt文档，将后缀名改为.html，代码实现如下：

<!DOCTYPE html>
<html><head><title>网页的标题</title></head><body><h1>Hello CGB2003...</h1></body>
</html>

2、HTML结构详解

(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本上面是html5.0的声明, 也是目前最常用的版本
(2)<html></html> 根标签, 用于包裹所有的网页内容(除了文档声明)
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放网页可视化的网页内容. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8" > 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

HTML语法(了解)

1、html标签

标签：也叫做标记、元素等，标签分为开始标签，例如：

<head>、<body>

和结束标签，例如:

</head>、</body>

开始标签和结束标签之间还可以包含其他内容。

<head><titile>声明网页的标题</title><meta charset="utf-8">
</head>

有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：

<br/> <hr/> <input/> <img/> <link/>等

2、html属性

在标签上可以声明属性(属性不能独立存在,必须声明在标签上)

<div id="d1" class="c1" style="color:red;">这是一个div元素</div>

标签上可以声明多个属性，多个属性之间用空格分隔

标签上的属性的值可以使用单引号或者双引号引起来

<meta charset="UTF-8" id="m1">
<meta charset='UTF-8' id='m1'>

3、html注释

格式: 

注释的作用: (1)为代码添加解释说明

(2)将一些暂时不需要执行的代码注释

浏览器对于html注释中的内容不会解析，也不会显示！

4、html空格和换行

在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：

如何在网页中做一个换行：可以使用 <br/> 标签做换行

如何在网页中做一个空格：可以使用 或&emsp;做空格

补充: HTML中是不区分大小写的！

HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。

HTML标签

图像标签

通过img标签可以在网页中插入一副图像

<!-- 不推荐写带盘符的绝对路径,因为将来项目发布,位置会改变,到时还要修改图片的路径
<img src="D:/JavaDevelop/WS_CGB2003_WEB/day05-htmlcss/WebContent/imgs/meinv.jpg"/>-->
<!-- ./: 表示当前目录(当前文件所在的目录),由于当前html在WebContent目录下因此 ./叫表示WebContent目录, 另外 ./ 可以省略!../: 表示当前目录的上一级目录里(也就是当前目录的父目录)../../: 表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目录)-->
<img src="./imgs/meinv.jpg" width="50%"/>
<img src="./imgs/lpx.jpg"  width="50%"/>

其中src属性用于指定图片的路径（图片的路径不要是带盘符的绝对路径，推荐使用相对路径）

width属性用于指定图片的宽度

height属性用于指定图片的高度

超链接标签

超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接

点击超链接可以跳转到另外一个网页(图片/下载路径等)，示例:

<!-- 跳转到本地的一个网页 -->
<a href="01-第一个网页.html">01-第一个网页.html</a>
<!-- 跳转到百度首页 -->
<a href="http://www.baidu.com">百度一下，你就不知道</a>
<br/>
<!-- 点击图片跳转到tmooc -->
<a target="_blank" href="http://www.tmooc.cn"><img alt="tmooc" src="imgs/tmooc.png" />
</a>

其中 href 属性用于指定点击超链接后将要跳转到的URL地址

target属性用于指定以何种方式打开超链接

_self：默认值, 表示在当前窗口中打开超链接

_blank：表示在新的窗口中打开超链接

表格标签

1.案例：在网页中插入一个3*3的表格

<h1>案例：在网页中插入一个3*3的表格</h1>
<table><!-- 用于在网页中定义一个表格 --><tr><!-- 用于定义一个表格行 --><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>11</td><!-- 用于定义一个单元格 --><td>12</td><td>13</td></tr><tr><td>21</td><td>22</td><td>23</td></tr><tr><td>31</td><td>32</td><td>33</td></tr>
</table>

在浏览器中显示效果如下：

在head标签内添加如下内容：

<style>/* style标签内只能书写css注释和css代码 */table{border:*2px solid red; /* 为表格添加边框 */border-collapse: collapse; /* 设置边框合并 */background-color: pink; /* 为表格设置背景颜色 */width: 70%; /* 为表格设置宽度 *//* margin-left: 15%; *//* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */margin-left: auto;margin-right: auto;}td,th{border:2px solid red; /* 为单元格添加边框 */border-collapse: *collapse*; /* 设置边框合并 */padding: 5px; /* 设置单元格边框和内容的距离(内边距) */}h1{/* border: 2px solid blue; */text-align: *center*; /* 设置元素中的内容水平居中 */}
</style>

再次刷新浏览器显示效果为：

2、表格标签介绍

table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）

3、练习：使用表格标签在网页中生成一个表格，如下图：

要求如下:

(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题

表单标签

1、表单的作用: 用于向服务器提交数据

向服务器提交数据的两种方式：

(1)通过表单向服务器提交数据

表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码等），填写完成后通过提交表单，可以将表单中的数据提交给相应的服务器。

(2)通过超链接向服务器提交数据

http://www.baidu.com?username=张三&pwd=123&like=篮球<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不知道!</a>

在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。

2、表单标签

<form action="url地址" method="提交方式"></form>

其中action属性用于**指定表单的提交地址，**例如，将action指向百度服务器，就意味着将来填写完表单后，提交表单将会把表单中的数据提交给百度服务器。

method=“GET/POST” 属性是用于指定表单的提交方式，常用的就是GET和POST提交。

表单项标签

1、input元素：

(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)

<input type="text" name="username"/>

(2)密码输入框(比如:密码/确认密码等)

<input type="password" name="pwd"/>

(3)单选框(比如:性别/部门等)

<input type="radio" name="gender"/>男

(4)复选框/多选框(比如:爱好/岗位等)

<input type="checkbox" name="like"/>

(5)普通按钮(比如:换一张图片)

<input type="button" value="换一张"/>

普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为

(6)提交按钮(比如:提交/注册/登录)

<input type="submit" value="提交/注册/登录"/>

提交按钮用于提交表单中的数据到服务器中!

2、select、option标签：

<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option selected="selected">广州</option><option>深圳</option>
</select>

select用于定义一个下拉选框

option用于定义下拉选框上的选项

selected设置当前option选项默认被选中

3、textarea多行文本输入区域：

<textarea name="description" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea>

cols属性: 用于设置文本输入框的列数(宽度)

rows属性: 用于设置文本输入框的行数(高度)

placeholder属性: 设置输入框中的提示消息!

表单细节问题

1、提交表单时，表单中的数据为什么没有被提交？

对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略。例如：

<input type="text" name="username"/>
<input type="password" name="psw"/>

2、如何让多个单选框只能有一个被选中？

要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！

<td>性别:</td>
<td><input type="radio" name="gender"/>男<input type="radio" name="gender"/>女
</td>

3、为什么单选框、复选框选择某一项后提交的值都是on?

因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

4、如何设置单选框或复选框默认选中某一项?

可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：

<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

5、如何设置下拉选框默认选中某一项?

在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：

<select name="city"><option>北京</option><option>上海</option><option selected="selected">广州</option><option>深圳</option>
</select>

6、下拉选框中option选项上的value属性的作用是什么？

<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option selected="selected">广州</option><option>深圳</option>
</select>

如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。

如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容

注册表单案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* style标签内只能书写css注释和css代码 */
table {border: 2px solid red; /* 为表格添加边框 */border-collapse: collapse; /* 设置边框合并 */background-color: lightgrey; /* 为表格设置背景颜色 *//* margin-left: 15%; *//* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */margin-left: auto;margin-right: auto;
}td, th {border: 2px solid red; /* 为单元格添加边框 */border-collapse: collapse; /* 设置边框合并 */padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}h1 {/* border: 2px solid blue; */text-align: center; /* 设置元素中的内容水平居中 */
}
</style>
</head>
<body><h1>欢迎注册</h1><form action="#"><table><tr><!-- 用户名输入框 --><td>用户名:</td><td><input type="text" name="username" /></td></tr><tr><!-- 密码输入框 --><td>密码:</td><td><input type="password" name="pwd" /></td></tr><tr><!-- 性别单选框 --><td>性别:</td><td><input type="radio" checked="checked" name="gender"value="male" />男 <input type="radio" name="gender" value="female" />女</td></tr><tr><!-- 爱好复选框/多选框 --><td>爱好:</td><td><input type="checkbox" name="like" value="basketball" />篮球<input type="checkbox" checked="checked" name="like"value="football" />足球 <input type="checkbox" name="like"value="volleyball" />排球</td></tr><tr><!-- 城市下拉选框 --><td>城市:</td><td><select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option selected="selected">广州</option><option>深圳</option></select></td></tr><tr><!-- 自我描述 多行文本输入框 --><td>自我描述:</td><td><textarea name="description" cols="30" rows="5"placeholder="请输入描述信息..."></textarea></td></tr><tr><!-- 提交按钮 --><!-- colspan: 设置单元格横跨的列数 --><td colspan="2" style="text-align: center;"><inputtype="submit" value="提交" /></td></tr></table></form>
</body>
</html>

CSS概述

什么是CSS？(了解)

CSS: 层叠样式表，用于修饰、渲染网页的一门技术

使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！

在HTML中引入CSS

方式1：通过style属性引入css（不推荐）

<!-- 1.通过标签上的style属性给div设置样式 边框:2px solid red 字体大小:26px背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>

由于上面这种方式是将css样式代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。

将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！

并且使用这种方式无法将html标签和css样式进行分离!

因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做行内样式/内联样式）

方式2：通过style标签引入css

在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式

这种方式是将所有的css样式代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！

初步的实现了将html标签代码和css样式代码进行了分离!

代码示例：

<!-- 2.通过style标签给span设置样式如下： 边框: 2px solid green字体大小: 30px字体加粗
-->
<head>
<meta charset="utf-8">
<style type="text/css">/* ****** CSS样式 ****** */span{ /* 为当前html中的所有span标签设置样式 */border:2px solid green;font-size:30px;font-weight:bolder; /* bold/bolder */}
</style>
</head>

方式3：通过link链接引入外部的css文件

在head标签内部，通过一个link标签可以引入外部的CSS文件

这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。

代码示例：html中引入demo.css文件

<!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下： 边框: 2px solid blue;字体颜色:red字体设置为华文琥珀设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet"  href="demo.css"  />

demo.css文件

@charset "UTF-8";
p{border: 2px solid blue;color: red;font-family: "华文琥珀";text-indent: 50px;
}

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签

格式: 元素名/标签名{ css样式… }

/* ----- 1.标签名选择器练习 -----
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */background-color:#efbdef; font-size: 22px;font-weight: bolder;
}

class选择器

可以为元素添加一个通用的属性 – class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。

格式：.class值{ css样式… }

实例:

/* ----- 2.类选择器练习 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */background: #faf77b;border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */background: #5eff1e;color: #ec0e7e;
}

另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：

<span class="s1 s2" >span111</span>

表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。

如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！

内容补充：选择器优先级顺序：

（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。

（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)

id选择器

通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。

格式：#id值{ css样式 }

/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */font-size:24px;color: #a06649;text-indent: 20px;
}

<p id="p1">这是一个p元素!!!</p>

后代选择器

选中指定元素内部的指定后代元素

格式: 祖先后代{ css样式… }

/* ----- 4.后代选择器练习 -----
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */font-size:18px;color: red;background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */

<p id="p1">这是一个p元素!!!<span>这是一个span元素!!!</span>
</p>

属性选择器

在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素

格式：选择器[属性条件]…{ css样式 }

/* ----- 5.属性选择器 -----
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */background: #FF7CCC;font-size: 22px;text-indent: 15px;
}
input[type='text'][name='email']{ /* 选中所有的input并且type值为text、并且name为email的元素 */background : yellow;
}

常用属性总结

文本属性

1、text-align：设置元素内的文本水平对齐方式，其常用取值为:

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2、text-decoration：设置文本的下划线样式，其常用取值为:

underline: 有下划线
none: 没有下划线

3、text-indent：设置文本首行缩进，单位: 像素/百分比

4、letter-spacing：设置字符间隔/间距，其常用取值为:

normal
像素值

5、text-shadow：设置字体阴影，其取值为:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

字体属性

font-size：设置字体大小

font-weight：设置字体粗细 normal、bold、bolder 100/200/300…/900

font-family：设置字体，比如微软雅黑、黑体、楷体等

color：设置字体颜色

背景属性

background-color：设置背景颜色

background-image：设置背景图片，url(‘图片的路径’);

background-repeat：设置或检索对象的背景图片是否及如何排列，常用取值：

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position：设置或检索对象的背景图片位置

background: 背景颜色背景图片背景图片是否重复背景图片的位置

边框（border）

border:2px solid red; – 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

border属性可以拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

其他属性

width：设置元素的宽度

height：设置元素的高

margin: 设置元素的外边距

margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;

补充: 颜色设置

颜色取值方式常见的方式有三种:

方式一：设置颜色名，例如：

red、green、blue、yellow、cyan、pink、white、black等

方式二：设置#加上六位的十六进制数值

#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等

方式三：设置rgb颜色值

rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan）

网页开发实战

完成JT项目中的登录页面!

完成JT项目中的注册页面!(选作!)

注册页面视频：https://www.bilibili.com/video/BV16K4y1x7wX

扩展内容

display属性

display用来设置元素的类型，常用取值：

block：块级元素的默认值默认情况下独占一行可以设置宽高
inline：行内元素的默认值默认情况下多个行内元素可以处在同一行一般不能设置宽高
inline-block：行内块元素多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

元素类型(了解)

div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）

p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）

div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。

span：行内元素，默认可以和其他元素显示在同一行。

(1)块级元素（block）

默认情况下，块级元素独占一行

可以设置宽和高，如果设置了就是设置的宽和高

如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)

比如: div/p/h1~h6/form/table 等元素都是块级元素

(2)行内元素（inline）

默认情况下，多个行内元素可以处在同一行

不能设置宽和高

比如: span/input/img/i/b 等元素都是行内元素

(3)行内块元素（inline-block）

既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)

htmlcss作业

06-05作业：

1、使用html+css实现一个4*4的表格, 并设置边框、背景等样式

2、完成课上讲的注册表单页面(能提交数据)

3、练习CSS的三种引入方式、练习CSS选择器

4、完成课上讲的京淘登录页面

unit02-JavaScript

JavaScript简介

什么是JavaScript(了解)

全称叫做JavaScript，简称叫做JS

由NetScape(网景)公司提供，是一门专门嵌入在浏览器中执行的脚本语言

LiveScript JavaScript

JS运行在浏览器中，负责实现网页中的动画效果

或者是实现表单校验等功能

JS特点和优势(了解)

1、特点：

(1)JS是一门直译式的语言(边解释边执行，没有编译的过程)

java–> 编写时 xx.java —>编译成 xx.class --> 运行class文件

js —> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程

(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)

JS中是有对象的(内置对象、自定义对象)

(3)JS是一门弱类型的语言(Java:强类型)

在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String str = "abc";
int number = 100;
在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100;
s = "abc";
s = true;
s = [];
s = function(){}

2、优势：

(1)JS具有良好的交互性

(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)

(3)JS具有跨平台性(JS 浏览器)

( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台

Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )

在HTML书写JS的方式

1、在script标签内部可以书写JS代码：

在head或者body标签内部可以添加一个script标签，在script标签内部可以直接书写JS代码！

<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type="text/javascript">//JS的单行注释/* JS的多行注释 */alert( "在html中引入JS的第一种方式..." );
</script>

2、通过script标签引入外部的JS文件

在head或body标签内部，可以通过script标签引入外部的JS文件。例如：

<!-- 通过script标签可以引入外部的JS文件 -->
<script src="demo.js"></script>

注意：(1)在引入js文件的script标签内部不要书写JS代码,例如:

<script src="demo.js">alert( 111 ); //这里的代码不会执行
</script>

(2)不要将引入JS文件的script标签自闭，因为可能会导致文件引入失败，如下：

<script src="demo.js" />

扩展内容：也可以直接在元素上书写JS代码

<!-- 直接在元素上书写JS代码：
onclick属性用于给当前元素绑定点击事件：点击元素就会触发事件，执行相应函数
-->
<input type="button" value="点我~" onclick="alert('叫你点你还真敢点啊!!!')"/>
<input type="button" value="别点我"  onclick="console.log( new Date() )"/>

JavaScript语法

注释格式

JS的注释符号和Java的注释符号相同，如下：

// 单行注释内容
/* 多行注释内容 */

数据类型

1、基本数据类型

(1)数值类型(number)

在JS中，所有的数值在底层都是浮点型，但是在处理和显示的过程中会自动的和整型进行转换。

例如：2.4+3.6=6
特殊值：Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)

(2)字符串类型(string)

在JS中，字符串类型属于基本数据类型，字符串常量可以使用单引号或者使用双引号引起来。例如：

var s1 = "Hello JS";
var s2 = 'Hello JS';

另外，JS中字符串类型有对应的包装对象（String），在需要时会自动的和包装对象进行转换。

var s1 = "Hello JS"; //基本数据类型, string
console.log( typeof s1 ); //string
var s2 = new String("Hello JS"); //复杂数据类型, object
console.log( typeof s2 ); //object
//不管是基本数据类型s1, 还是对象类型s2, 都可以当作对象来用
console.log( s1.valueOf() ); //s1是基本数据类型, 会转成对象, 调用valueOf函数
console.log( s2.valueOf() );

(3)布尔类型(boolean)

布尔类型的值有两个，分别为true和false。

(4)undefined类型

undefined类型的值只有一个，就是undefined，表示变量未定义(但不是指变量没有声明)。

是指声明了变量，但没有为变量赋值，该变量的值就是undefined。

/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常

(5)null类型

null类型的值也只有一个，就是null，表示空值。

可以作为函数的返回值，表示函数返回的是一个空的对象。

注意：null和undefined类型的变量是不能调用函数或属性的，会抛异常！

2、复杂数据类型

主要指对象(JS的内置对象、自定义的对象、函数、数组)

变量声明

JS中是通过var关键字声明变量，声明的变量是不区分类型，可以指向任意的数据。例如：

var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};

另外，JS中多次声明同名的变量不会出现语法错误，例如：

/* 2.变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123; 第二次声明变量x没有生效
alert( s ); //123

JS是严格区分大小写的!

JS运算符

JS和Java中的运算符大致相同，例如：

算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||   ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。

JS语句

JS中的语句和Java中的语句也大致相同

1、if分支结构

if分支结构用于基于不同的条件来执行不同的动作。语法结构如下：

if (条件 1){当条件 1 为 true 时执行的代码
}else if (条件 2){当条件 2 为 true 时执行的代码
}else{当条件 1 和 条件 2 都不为 true 时执行的代码
}

2、switch语句

使用 switch 语句来选择要执行的多个代码块之一。语法结构如下：

switch(n){case 1:执行代码块 1break;case 2:执行代码块 2break;...default:与 case 1 和 case 2 不同时执行的代码
}

执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。

3、for循环语句 – 循环代码块一定的次数

for 循环的语法结构如下：

for (语句 1; 语句 2; 语句 3){被执行的代码块
}

4、while循环 – 在指定条件为真时循环执行代码块

JS中while循环也分为while和do/while循环，下面为while循环语法结构:

while (条件){需要执行的代码
}

while 循环会在指定条件为真时循环执行代码块。

案例1：if分支案例: 接收用户输入的成绩，判断成绩所属的等级

80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误

代码实现如下：

propmt( 参数1, 参数2 )函数：在页面上弹出一个消息输入框，接收的参数1是在弹框中显示的提示内容，用户输入的内容，会作为函数的返回值直接返回。

参数2, 是输入框中的默认值, 可以修改

var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){alert("您的成绩属于: 不及格!");
}else{alert("您的输入有误, 请重新输入!");
}

案例2：switch语句案例—实现一个简易的计算器：

可以接收用户输入的两个数值和一个运算符(+、-、*、/)，根据运算符号的不同，对两个数值执行不同的运算。

代码实现如下：

//1.接收用户输入的数值和运算符, 中间用空格分隔var str = prompt("请输入数值1、运算符、数值2，中间用空格分隔："); //"10 + 5"//2.对用户输入的内容进行切割(以空格作为分隔符切割)var arr = str.split(" "); // ["10", "+", "5"]var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){case "+":alert( "两个数的和为: "+( num1+num2 ) );break;case "-":alert( "两个数的差为: "+( num1-num2 ) );break;case "*":alert( "两个数的乘积为: "+( num1*num2 ) );break;case "/":alert( "两个数的商为: "+( num1/num2 ) );break;default:alert( "您输入的运算符有误, 请重新输入!" );
}

案例3：for循环语句案例

遍历1~100之间的所有整数，求1~100之间所有整数的和，并输出到控制台;

代码实现如下：

//--------------------------------------
var i = 1;
var sum = 0;
while( i <= 100 ){sum += i;i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------

案例4：while循环语句案例

遍历下面数组中的元素，将元素输出到控制台。

var arr = [123, "abc", false, new Object() ];

代码实现如下：

var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){console.log( arr[index] );index++;
}
for( var i=0; i<arr.length; i++ ){console.log( arr[i] );
}

JS数组

Array 对象用于在单个的变量中存储多个值。

JS数组的声明方式一:

//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组，并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];

JS数组的声明方式二:

//声明一个空数组，长度为零
var arr3 = new Array();
//声明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

数组中的细节问题:

(1)JS中的数组可以存储任意类型的数据

(2)JS中的数组长度是可以被任意改变的

var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100

JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function。

JS中声明函数的方式为:

function 函数名称([参数列表]){函数体
}

或者：

var 变量名/函数名 = function([参数列表]){函数体
}

调用函数: 函数名称([参数列表]);

综合练习

(自己完成)声明一个函数fn，在函数中实现：遍历指定的两个数值(例如1和100)之间的整数，将是3的倍数的数值存入到一个数组中，并将数组返回。

1、声明fn函数

//声明一个fn函数,接收两个参数
function fn(x,y){//声明一个数组,用于存储是3的倍数的数值var arr = [];//循环x到y之间的所有整数for(var i=x,j=0;i<y;i++){//判断i(当前正在遍历的整数)是否为3的倍数if(i%3==0){arr[j] = i; //如果是,则将i存入arr数组中j++; //j自增}}return arr; //返回arr数组
}

2、调用fn函数, 获取1~100之间是3的倍数的数值组成的数组

var arr = fn(1,100);

3、遍历数组中的元素, 输出在网页上(提示: document.write(“输出的内容”) )

for(var i=0;i<arr.length;i++){document.write(arr[i]+" ");
}

DOM操作

DOM: Document Object Model，文档对象模型，其实就是JS专门为访问html元素提供的一套API。

案例：电灯开关

点击电灯可以实现开/关灯，代码实现如下：

var flag = "off"; //标记灯的状态, off表示灯是关闭的!
function changeImg(){//获取img元素,返回的是一个JS对象var oImg = document.getElementById("img1");if( flag == "off" ){ //表示灯之前是关闭状态,点击之后则需要打开oImg.src = "imgs/on.gif"; //灯打开了flag = "on"; //更新灯的状态为on,表示灯打开了}else{ //on,表示灯之前是打开状态,点击之后则需要关闭oImg.src = "imgs/off.gif"; //灯关闭了flag = "off"; //更新灯的状态为off,表示灯关闭了}
}

案例：增删改元素

点击网页中的按钮对html元素进行操作

练习1、添加元素:添加一个div元素到body中

function addNode(){//1.创建一个新的div元素(返回的是一个JS对象, 表示新创建的div元素)var newDivObj = document.createElement("div"); // \<div\>\</div\>newDivObj.innerHTML = "我是新来的....";//2.获取body元素(body是父元素)var bodyObj = document.body;//3.通过父元素(body)添加子元素(newDivObj)bodyObj.appendChild( newDivObj );
}

练习2、删除元素: 删除id为div_2的元素

function deleteNode(){//1.获取要删除的元素(id为div_2)var div2 = document.getElementById("div_2");//2.获取id为div_2的元素的父元素var parent = div2.parentNode;//3.通过父元素删除子元素parent.removeChild( div2 );
}

练习3、更新元素内容：将div_3的内容更新为当前时间

function updateNode(){//1.获取id为div_3的元素var div3 = document.getElementById("div_3");//2.获取表示当前时间的字符串var dateStr = new Date().toLocaleString();//3.将div_3元素的内容更新为当前时间div_3.innerHTML = dateStr;
}

案例：网页换肤

/** 练习1：执行下面的函数，切换字体大小 */
function resize( selector ){//获取id为newstext元素var div = document.getElementById("newstext");//将id为newstext元素的class属性值设置为 selectordiv.className = selector;
}/** 练习2：执行下面的函数，为页面切换不同的皮肤点击换肤链接时,执行changeStyle函数，将link标签的href属性值指向不同的css文件的路径，就会使用不同的css文件中的样式 */
//定义数组，存放不同的皮肤（css文件的路径）
var styleArr = ["css/red.css", "css/green.css", "css/blue.css"];
var index = 0;
function changeStyle(){//获取head中的link标签(id=link)var link = document.getElementById("link");//   将link标签的href属性值指向css文件的路径link.href = styleArr[index];index++;if( index == styleArr.length ){ //如果下标等于数组长度index = 0; //则将下标重置为0}
}

总结：JS获取元素

document是一个js对象，用于表示当前html网页。当浏览器加载完整个html网页后，会用document对象表示整个html网页！

document.getElementById( id值 ) – 通过元素的id值，获取一个元素。返回的是表示该元素的js对象。

<div id="div1">xxxx</div>
//获取id为div1的元素
var oDiv1 = document.getElementById("div1");
//oDiv1是一个js对象,表示获取的div元素

document.getElementsByTagName( 元素名 ) – 通过元素名称获取当前文档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。

document.body – 获取当前文档中的body元素

element.parentNode – 获取当前元素的父元素。element表示当前元素

总结：JS增删改元素

document.createElement( 元素名称 ) – 根据元素名称创建指定名称的元素，返回的是表示新创建元素的js对象

parent.appendChild( child ) – 通过父元素添加子元素，其中parent表示父元素，child表示子元素

parent.removeChild( child )– 通过父元素删除子元素，其中parent表示父元素，child表示子元素

element.innerHTML – 获取当前元素的html内容(从开始标签到结束标签之间的所有内容)，还可以设置当前元素的html内容(如果元素内部有内容，将会覆盖原有内容)

<div id="div1">这是一个div元素...<span>这是一个span元素</span>
</div>
//获取div元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;//获取div元素的内容

htmlcss+JS作业

05-09作业：

1、独立完成京淘注册页面（1~2遍）

2、（选作）完成京淘的登录页面

3、完成课上讲过的JS语句案例里

(1) if分支结构案例: 接收用户输入的成绩, 判断成绩所属的等级
(2) switch语句: 实现一个简易计算器
(3) 综合案例

05-11作业：

1、完成课上讲过的DOM操作相关的案例：

（1）电灯开关
（2）增删改元素
（3）网页换皮肤

2、复习文档就绪事件函数（掌握什么时候该使用文档就绪事件函数）

unit03-jQuery

jQuery简介

什么是jQuery(了解)

jQuery: JavaScript Query JS查询

jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架）

jQuery可以极大的简化JS代码

jQuery的核心思想：“写的更少，但做的更多”

轻量的：是指一个技术或框架对代码或程序的侵入程度是比较低的。

或者说代码对该技术依赖程度越低，这个技术越轻。对该技术的依赖程度越高，这个技术越重。

jQuery本质就是一个包含了很多函数的JS文件，如果要在某一个HTML中使用这个JS文件中的函数，就必须得将JS文件引入到HTML中（想使用jQuery，就得引入jQuery的函数库文件，就是一个JS文件）

jQuery的优势(了解)

(1) 可以极大的简化JS代码

(2) 可以像CSS选择器一样获取html元素

css中获取所有的div,给div添加样式:

div{ css属性... }

jQuery中获取所有div,给div添加边框样式:

$("div").css("border", "2px solid red");

JS获取id为div1的元素: document.getElementById("div1")
jQuery获取id为div1的元素: $("#div1")

(3) 可以通过修改css属性控制页面的效果

(4) 可以兼容常用的浏览器

比如: JS中的innerText属性、removeNode()函数、replaceNode( )函数这些函数在某些浏览器中是无法使用的。

jQuery中提供了相应的函数（ text函数、remove函数、replaceWith函数）

常用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等

jQuery引入

jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样。

<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>

在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，如下图：

文档就绪事件函数

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>//1.获取id为demo的h1元素var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )alert( h1.innerHTML );
</script>
</head>
<body><h1 id="demo">jQuery的引入示例...</h1>
</body>

问题描述：上面的代码在执行时，会报一个错误：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opwdfA6Q-1603355022421)(JAVAWEB-NOTE02.assets/image-20200217105525351.png)]

原因描述：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。

解决方式一：

将script标签移到body内部，也就是h1元素的后面

这样浏览器在加载时，会先加载h1元素，再执行获取h1元素的代码，由于在获取h1元素之前，h1元素已经被浏览器加载过了，所以后面再获取就能够获取到！

代码示例：

<body><h1 id="demo">jQuery的引入示例...</h1><script>//1.获取id为demo的h1元素var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )alert( h1.innerHTML );</script>
</body>

解决方式二：

将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的html元素后（也就是加载完最后一个html元素时）立即执行。

由于当前网页中的所有元素都被加载了，h1元素肯定也被加载了，此时再获取h1元素就一定能获取到。

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>$(function(){//1.获取id为demo的h1元素var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )alert( h1.innerHTML );});
</script>
</head>
<body><h1 id="demo">jQuery的引入示例...</h1>
</body>

解决方式三：

将获取元素的代码放在一个自定义的函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才获取h1元素，此时就能够获取到h1元素。

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>function fn1(){//1.获取id为demo的h1元素var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )alert( h1.innerHTML );}
</script>
</head>
<body><h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
</body>

总结：什么时候该使用文档就绪事件函数?

如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。

可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！

jQuery提供的文档就绪事件函数（简写形式）：

<script>$(function(){//在浏览器加载完整个html网页后立即执行});
</script>

其完整写法为：

<script>$(document).ready(function(){//在浏览器加载完整个html网页后立即执行});
</script>

JS也为我们提供了文档就绪事件函数，其写法为：

<script>window.onload = function(){//在浏览器加载完整个html网页后立即执行}
</script>

jQuery选择器(重点)

基本选择器

(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素(3)id选择器
$("#one") -- 选中id为one的元素(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

层级选择器

$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素

基本过滤选择器

(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)

综合案例

创建表格元素

练习1：创建单行单列的表格

function createTable1(){//1.创建一个table元素var $tab = $("<table></table>");//2.创建一个tr元素var $tr = $("<tr></tr>");//3.创建一个td元素, 并为td添加内容var $td = $("<td></td>");$td.html("Hello TD~~");//4.将td添加到tr元素内部$tr.append( $td );//5.将tr添加到table元素内部$tab.append( $tr );//6.将table添加到body元素内部$("body").append( $tab ); //$("body").append( "<table><tr><td>Hello~~TD...</td></tr></table>" );
}

练习2.1：创建单行6列的表格

function createTable2(){//1.创建一个table元素var $tab = $("<table></table>");//2.创建一个tr元素var $tr = $("<tr></tr>");for(var i=0;i<6;i++){ //3.创建一个td元素, 并为td添加内容var $td = $("<td></td>");$td.html("Hello TD~~");//4.将td添加到tr元素内部$tr.append( $td );}//5.将tr添加到table元素内部$tab.append( $tr );//6.将table添加到body元素内部$("body").append( $tab );
}

练习2.2：创建5行6列的表格

function createTable2(){//1.创建一个table元素var $tab = $("<table></table>");for(var j=0;j<5;j++){ //外层循环:控制行数//2.创建一个tr元素var $tr = $("<tr></tr>");for(var i=0;i<6;i++){ //内层循环:控制列数//3.创建一个td元素, 并为td添加内容var $td = $("<td></td>");$td.html("Hello TD~~");//4.将td添加到tr元素内部$tr.append( $td );}//5.将tr添加到table元素内部$tab.append( $tr );}//6.将table添加到body元素内部$("body").append( $tab );
}

练习3：创建指定行和列的表格

function createTable3(){//获取用户输入的行数和列数(js方式)//var rows = document.getElementById("rows").value;//var cols = document.getElementById("cols").value;var rows = $("#rows").val();var cols = $("#cols").val();console.log(rows+" : "+cols);//1.创建一个table元素var $tab = $("<table></table>");for(var j=0;j<rows;j++){ //外层循环:控制行数//2.创建一个tr元素var $tr = $("<tr></tr>");for(var i=0;i<cols;i++){ //内层循环:控制列数//3.创建一个td元素, 并为td添加内容var $td = $("<td></td>");$td.html("Hello TD~~");//4.将td添加到tr元素内部$tr.append( $td );}//5.将tr添加到table元素内部$tab.append( $tr );}//6.将table添加到body元素内部$("body").append( $tab );
}

仿QQ好友列表

/** 通过jQuery实现仿QQ列表好友列表 */
function openDiv(thisobj){ //thisobj是一个js对象 --转成--> jQuery对象//先将其他三个分组关闭( 将其他三个分组内的div设置为隐藏 )$("table span").not(thisobj).next("div").hide(); //css("display", "none")//根据被点击的分组找到分组内的好友列表, 切换好友列表的展示状态$(thisobj).next("div").toggle(); //如果元素显示则切换为隐藏, 如果隐藏则切换为显示
}

模拟员工信息管理系统

练习1：添加员工信息

function addEmp(){//1.获取要添加的员工信息(id, name, email, salary)var id = $("#box1 input[name='id']").val().trim();var name = $("#box1 input[name='name']").val().trim();var email = $("#box1 input[name='email']").val().trim();var salary = $("#box1 input[name='salary']").val().trim();console.log(id+" : "+name+" : "+email+" : "+salary);//2.校验员工信息//2.1.添加的员工信息不能为空!if( id == "" || name == "" || email == "" || salary == "" ){alert( "添加的员工信息不能为空!" );return;}//2.2.添加的员工id不能重复! (id=3)//获取所有的tr元素, 并遍历所有的tr元素var flag = false; //false表示id是不存在的!!!$("table tr").each(function(){ //this(JS对象)表示当前被遍历的元素 // this --转换为jQuery对象--> $( this ) var _id = $(this).find("td:eq(1)").text();//拿着用户输入的id和当前员工的id进行比较if( id == _id ){ //只要有一个相等,就说明id已存在,则停止添加alert("您输入的员工ID已存在, 请重新添加!");flag = true; //true表示id已存在!!//return; 放在这里的return不能终止程序的执行}});if( flag ){ //true表示id已存在!!return;}//3.将员工信息添加到页面上(添加到table中)//>>创建一个tr元素var $tr = $("<tr></tr>");//>>创建5个td元素,并将员工信息添加到td中var $td1 = $("<td><input type='checkbox'/></td>"); //复选框var $td2 = $("<td>"+id+"</td>"); //IDvar $td3 = $("<td>"+name+"</td>"); //namevar $td4 = $("<td>"+email+"</td>"); //emailvar $td5 = $("<td>"+salary+"</td>"); //email//>>将td元素添加到tr中$tr.append( $td1 ).append( $td2 ).append( $td3 ).append( $td4 ).append( $td5 );//>>将tr元素添加到table中$("table").append( $tr );
}

练习2：删除员工信息

function delEmp(){//1.获取所选中员工所在的tr行 (获取所有被选中的复选框)//$("input:checked").parents("tr").remove(); //会连接表头一起删除$("input:checked").parent("td").parent("tr").remove();
}

练习3：修改员工信息（自己完成）

练习4：实现全选或全不选

function checkAll(){//1.获取全选复选框的选中状态( 选中(true)?  没选中(false)? )var isCheck = $("#all").prop("checked"); //true|false//2.获取所有普通复选框, 将全选框的选中状态设置给所有普通复选框$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}

jQuery总结

html元素操作

1、创建元素

$("<div></div>") -- 创建一个div元素，返回的是一个jQuery对象,表示创建的div元素
$("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个jQuery对象,表示创建的div元素

2、添加子元素

$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素

3、删除元素

$("div").remove() -- 删除所有的div元素JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){//通过当前元素的父元素删除当前元素(始终删除第一个)divArr[0].parentNode.removeChild( divArr[0] );
}

4、替换元素

$("div").replaceWith("<p>我是来替换的…</p>")

html元素内容和值的操作

<div>这是一个div11元素<span>这是一个span元素</span>这是一个div1111元素
</div>
<input type="text" name="user"/>

1、html()函数 (类似于js中的innerHTML属性)

– 用于获取或设置元素的内容，比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容

$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容

2、text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)

– 用于获取或设置元素的文本内容

$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容

3、val()函数 (类似于js中的value属性)

– 获取或设置表单项元素的value值(input/select/option/textarea)

$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值

元素属性和css属性操作

<input type="text" name="username" id="inp"/>

1、prop()函数 – 用于获取或设置元素的属性值

在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数

$("input[type='checkbox']").prop("checked")
// 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
// 设置所匹配的复选框元素为选中状态$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user

2、css()函数 – 用于获取或设置元素的css属性值

$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({"width" : "200px","height" : "150px","border" : "5px solid red","background" : "pink"
}); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景颜色等样式

其他函数

1、each() 函数

$(selector).each(function( index,element ){})
// each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
// function中的index -- 表示遍历的元素的下标
// function中的element -- 表示当前正在遍历的元素(也可以通过this获取)

示例：

$("table tr").each(function(){//从当前行中获取第二个单元格的内容(当前行的id值)var tempId = $(this).find("td").eq(1).html();//拿着用户输入的id 和 每一行中的id值进行比较if( id == tempId ){alert("添加失败，id已存在！");flag = true; //id存在，更新flag的值，true表示已存在！}
});

2、show()/hide() 函数

show() – 设置元素由隐藏变为显示

$("div").show() -- 设置所有的div元素为显示

等价于:

$("div").css("display", "block");

hide() – 设置元素由显示变为隐藏

$("div").hide() -- 设置所有的div元素为隐藏

等价于:

$("div").css("display", "none");

2、toggle()/slideToggle()

toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示

slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态。

扩展内容

为元素绑定点击事件

以点击事件为例，为元素绑定点击事件的方式为:

方式1(js版)：

<script>function fn(){alert("input按钮被点击了...");}
</script>
<body><input onclick="fn()" type="button" value="点我~!" />
</body>

方式2(js版)：

<script>window.onload = function(){//获取id为btn的元素var btn = document.getElementById("btn");btn.onclick = function(){alert("input按钮被点击了...");}}
</script>
<body><input id="btn" type="button" value="点我~!" />
</body>

方式3(jQuery版)：

<script>
$(function(){//当点击btn按钮时,触发点击事件执行其中的函数$("#btn").click( function(){alert("input按钮被点击了...");});
});
</script>
<body><input id="btn" type="button" value="点我~!" />
</body>

js对象和jQuery对象的互相转换

通过JS的方式获取元素，返回的是JS对象，JS对象只能调用JS的属性或函数

通过jQuery选择器获取元素，返回的是jQuery对象（结构像一个集合），jQuery对象只能调用jQuery的属性或函数。

如果现有JS对象，但我们需要调用jQuery的属性或函数，可以将JS对象转成jQuery对象；

如果现有jQuery对象，但我们需要调用JS的属性或函数，可以将jQuery对象转成JS对象；

jQuery作业

07-08作业：

1、复习文档就绪事件函数（掌握什么时候该使用文档就绪事件函数）

2、将课上讲过的选择器练习自己再做一遍！

3、完成jQuery综合案例：

(1)创建表格
(2)仿QQ好友分组
(3)模拟员工信息管理系统
(4)尝试使用jquery完成js案例(电灯开关、元素的dom操作、网页换肤)

unit04-tomcat、HTTP

服务器概述

什么是服务器?

服务器：分为服务器硬件和服务器软件。在硬件服务器（计算机）上安装了服务器软件，才可以对外提供服务。

比如：让其他的计算机来访问当前服务器，为其他的计算机提供服务。

(1) 服务器硬件：是指在互联网上具有独立IP地址的计算机，比如我们自己用的计算机也可以作为服务器使用。

(2) 服务器软件：就是一个计算机程序，比如MySQL服务器软件，tomcat服务器软件。服务器软件分为很多类型，比如：ftp服务器，数据库服务器，web服务器软件，邮件服务器等。

什么是Web服务器?

(1) web服务器是指驻留在互联网上的某种类型的计算机程序。当浏览器访问服务器，请求服务器上的文件时，服务器将会处理该请求，并将请求的文件响应给浏览器，并会附带一些信息告诉浏览器如何查看该文件（即文件的类型）

(2) web服务器是可以向 “发出请求的浏览器提供文档” 的程序，比如在访问百度时，其实就是在访问百度的服务器。

tomcat就是一个web服务器软件，是由apache组织提供的一款服务器软件，特点：小巧灵活，免费开源，简单易用。

tomcat下载、安装、启动、配置

下载tomcat服务器

下载地址：http://tomcat.apache.org/

tomcat有很多版本，有解压版和安装版，还分windows （还分为32位和64位版）和linux版，根据自己的需求，选择对应的版本下载。

tomcat服务器运行需要jdk的支持（tomcat是由java语言开发的），版本对应为：

tomcat5 需要jdk4以上支持
tomcat6 需要jdk5以上支持
tomcat7 需要jdk6以上支持
tomcat8 需要jdk7以上支持

安装、启动tomcat服务器

1、安装tomcat服务器

绿色版解压之后就可以使用(原则：安装的路径中不要包含中文和空格)

解压后还需要配置JAVA_HOME环境变量，该变量指向jdk的根目录，指定tomcat启动时使用哪一个位置的jdk。

2、启动tomcat服务器

如何配置JAVA_HOME环境变量：

变量名: JAVA_HOME

变量值: C:\Program Files\Java\jdk1.8.0_45

注意：变量值指向JDK的根目录（不是bin目录），变量值的后面也不要加分号；

2、启动tomcat服务器

启动、关闭tomcat服务器：

通过 [tomcat根目录]/bin/startup.bat 可以启动tomcat服务器；

通过 [tomcat根目录]/bin/shutdown.bat 可以关闭tomcat服务器；

访问测试服务器：

在tomcat服务器启动后，服务器会默认监听8080端口，可以通过如下地址访问tomcat服务器的主页：

http://localhost:8080

修改tomcat默认端口

tomcat服务器在启动时，默认监听的端口是8080，这意味着，我们在访问tomcat服务器时，需要在主机名（localhost）或者IP地址（127.0.0.1）等后面加上端口。这样非常不方便。

可以将8080端口改为80端口，因为80端口非常特殊，可以省略不写（只有80端口可以省略，其他端口可在访问时必须得加上）

修改方法：找到 [tomcat安装目录]/conf/server.xml 文件并打开该文件，将文件中的 69 行的 <Connector> 标签上的 port 属性的值改为 80即可。

<Connector port="80" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443" />

改完后，保存文件，重新启动服务器（只有在服务器启动时，才会重新加载server.xml文件）再次启动的服务器就会监听新的端口。

扩展问题：端口占用问题：

在启动tomcat服务器时，可能会遇到端口占用问题，如下图：

原因分析:

**情况一：**可能是之前的tomcat服务器没有完全关闭，仍然在占用8080（或80）端口，导致服务器再次启动时，启动失败。

解决方式：运行shutdown.bat文件，将tomcat按照正常流程再关闭一次即可。再次启动服务器，如果成功，则说明问题已解决，否则看情况二。

**情况二：**可能是其他程序占用了8080（或80）端口，导致服务器启动失败。

解决方式：打开一个cmd窗口，通过 netstat -ano 命令查看当前系统中活动的进程，找到8080（或80）端口对应的进程编号（PID），根据进程编号将进程结束即可！

netstat -ano

协议  本地地址         外部地址        状态           PID
TCP  0.0.0.0:8080      0.0.0.0:0      LISTENING     6520
TCP  0.0.0.0:135     0.0.0.0:0      LISTENING     448
...

taskkill /f /pid 6520

tomcat目录结构

tomcat目录结构介绍

tomcat服务器安装根目录下有很多子目录，这些目录的作用是：

bin：用于存放tomcat服务器中批处理文件的目录(xx.bat/xx.sh)
conf：用于存放tomcat服务器中的配置文件的目录(其中server.xml文件是tomcat服务器中非常重要的一个文件。)
lib：用于存放tomcat服务器运行时所依赖的jar包。
logs：用于存放tomcat服务器运行时产生的日志文件(启动tomcat服务器时会打印很多日志信息,这些日志信息还会以文件形式保存到logs目录下)
temp：用于存放tomcat服务器产生的临时文件，tomcat会自己清理，可以忽略该目录webapps：是localhost【虚拟主机】默认管理的目录，将开发好的【web应用】程序放在webapps目录下，就可以通过浏览器访问localhost主机中的Web资源文件了。
可以简单的理解为：webapps目录就是web资源（html、css、js、图片、jsp等）的存放目录，将web资源文件放在该目录下，就可以通过浏览器来访问。work：用于存放tomcat服务器产生的工作文件（JSP翻译后的Servlet文件会放在work目录下；session对象序列化后产生的文件也会放在work目录下；）

虚拟主机和Web应用

总结：

（1）虚拟主机就是tomcat服务器中配置的一个站点，在tomcat服务器中默认提供了一个localhost虚拟主机，这个主机的发布目录是webapps目录：

这样意味着，将Web应用放在webapps目录下，就表示发布到了localhost虚拟主机中。

（2）Web应用就是一个存放了很多Web资源（html、css、js、jsp、servlet、图片等）的目录，将Web应用发布到虚拟主机中，就可以通过浏览器来访问Web应用中的这些资源文件了。

web应用

web应用的目录结构

news(目录,web应用)|-- 其他目录, 放在news根目录或者其他目录中的资源文件,浏览器可以直接访问|-- WEB-INF目录, 放在这个目录下的资源文件是受保护的,浏览器不能直接访问(不是不能访问,是不能直接访问) |-- classes目录, 用于存放编译后的class文件|-- lib目录, 用于存放web应用所依赖的jar包|-- web.xml文件, 用于存放和web应用相关的一些配置（配置Servlet、配置主页、配置session的超时时间等）

其中news就是一个目录, 同时也是一个web应用程序, 其中可以包含很多的资源文件。

部署web应用到虚拟主机中

直接将Web应用的目录拷贝到虚拟主机所管理的目录下，就发布到了虚拟主机中

例如：将news目录拷贝webapps目录下，由于webapps目录是localhost主机默认管理的目录，所以就相当于将news应用发布到了localhost主机中。

通过如下路径规则就可以访问localhost主机下的news应用下的资源文件：

http://localhost:端口/news/xxx

扩展内容（了解）

哔哩哔哩视频链接：https://www.bilibili.com/video/BV1Hg4y1B7dr

访问tomcat服务器主页：http://localhost

访问news/hello.html：http://localhost/news/hello.html

能否将访问 news/hello.html 的路径缩短一些（比如只通过主机名就可以访问news/hello.html这个网页）

配置WEB应用的主页

如果没有将 hello.html 配置为当前Web应用的主页，在访问 hello.html 时的路径为：

http://localhost/news/hello.html

如果将 hello.html 配置为当前Web应用的主页，再次访问 hello.html 时的路径为：

http://localhost/news

在上的路径中，/hello.html 这个路径可以加，也可以省略。

将 hello.html 配置为当前应用的主页，方式为：找到 [当前Web应用]/WEB-INF/web.xml文件并打开，在web.xml文件的根标签内部添加如下配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1"><welcome-file-list><welcome-file>/hello.html</welcome-file><welcome-file>/hello1.html</welcome-file><welcome-file>/hello2.html</welcome-file></welcome-file-list></web-app>

配置完后，需要重启服务器，配置才会生效。

配置缺省的(默认的)WEB应用

上面已经将news/hello.html配置为news应用的主页，访问hello.html时路径为：http://localhost/news/

如果不将 news 应用配置为默认的Web应用，在访问 news 下的 hello.html(主页)时的访问路径为:

http://localhost/news/

如果将 news 应用配置为缺省的（默认的）Web应用，在访问 hello.html(主页)时的路径就变成了：

http://localhost/

如何将 news 配置为缺省的（默认的）Web应用（缺省Web应用只能有一个）？：

将Web应用的名字改为一个大写的ROOT，当前Web应用就是一个默认的Web应用，再访问这个Web应用下的资源文件时，访问的路径中就可以不用写Web应用的名称了。

打war包

war包和jar包都是java程序中的一种压缩包格式，如果开发一个Java基础工程，可以将其中编译后的class文件和相关的配置文件打成一个jar包。

可以将一个Web应用打成一个war包，这样做的好处有：

(1) 将web应用打成一个war包，传输起来更加方便，而且文件体积会变小。
(2) 将war包发布到服务器中，服务器能识别war包格式，会自动将war包解压发布！

打war包的方法是：

进入到web应用的目录下，将Web应用目录下的所有子目录和文件全部选中，右键压缩成一个 xxx.zip 包，再把 xxx.zip 改为 xxx.war即可!!

需要注意的是，如果有以下问题，可能会导致war不会自动解压：

(1) 在将Web应用打成一个压缩包时，没有打成一个 xxx.zip，而是使用 rar格式或者其他格式,会导致自动解压失败!
(2) 打成的war包的名字 和 已发布的web应用的名字不能冲突,会导致自动解压失败!
(3) war包中包含的目录名和文件名是中文的,也会导致自动解压失败!

HTTP协议概述

什么是HTTP协议?

HTTP协议是用于规定浏览器和服务器之间的通信方式/规则

主要规定了浏览器给服务器发送的请求信息的格式

以及规定了服务器给浏览器发送响应信息的格式

HTTP协议在工作时所遵循的基本原则：

（1）一次请求，只对应一次响应
（2）请求只能由浏览器发起，服务器只能被动的等待请求，根据请求作出回应。

HTTP协议详解

IE浏览器的插件：HttpWatch，可以监听浏览器和服务器通信的内容。

HTTP请求

1、请求行

GET  /news/hello.html  HTTP/1.1

（1）GET：表示请求方式，在HTTP协议中一共定义了7种提交方式，但是我们只用GET和POST。

（2）/news/hello.html：请求资源路径，表示浏览器请求的是哪一个Web应用以及哪一个web资源文件。

（3）HTTP/1.1：请求所遵循的协议和版本。

2、若干请求头

请求头都是Key-Value结构,例如：

Host：localhost -- 通知服务器，浏览器要请求的是哪一台虚拟主机。
Accept：text/html, appliaction/xhtml+xml,...  -- 通知服务器，浏览器能接收的响应数据类型。
...

（空白行，用于分隔请求头和请求实体）

3、请求实体内容

如果请求方式为 GET 提交，请求实体是没有内容的！

如果请求方式为 POST 提交，并且请求中携带了数据，请求实体中才会有内容！

HTTP响应

1、状态行

HTTP/1.1 200 OK

（1）HTTP/1.1：表示响应所遵循的协议和版本

（2）200：状态码，三位的数字，表示服务器对请求处理的结果。

 200: 表示请求处理成功302: 表示请求重定向(即需要再进一步请求才可以获取到相应的资源)304/307: 表示通知浏览器使用缓存404: 表示浏览器请求的资源不存在(浏览器的问题, 请求路径错误)500: 表示服务器在处理请求的过程中抛出了异常。

（3）OK：描述短语（可以忽略），也表示服务器对请求处理的结果，和状态码表示的结果一致。

 200：OK404：Not Found500: Internal Server Error...

2、若干响应头：也是key-value格式

Content-Type: 表示服务器响应的数据类型，text/html,  image/*...
Content-Length: 表示服务器响应数据的长度, 例如: 384 /字节
Set-Cookie: 和cookie技术相关的一个头, 后面会提到。
...

3、响应实体内容

响应实体就是浏览器所请求文件的内容。例如：浏览器向服务器请求一个hello.html文件，服务器会找到hello.html文件，将文件的内容作为响应实体发送给浏览器。

内容补充

1、问题1：请求方式什么时候是GET提交？什么时候是POST提交？

只有当使用表单（form），并且在表单上明确的通过method指定提交方式为POST时，请求方式才是POST提交，其他方式都是GET提交（AJAX除外）

思考：判断以下请求方式是GET还是POST?

(1)<form action="#"></form>                       -- GET提交
(2)<form action="#" method="GET"></form>      -- GET提交
(3)<form action="#" method="POST"></form>     -- POST提交
(4)点击超链接访问服务器，例如：<a href="http://www.baidu.com">百度一下</a>   -- GET提交
(5)直接在浏览器的地址栏中书写URL地址访问服务器      -- GET提交

2、问题2：GET提交和POST提交有什么区别？

主要区别体现在请求参数传输过程的不相同

GET提交：

将数据通过问号拼接在地址栏URL地址的后面，相对非常不安全。
将数据拼接在地址栏URL地址的后面，数据量是有限制的，通常不能超过1KB或者4KB。

POST提交：（form）

POST提交是通过请求实体将数据提交给服务器，不会显示在地址栏上，因此相对更加安全。
POST提交通过请求实体提交数据，数据量理论上是没有限制的。

3、总结：

如果只是单纯做一个跳转，请求中没有数据，尽量使用GET提交。
如果在请求中有数据，但数据量不大，并且数据没有隐私性，也尽量使用GET提交。
如果在请求中有数据，数据量比较大或者数据较为隐私，此时推荐使用POST提交。

将Tomcat整合到Eclipse中

将Tomcat服务器整合到Eclipse工具中，可以通过Eclipse启动、关闭tomcat服务器，更重要的是，可以非常方便的将在Eclipse中创建的Web项目发布到Tomcat服务器中运行。

哔哩哔哩视频链接：https://www.bilibili.com/video/BV1wz411z73V

方式一：在window偏好设置中配置Tomcat

1、点击Window --> Preferences(偏好设置):

2、在偏好设置窗口中点击 Server --> Runtime Environments --> add:

3、在弹出的窗口中选择 --> Apache --> Apache Tomcat v8.5，需要注意的是，这里得根据自己安装的tomcat版本进行选择，比如我安装是8.5版本的tomcat，所以这里选择Apache Tomcat v8.5。

4、在下面的窗口中配置tomcat服务器的安装根目录，可以直接把路径复制到第二个输入框中；也可以点击后面的 Browse按钮在文件管理器中选择tomcat服务器安装根目录。

最后点击finish即可完成将Tomcat整合到Eclipse中的配置。

方式二：在创建Web项目时配置Tomcat

1、如果在创建Web项目时，Target runtime选项中没有配置可选的服务器，可以点击右面的选项进行配置

点击后进入下一步操作。

2、在弹出的窗口中选择 --> Apache --> Apache Tomcat v8.5，需要注意的是，这里得根据自己安装的tomcat版本进行选择，比如我安装是8.5版本的tomcat，所以这里选择Apache Tomcat v8.5。

3、在下面的窗口中配置tomcat服务器的安装根目录，可以直接把路径复制到第二个输入框中；也可以点击后面的 Browse按钮在文件管理器中选择tomcat服务器安装根目录。

最后点击finish即可完成将Tomcat整合到Eclipse中的配置。

4、上一步完成后，回到Web项目创建的视图窗口，再查看"Target runtime"选项，如下：

将整合到Eclipse中的tomcat从Eclipse中删除

如果要将整合到Eclipse中的tomcat从Eclipse删除：点击Windows --> Preferences --> Server --> Runtime Environments，选中要删除的服务器，点击右侧的删除按钮即可删除，最后点击Apply and Close保存设置即可！

在Eclipse中创建Server及移除Server

上面讲解了如何将Tomcat整合到Eclipse中，整合之后，需要在Eclipse中创建一个Server才可以进行启动tomcat、关闭tomcat等操作。

1、Eclipse中找到Servers窗口：

2、如果没有可以到Window --> Show View --> Other中搜索"servers"，如下图:

3、在Server窗口中点击“No servers are available…”链接：

4、在弹出的窗口中，保持默认配置，直接点击完成

如果弹出的窗口中默认的服务器不是tomcat，则说明在此之前没有将Tomcat整合到Eclipse中。

5、在上一步点完成后，Eclipses左侧会多出一个Servers项目，Servers窗口中会出现创建的Server，也就是tomcat服务器。

注意：①处的Servers项目不能关闭（close），更不能删除（delete）

6、在创建完Server后，双击tomcat，可以修改Tomcat服务器配置

(1)将Server Locations中的选项切换为第二个选项

(2)将Deploy Path右侧的输入框中的内容改为webapps。ctrl+s保存配置即可

以上配置是为了保证在Eclipse中发布Web应用到tomcat服务器中时，可以将项目发布到tomcat服务器的webapps目录下。

如果不配置，会导致tomcat服务器中webapps下的Web应用无法访问。

7、如果要移除添加的Server，需要同时删除①处的Servers项目（右键delete，要彻底从硬盘上删除），以及删除②处的tomcat服务器（右键delete）

tomcat右键选项介绍

a) Start：用于启动tomcat服务器，如果已启动，则显示 ReStart，作用是重启服务器

b) Stop：用于停止服务器

c) Add and Remove：将Web应用部署到tomcat服务器中，或者移除服务器中部署的Web应用

d) Clean：作用是将发布到Eclipse自己的webapps目录中的项目删除再重新部署

e) Clean Tomcat Work Directory：作用是将在tomcat运行过程中存入work目录的文件删除

tomcat启动失败常见原因

问题1：tomcat服务器启动失败-1

如果在启动服务器时，服务器启动失败，并弹出窗口显示如下异常信息：

根据上面的描述信息，可以看出是8005、8080、8009端口被同时占用了，此时只有一种可能，就是之前已经启动了tomcat或者之前开启的tomcat没有完全关闭导致的。

解决方式：到tomcat安装目录找到bin目录中的shutdown.bat文件，双击运行将服务器关闭，再到Eclipse中启动服务器即可！

问题2：tomcat服务器启动失败-2

如果在启动服务器时，服务器启动失败，并弹出窗口显示如下异常信息：

解决方法：

(1) 可以先将服务器中所有的Web应用移除（在服务器上右键，Add and Remove–>Remove All–>Finish）

(2) 再分别执行服务器右键选项中的clean和Clean Tomcat Work Directory

(3)再次启动服务器，如果启动没有报错，则说明tomcat服务器本身没有问题，再将要运行的项目发布到tomcat中，再次启动服务器，观察是否有错误。如果有则说明是项目本身的问题。

(4)如果移除了所有的Web应用，启动tomcat服务器报错，则说明tomcat本身就有问题，可以将tomcat服务器重新配置一次到Eclipse中(将tomcat和Server项目删除，再点击链接重新创建Server)

JAVAWEB NOTE 1相关推荐

JAVAWEB NOTE 2
unit05-Servlet Servlet概述什么是Servlet? Servlet是由SUN公司提供的一门动态Web资源开发技术静态Web资源:不同的人,在不同的条件下访问后看到的是相同的效果 ...
Failed to load ‘D:\note\笔记\javaweb\webpack\webpack.config.js‘ config
配置插件html-webpack-plugin出现的问题,原因在于 plugins里面htmlplugin少打了一个n. 另外一种情况就是这种情况 const path = require('path ...
javaweb学习总结(十)——HttpServletRequest对象(一)
2019独角兽企业重金招聘Python工程师标准>>> 一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协 ...
javaweb学习总结(十)：HttpServletRequest对象(一)
一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...
javaweb学习总结(十)——HttpServletRequest对象(一)（转）
(每天都会更新至少一篇以上,有兴趣的可以关注)转载自孤傲苍狼一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器 ...
Servlet之javaweb应用(二)
一. 使用 JavaEE 版的 Eclipse 开发动态的 WEB 工程(JavaWEB 项目) 1). 把开发选项切换到 JavaEE 2). 可以在 Window -> Show View ...
重学JavaWeb —— JSP，简单全面一发入魂
文章目录 JSP 特点由来本质使用 JSP指令 page include taglib JSP脚本 JSP内置对象 JSP作用域 EL表达式 EL内置对象 EL取值方式 JSP动作元素 JSTL ...
JavaWeb之HTML标签
JavaWeb之HTML标签常用标签 <a href="#">a 超级链接(anchor)</a><abbr title="abbrevi ...
JavaWeb+MySql+Tomcat一键部署方案
前言前段时间,公司接单子做一套JavaWeb系统.作为主要负责人,我们小组的工作一切顺利.但在交付前,客户要求该Web系统做到一键安装部署.这是因为该系统使用环境为机房局域网,每个机房需要部署一套, ...