目录
方式一：在标签的style属性上设置"key:value value",修改标签样式。
方法二：在head标签中，使用style标签来定义各种自己需要的css样式
方法三：把css样式写成一个单独的css文件，再通过link标签引入即可复用。
2.2.1、方法一：在 head 或 body 标签中，使用 script 标签来写 JavaScript 代码
2.2.2、方法二：使用script标签引入单独的JavavaScript代码文件
2.8.3、函数的 arguments 隐形参数（只在 function 内）
3.12.1、$(function(){});和window.onload = function(){}有什么区别？
4.0.1、xml在IDEA用浏览器打开报没有根目录，而在外部打开没有报错
5.5.3、停止tomcat
5.7、html页面用鼠标拖到浏览器和在浏览器中输入http://ip:端口号/工程名/访问的区别
5.7.2、在浏览器中输入http://ip:端口号/工程名/访问
6.6、通过继承HttpServlet实现Servlet程序
6.16.2、HttpServletRequest 类的常用方法
6.17.1、HttpServletResponse 类的作用
6.17.3、如何往客户端回传数据（解决乱码，设置服务器和客户端字符集和响应头）
6.17.4.2、方式二
7、JavaEE项目的三层架构
学习B站尚硅谷Javaweb的笔记，视频链接：尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版_哔哩哔哩_bilibili
1、Html 和 Css
1.1、B/S 软件的结构
1.2、网页的组成部分
页面由三部分内容组成，分别是内容（结构）、表现、行为。
内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用html技术来展示。
表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用Css技术实现
行为，指的是页面中元素与输入设备交互的响应。一般使用
javascript
技术实现。
1.3、HTML简介
Hyper Text Markup Language（超文本标记语言）简写:HTML
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(（如:文字如何处理，画面如何安排，图片如何显示等)
1.4、HTML文件的书写规范
<!DOCTYPE html><!-- 约束，声明 -->
<html lang="zh_CN"><!--html标签表示html的开始 lang="zh_CN"表示中文 html标签中一般分为两部分，分别是head和body -->
<head><!-- 表示头部信息，一般包含三部分内容，title标签，css样式，js代码 -->
<meta charset="UTF-8"><!-- 表示当前页面使用的字符集 -->
<title>标题</title><!-- 表示标题 -->
</head>
<body><!-- body标签是整个html页面显示的主体内容 -->
hello
</body>
</html><!-- 表示html页面的结束 -->1.5、HTML标签
1、标签的格式：<标签名>封装的数据</标签名>
2、标签名大小写不敏感
3、标签拥有自己的属性
①基本属性：可以修改简单的样式效果，例如 bgcolor = "red" 可以修改背景颜色属性
②时间属性：onclick = "alert('你好！');" 可以直接设置事件响应后的代码
4、标签又分为，单标签和双标签
①单标签格式：<标签名 /> br换行，hr水平线
②双标签格式：<标签名>…封装数据…<标签名/>
1.6、标签的语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0-标签语法.html</title>
</head>
<body>
<!-- ①标签不能交叉嵌套 -->
正确：<div><span>早安，尚硅谷</span></div>
错误：<div><span>早安，尚硅谷</div></span> <!-- 浏览器会修复一些错误 -->
<hr />
<!-- ②标签必须正确关闭（闭合） -->
<!-- i.有文本内容的标签： -->
正确：<div>早安，尚硅谷</div>
错误：<div>早安，尚硅谷
<hr />
<!-- ii.没有文本内容的标签： -->
正确：<br />
错误：<br >
<hr />
<!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">早安，尚硅谷</font>
错误：<font color=blue>早安，尚硅谷</font>
错误：<font color=>早安，尚硅谷</font>
<hr />
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 --> <br/>
错误：<!-- 注释内容 <!-- 注释内容 -->--> <!-- 显示（-->） -->
<hr />
</body>
</html>1.7、常用标签
1.7.1、font字体
在网页上显示，我是字体标签，并修改字体为宋体，颜色为红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.html</title>
</head>
<body>
<!--
字体标签 在网页上显示，我是字体标签，并修改字体为宋体，颜色为红色。
font标签时字体标签，它可以修改文本的字体，颜色，大小（尺寸）
color属性修改颜色
face属性修改字体
size属性修改大小
-->
<font color="red" face="宋体" size="5">我是字体标签</font>
</body>
</html>1.7.2、特殊字符
常用特殊字符表：
其他特殊字符表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.特殊字符.html</title>
</head>
<body>
<!-- 特殊字符
需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。
常用的特殊字符：
< <
> >
空格
-->
我是<br>字符
</body>
</html>1.7.3、标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签.html</title>
</head>
<body>
<!-- 标题标签
需求 1：演示标题 1 到 标题 6 的
h1-h6都是标题标签
h1 最大 h6 最小
align：属性是对其属性
left 左对齐：默认
right 右对齐
center 居中对齐
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>1.7.4、超链接(重点)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>
<!--
a标签是超链接
href属性设置链接的地址
target属性设置那个目标进行跳转
_self 表示当前页面（默认）
_blank 表示打开新页面来进行跳转
-->
<a href="http://localhost:8080">这是一个超链接</a><br>
<a href="http://localhost:8080" target="_self">这是一个超链接_self</a><br>
<a href="http://localhost:8080" target="_blank">这是一个超链接_blank</a><br>
</body>
</html>1.7.5、列表标签
列表标签分为无序列表、有序列表、定义列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
ul是无序列表
type属性可以修改列表项前面的符号
li是列表项
ol是有序列表
-->
<!-- 使用无序列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来 -->
<ul type="none">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul><hr>
<!-- 使用有序列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来 -->
<ol>
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ol>
</body>
</html>1.7.6、img标签
img标签可以在html页面显示图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
<!--使用 img 标签显示一张美女的照片。并修改宽高，和边框属性
img标签是图片标签，用来显示图片
src属性可以设置图片的路径
width属性可以设置图片的宽度
height属性可以设置图片的高度
border属性可以设置图片的边框大小
alt属性设置当指定路径找不到图片时，用来替代显示的文本内容
在javase中路径也分为相对路径和绝对路径
相对路径：从工程名开始算
绝对路径：盘符:/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径：
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件，相当于 ./文件名 ./可以省略
绝对路径：
正确格式是：http://ip:prot/工程名/资源路径
错误格式是：盘符:/目录/文件名
-->
<img src="../imgs/052.jpg" width="200" height="260" border="1" alt="未找到图片">
<img src="../imgs/1.jpg" width="200" height="260" border="1">
<img src="../imgs/2.jpg" width="200" height="260" border="1">
<img src="../imgs/3.jpg" width="200" height="260" border="1">
<img src="../imgs/4.jpg" width="200" height="260" border="1">
<img src="../imgs/5.jpg" width="200" height="260" border="1">
<img src="../imgs/6.jpg" width="200" height="260" border="1">
<img src="../imgs/7.jpg" width="200" height="260" border="1">
</body>
</html>1.7.7、表格标签（重点）
快捷键：IDEA输入table>tr*5>td*5后按tab自动生成5行5列表格
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框
需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
table 标签是表格标签
border 设置表格边框
width 设置表格宽度
height 设置表格宽度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格之间的间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>1.7.8、跨行跨列表格
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>7.表格的跨行跨列</title>
</head>
<body>
<!--需求 1：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。-->
<!--
colspan 属性设置跨列
rawspan 属性设置跨行
-->
<table align="center" cellspacing="0" width="500" height="500" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">1.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
</html>1.7.9、iframe框架标签（和超链接ａ标签组合使用）
iframe标签可以在一个html页面上，打开一个窗口，去加载一个单独的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
<!--
iframe标签可以在页面上开辟一个小区域显示一个单独的页面
iframe和a标签组合使用的步骤如下：
①在iframe标签中使用name属性定义一个名称
②在a标签的target属性设置ifram的name的属性值
-->
这是一个单独的完整的页面<br/><br/>
<iframe src="6.表格标签.html" width="500" height="400" name="if1"></iframe>
<ul>
<li><a href="0-标签语法.html" target="if1">0-标签语法.html</a></li>
<li><a href="1.font标签.html" target="if1">1.font标签.html</a></li>
<li><a href="2.特殊字符.html" target="if1">2.特殊字符.html</a></li>
</ul>
</body>
</html>1.7.10、表单标签（重点）
表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表单</title>
</head>
<body>
<!--
需求 1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下 拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。
-->
<!--
form标签就是表单
input type="text" 文本输入框 value设置文本框默认值
input type="password" 密码输入框 maxlength设置最大长度
input type="radio" 单选框 使用name属性可以对其进行分组 checked="checked"表示默认选中
input type="checkbox" 复选框 checked="checked"表示默认选中
input type="reset" 重置按钮 value属性修改按钮上的文本
input type="submit" 提交按钮 value属性修改按钮上的文本
input type="button" 按钮 value属性修改按钮上的文本
input type="file" 文件上传域
input type="hidden" 隐藏域 当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的同时发送给服务器）
select标签是下拉列表框
option标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea是多行文本输入框（起始标签和结束标签中的内容是默认值）
rows属性可以设置显示几行的高度
cols属性设置每行可以显示几个字符宽度
-->
<form >
<h1 align="center">用户注册</h1>
<table align="center" cellspacing="0">
<tr>
<td>用户名：</td>
<td><input type="text" value="默认值"/></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" maxlength="10"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" maxlength="10"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" checked="checked"/>Java
<input type="checkbox">C++
<input type="checkbox"/>Python
<input type="checkbox"/>C
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>请选择国籍</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>小日本</option>
<option>阿三</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td>
<textarea rows="10" cols="20">我是默认值</textarea>
</td>
</tr>
<tr><td align="center"><input type="reset" value="这是一个重置按钮"><br/></td></tr>
<tr><td align="center"><input type="submit" value="这是一个提交按钮"></td></tr>
<tr><td align="center"><input type="button" value="这是一个自己的按钮"></td></tr>
<!--<tr>
<td><input type="file"><br/></td>
<td><input type="hidden" ></td>
</tr>-->
</table>
</form>
</body>
</html>表单提交的细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表单</title>
</head>
<body>
<!--
form标签就是表单
action属性设置提交的服务器地址
method属性设置提交的方式 GET（默认） 或 POST
表单提交时，数据没有发送给服务器的三种情况：
1.表单项没有name属性值
2.单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3.表单项不在提交的form标签中
get请求的特点：
1.浏览器地址栏中的地址是：action属性[+?+请求参数] 请求参数的格式是：name=value&name=value
2.不安全
3.有数据长度的限制
post请求的特点
1.浏览器地址栏只有action属性值
2.相对于get请求要安全
3.理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login">
<h1 align="center">用户注册</h1>
<table align="center" cellspacing="0">
<tr>
<td>用户名：</td>
<td><input type="text" name="username" value="默认值"/></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" name="password" maxlength="10"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="boy" checked="checked"/>男
<input type="radio" name="sex" value="girl" >女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" name="hobby" value="java" checked="checked"/>Java
<input type="checkbox" name="hobby" value="cpp"/>C++
<input type="checkbox" name="hobby" value="py"/>Python
<input type="checkbox" name="hobby" value="c"/>C
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select name="country">
<option value="none">请选择国籍</option>
<option value="cn" selected="selected">中国</option>
<option value="usa">美国</option>
<option value="jp">小日本</option>
<option value="ind">阿三</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td>
<textarea name="desc" rows="10" cols="20">我是默认值</textarea>
</td>
</tr>
<tr><td align="center"><input type="reset" value="这是一个重置按钮"><br/></td></tr>
<tr><td align="center"><input type="submit" value="这是一个提交按钮"></td></tr>
<tr><td align="center"><input type="button" value="这是一个自己的按钮"></td></tr>
<!--<tr>
<td><input type="file"><br/></td>
<td></td>
</tr>-->
</table>
</form>
</body>
</html>1.7.11、其他标签（div span p）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11.其他标签</title>
</head>
<body>
<!--
div标签 默认独占一行
span标签 它的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方空出一行来（如果已有就不再空）
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>
</body>
</html>1.8、CSS技术
1.8.1、CSS技术介绍
CSS是层叠样式表单。用于（增强）网页样式并允许将样式信息与网页内容分离的一种标记性语言。
1.8.2、CSS的语法规则
选择器：浏览器根据"选择器"决定CSS样式影响的HTML元素（标签）
属性：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的声明，例如：p{color:bule}
多个声明：如果要定义不止一个声明，则需要用分号将声明分开。虽然最后一条声明的最后可以不用加分号（但尽量在每条声明的末尾都加上分号）
例如：
p{
color:red;
font-size:30px;
}
CSS 的注释： /* */
1.8.3、CSS 和 HTML 结合的方式
方式一：在标签的style属性上设置"key:value value",修改标签样式。
这种代码方式存在问题(缺点)：
1、代码量太多而且大部分都是重复代码
2、可读性差
3、CSS代码没有复用性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 -->
<div style="border: 1px solid red; width: 100px; height: 100px; background-color: green">div 标签 1</div>
<div style="border: 1px solid red">div 标签 2</div>
<span style="border: 1px solid red">span 标签 1</span>
<span style="border: 1px solid red">span 标签 2</span>
</body>
</html>方法二：在head标签中，使用style标签来定义各种自己需要的css样式
格式如下：
xxx{
key : value value;
}
注意：在style标签内的内容为css，注释为/**/
存在问题：这种方式存在的缺点
1、只能在统一页面内服用代码，不嫩恶搞在多个页面中复用css代码
2、维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 -->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>方法三：把css样式写成一个单独的css文件，再通过link标签引入即可复用。
在src目录下新建1.css，内容如下
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}在head部分用link导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 -->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>1.8.4、CSS选择器
1.8.4.1、标签名选择器
标签名选择器的格式是：
标签名{
属性：值；
}
标签名选择器，可以决定哪些标签被动的使用这个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
color: yellow;
font-size: 20px;
border: 5px dashed blue;
}
</style>
</head>
<body>
<!--
需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
1.8.4.2、id选择器
id选择器的格式是：
#id属性值{
属性：值
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
#id002{
color: red;
font-size: 20px;
border: 5px dotted blue;
}
</style>
</head>
<body>
<!--
需求1：分别定义两个 div 标签，
第一个div 标签定义 id 为 id001 ，然后根据id属性定义css样式修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
-->
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
1.8.4.3、class选择器
class类型选择器的格式是：
.class 属性值{
属性：值；
}
class类型选择器，可以通过class属性有效的选择性的去使用这个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--
需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
-->
<div class="class01">div标签class01</div>
<div class="class02">div标签</div>
<span class="class01">span标签class01</span>
<span class="class02"> span标签2</span>
</body>
</html>
1.8.4.4、组合选择器
组合选择器的格式是：
选择器1，选择器2，选择器n{
属性：值
}
组合选择器可以让多个选择器公用同一个css代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01, #id01, span{
color: blue;
font-size: 20px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<!--
需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
-->
<div class="class01">div标签class01</div> <br />
<span id="id01">span 标签</span> <br />
<div>div标签</div> <br />
<div>div标签id01</div> <br />
</body>
</html>
1.8.5、CSS常用样式
1、字体颜色:
color
2、宽度
width:
3、高度
height:
4、背景颜色
background:
5、字体样式:
font-size
6、div居中：
margin-left: auto;
matgin-right: auto;
7、边框:
border
8、文本居中：
text-align: center
9、超链接去下划线：
text-decoration:none
10、表格细线:
border: 1px black solid;/设置边框/
border-collapse: collapse;/将边框合并/
11、ul无序列表去除符号:
list-style: none;
2、Javascript
2.1、Javascript介绍
JavaScript语言诞生主要是完成页面的数据验证，因此，它运行在客户端，需要运行浏览器来解析执行JavaScript代码。
JS是Netscape网景公司的产品，最早取名为LiveScript，为了吸引更多java程序员。更名为JavaScript。
JS是弱类型， java是强类型
弱类型就是类型可变。强类型就是定义变量的时候，类型已确定，而且不可变
特点:
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘)
3. 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关)
2.2、JavScript 和 Html 代码的结合
2.2.1、方法一：在 head 或 body 标签中，使用 script 标签来写 JavaScript 代码
在 head 或 body 标签中，使用 script 标签来写 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//alert()是JavaScript语言提供的一个警告框函数，可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("hello JavaScript!");
</script>
</head>
<body>
</body>
</html>2.2.2、方法二：使用script标签引入单独的JavavaScript代码文件
使用script标签引入单独的JavavaScript代码文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
现在需要使用script引入外部的js文件来执行
src属性用来引入js文件路径（相对路径/绝对路径）
script标签可以用来定义js代码，也可以用来引入js文件，但是只能二选一，不能同时使用两个功能
若使用多个script标签，执行顺序从上往下
-->
<script type="text/javascript" src="hello.js"> </script>
<script type="text/javascript" >
alert("帅哥你好");
</script>
</head>
<body>
</body>
</html>2.3、变量
什么是变量？变量是可以存放某些值的内存的命名
javaScript的变量类型：
- 数值类型 number
- 字符串类型 String
- 对象类型 object
- 布尔类型 boolean
- 函数类型 function
JavaScript里特殊的值：
- undefined 未定义，所有js变量未赋予初值的时候，默认值都是undefined
- null 空值
- NaN 全称是Not a Number，非数字，非数值。
JS中的定义变量格式：
- var 变量名；
- var 变量名 = 值；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i;
// alert(i); //undefined
// i = 12;
//typeof()是JavaScript语言提供的一个函数，可以返回变量的数据类型
// alert(typeof(i)); //number
// i = "abc";
// alert(typeof(i)); //String
var a = 12;
var b = "abc";
alert( a * b ); //NaN
</script>
</head>
<body>
</body>
</html>2.5、关系（比较）运算
等于：== 是简单的做字面值的比较
全等于：=== 除了做字面值的比较之外还会比较两个变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = "12";
var b = 12;
alert(a == b); //true
alert(a === b); //false
</script>
</head>
<body>
</body>
</html>2.6、逻辑运算
且运算：&&
或运算：||
取反： ！
在javaScript语言中，所有的变量都可以作为一个boolean类型的变量去使用
0，null，undefined，""（空串）都认为是false;
注意：
&&且运算有两种情况：
① 当表达式全为真的时候。返回最后一个表达式的值。
② 当表达式中有一个为假的时候，返回第一个为假的表达式的值。
||或运算也有两种情况：
① 当表达式全为假的时候，返回最后一个表达式的值
② 只要有一个表达式为真，就会返回第一个为真的表达式的值
并且&&与运算和||或运算有短路。短路就是当这两个运算有结果了之后，后面的表达式就不再执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*在javaScript语言中，所有的变量都可以作为一个boolean类型的变量去使用
0，null，undefined，""（空串）都认为是false */
// var a = 0;
// if(a){
// alert("0为真");
// }else{
// alert("0为假"); //输出该语句
// }
// var a = null;
// if(a){
// alert("null为真");
// }else{
// alert("null为假"); //输出该语句
// }
// var a = undefined;
// if(a){
// alert("undefined为真");
// }else{
// alert("undefined为假"); //输出该语句
// }
// var a = "";
// if(a){
// alert("空串为真");
// }else{
// alert("空串为假"); //输出该语句
// }
/*&&且运算有两种情况：
① 当表达式全为真的时候。返回最后一个表达式的值。
② 当表达式中有一个为假的时候，返回第一个为假的表达式的值。*/
var a = "abc";
var b = true;
var c = null;
var d = false;
// alert(a && b); //true
// alert(b && a); //abc
// alert(a && d); //false
// alert(a && c); //null
/* ||或运算也有两种情况：
① 当表达式全为假的时候，返回最后一个表达式的值
② 只要有一个表达式为真，就会返回第一个为真的表达式的值 */
// alert(d || c); //null
// alert(c || d); //false
// alert(a || c); //abc
alert(b || c); //true
</script>
</head>
<body>
</body>
</html>2.7、数组
定义数组的格式：
var 数组名 = []; //空数组
var 数组名 = [1,‘abc’,true]; //定义数组同时赋值元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr = []; //定义一个空数组
// alert(arr.length); //0
arr[0] = 12;
// alert(arr[0]); //12
// alert(arr.length); //1
//JavaScript语言中的数组，只要通过数组下表赋值，那么最大的下标值就会自动的给数组做扩容操作。
arr[2] = "abc";
// alert(arr[2]); //"abc"
// alert(arr.length); //3
// alert(arr[1]); //undefined
//数组遍历
// for (var i = 0; i < arr.length; i++){
// alert(arr[i]);
// }
var arr2 = [true, 1];
for(var i = 0;i < arr2.length;i++){
alert(arr2[i]);
}
</script>
</head>
<body>
</body>
</html>2.8、函数
2.8.1、函数的两种定义方式
2.8.1.1、方式一：使用function关键字来定义
格式：
function 函数名（参数名称）{
函数体；
}在javaScript语言中，定义带有返回值的函数需要在函数体中使用return语句返回。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//定义一个无参函数
function fun(){
alert("无参函数fun()被调用了");
}
//函数调用才会执行
// fun();
//定义一个有参函数
function fun2(a, b){
alert("有参函数fun2()被调用了，a = " + a + ", b = " + b);
}
// fun2(12, "abc");
//定义带有返回值类型的函数
function sum(num1, num2){
var result = num1 + num2;
return result;
}
alert(sum(100,150));
</script>
</head>
<body>
</body>
</html>2.8.1.2、方式二
格式如下：
var 函数名 = function(形参列表){
函数体;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var fun = function (){
alert("无参函数")
}
// fun();
var fun2 = function (a, b){
alert("有参函数a = " + a + ", b = " + b);
}
// fun2(5, "hhh");
var fun3 = function (num1, num2){
return num1 + num2;
}
alert(fun3(12,21));
</script>
</head>
<body>
</body>
</html>2.8.2、关于函数重载的说明
JS不允许函数重载，函数重载会覆盖之前的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun(){
alert("无参函数fun()");
}
function fun(a, b) {
alert("有参函数fun(a, b)");
}
fun(); //有参函数fun(a, b)
</script>
</head>
<body>
</body>
</html>2.8.3、函数的 arguments 隐形参数（只在 function 内）
在function函数中不需要定义，但却可以直接用来获取所有参数的变量，我们叫他隐形参数。
隐形参数和java的可变长参数类似。可变长参数是一个数组
js中的隐形参数操作类似数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun(a){
// alert(arguments.length);
// alert(arguments[0]);
// alert(arguments[1]);
// alert(arguments[2]);
// alert(arguments[3]);
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
alert("a = "+a);
alert("无参函数fun()");
}
// fun(1,"ad",true);
//要求：编写一个函数，用于计算所有参数相加的和并返回
var sum = function (num1, num2){
var result = 0;
for(var i = 0; i < arguments.length; i++){
if(typeof(arguments[i]) == "number") {
result += arguments[i];
}
}
return result;
}
alert(sum(1,2,"abc",3,4,5));
</script>
</head>
<body>
</body>
</html>2.9、JS中的自定义对象
2.9.1、Object形式的自定义对象
对象的定义：
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名=值 //定义一个属性
变量名.函数名 = function(){} //定义一个函数对象的访问：
变量名.属性/变量名.函数名();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//对象的定义
var obj = new Object();
obj.name = "杰哥";
obj.age = 18;
obj.fun = function (){
alert("姓名： " + this.name + ", 年龄： " + this.age);
}
//对象的访问
// alert(obj.age);
// alert(obj.name);
obj.fun();
</script>
</head>
<body>
</body>
</html>2.9.2、{}花括号形式的自定义对象
对象的定义：
var 变量名 = { //空对象
属性：值， //定义一个属性
属性：值， //定义一个属性
函数名：function（）{}//定义一个函数
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//对象的定义
var obj = {
name:"杰哥",
age:18,
fun:function (){
alert("姓名： " + this.name + ", 年龄： " + this.age);
}
}
//对象的访问
alert(obj.name);
alert(obj.age);
obj.fun();
</script>
</head>
<body>
</body>
</html>2.10、JS中的事件
1、什么是事件？事件是电脑输入设备与页面进行交互的响应。
2、常用的事件：
- onload加载完成事件： 页面加载完之后，常用于做页面js代码初始化操作
- onclick单击事件： 常用于按钮的点击响应操作
- onblur失去焦点事件： 常用于输入框失去焦点后验证其输入内容是否合法。
- onchange内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
- onsubmit表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
3、事件的注册（绑定）：就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或绑定。
4、事件的注册又分为静态注册和动态注册两种：
- 静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，这种方式叫静态注册。
- 动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码，叫动态注 册。
5、动态注册的基本步骤：
① 获取标签对象
②标签对象.事件名 = function() {}
2.10.1、onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//onload事件的方法
function onloadFun(){
alert("静态注册onload事件所有的代码");
}
//onload事件动态注册，是固定写法
window.onload = function (){
alert("动态注册的onload事件");
}
</script>
</head>
<!--静态注册onload事件
onload事件是浏览器解析完页面之后就会自动触发的事件
-->
<!--<body onload="onloadFun()">-->
<body>
</body>
</html>2.10.2、onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun(){
alert("静态注册onclick事件");
}
/*动态注册onclick事件*/
window.onclick = function (){
//1.获取标签对象
/**
* document是JavaScript语言提供的一个对象（文档）
* getElementById：通过id属性获取标签对象
* */
var btnonj = document.getElementById("btn01");
//2.通过标签对象.事件名 = function(){}
btnonj.onclick = function (){
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="onclickFun()">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>2.10.3、onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册onblur事件
function onblurFun(){
//console是控制台对象，有JavaScript语言提供，专门向浏览器控制器打印输出，用于测试
//log()是打印的方法
console.log("静态注册onblur事件");
}
//动态注册onblur事件
window.onblur = function (){
//1.获取标签对象
let passwordObj = document.getElementById("password");
//2.通过标签对象.事件名 = function(){}
passwordObj.onblur = function (){
console.log("动态态注册onblur事件");
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"><br/>
密码：<input type="text" id="password"><br/>
</body>
</html>2.10.4、onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册onchange事件
function onchangeFun(){
alert("国籍静态注册改变");
}
//动态注册onchange事件
window.onchange = function (){
//1.获取标签对象
var selObj = document.getElementById("sel01");
//2.通过标签对象.事件名 = function(){}
selObj.onchange = function (){
alert("国籍动态注册改变");
}
}
</script>
</head>
<body>
请选择你的国籍：
<!--静态注册onchange事件-->
<select onchange="onchangeFun()">
<option>--请选择你的国籍--</option>
<option>中国</option>
<option>俄罗斯</option>
<option>印度</option>
</select>
<br/>
请选择你的国籍：
<!--动态注册onchange事件-->
<select id="sel01">
<option>--请选择你的国籍--</option>
<option>中国</option>
<option>俄罗斯</option>
<option>印度</option>
</select>
</body>
</html>2.10.5、onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册onsubmit事件
function onsubmitFun(){
alert("静态注册onsubmit事件-----发现不合法");
return false
}
//动态注册onsubmit事件
window.onsubmit = function (){
//1.获取标签对象
var formObj = document.getElementById("form01");
//2.通过标签对象.事件名 = function(){}
formObj.onsubmit = function (){
alert("动态注册onsubmit事件-----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--onsubmit="return false"可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>2.11、DOM模型
DOM 全称是Document Object Model文档对象模型。就是把文档中的标签，属性，文本，转换成对象来管理。
2.11.1、Document对象
Document对象的理解：
- Document它管理了所有的HTML文档内容。
- document他是一种树形结构的文档，有层级关系
- 它让我们把所有的标签都对象化
- 我们可以通过document访问所有的标签对象。
2.11.2、正则表达式regexp
语法：
var patt=new RegExp(pattern,modifiers);
//或者更简单的方式
var patt=/pattern/modifiers; - pattern（模式） 描述了表达式的模式
- modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
2.11.2.1、修饰符
2.11.2.2、方括号
2.11.2.3、元字符
2.11.2.4、量词
2.11.3、Document对象中的方法介绍
①document.getElementById(elementId)：返回对拥有id的第一个对象的引用。通过标签id属性查找标签dom对象，elementId是标签的id属性值
②document.getElementsByName(elementName)：返回带有指定名称的对象集合。通过标签的name属性查找标签dom对象，elementName标签的name属性值
③document.getElementsByTagName(tagname)：返回带有指定标签名的对象集合。通过标签名查找标签dom对象，tagname是标签名
④document.createElement(tagname)：通过给定的标签名，创建一个标签对象。tagname是要创建的标签名
注：document对象的三个查询方法的优先级
getElementById > getElementsByName > getElementsByTagName
以上三个一定要在页面加载完成之后执行，才能查询到标签对象。
2.11.3.1、getElementById
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
//验证规则：必须由字母、数字、下划线组成，且长度为5到12为
function onclickFun(){
//1.获取标签对象
var usernameObj = document.getElementById("username");
// alert(usernameObj); //[object HTMLInputElement] 它就是dom对象
// alert(usernameObj.id); //username
// alert(usernameObj.type); //text
//获取输入框中的内容
var usernameText = usernameObj.value;
var usernameSpanObj = document.getElementById("usernameSpan");
//innerText：表示起始标签和结束标签中的内容，可读可写
// alert(usernameSpanObj.innerText);
//验证：使用正则表达式
var patt = /^\w{5,12}$/;
//test()方法用于测试某个字符串是否匹配规则，匹配返回true，否则返回false
if(patt.test(usernameText)){
// alert("用户名合法");
// usernameSpanObj.innerText = "用户名合法";
usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"16\" height=\"16\">";
}else{
// alert("用户名非法");
// usernameSpanObj.innerText = "用户名不合法";
usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"16\" height=\"16\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value=""/>
<span id="usernameSpan"></span>
<button onclick="onclickFun()">校验</button>
</body>
</html>2.11.3.2、getElementsName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll(){
//让所有复选框选中
//document.getElementsByName()根据指定的name属性查询返回多个标签对象集合，操作跟数组一样，且每个元素都是dom对象
var hobbies = document.getElementsByName("hobby");
// alert(hobbies); //[object NodeList]
//checked表示复选框的选中状态，选中是true，不选中是false,且可读可写
// alert(hobbies[0].checked);
for(var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
//全不选
function checkNo(){
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
//反选
function checkReverse(){
var hobbies = document.getElementsByName("hobby");
for(var i = 0; i < hobbies.length; i++){
hobbies[i].checked = !hobbies[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">Javascript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>2.11.3.3、getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll(){
//document.getElementsByTagName()按照指定标签名来进行查询并返回集合，集合中都是dom对象，集合中元素顺序是在HTML页面中从上到下的顺序
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">Javascript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>2.11.3.4、createElement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
//使用js代码创建html标签，并显示在页面上<div>哈哈哈哈<div>
var divObj = document.createElement("div");//在内存中 <div></div>
//方法一
// divObj.innerText = "哈哈哈哈";// <div>哈哈哈哈</div>，还是在内存中
// //添加子元素
//方法二
var textNodeObj = document.createTextNode("哈哈哈哈");
divObj.appendChild(textNodeObj);
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>2.11.4、节点的常用属性和方法
节点就是标签对象
方法：
通过具体的元素节点调用
getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
appendChild(oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点
属性：
childNodes属性，获取当前结点的所有子节点，空格和回车也算一个
firstChild属性，获取当前结点的第一个子节点
lastChild属性，获取当前结点的最后一个子节点
parentNode属性，获取当前结点的父节点
nextSibling属性，获取当前结点的下一个节点
previousSibling属性，获取当前结点的上一个节点
className属性，获取或设置标签的class属性值
innerHTML属性，表示获取/设置起始标签和结束标签中的内容
innerText属性，表示获取/设置起始标签和结束标签中的文本
innerText属性和innerHTML属性的区别
3、JQuery
3.1、JQuery介绍
1、什么是jQuery？
JQuery就是JavaScript和查询（Query）,它是辅助JavaScript开发的js类库
2、jQuery核心思想：
write less , do more，所以实现了很多浏览器的兼容问题。
3、jQuery流行程度：
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
4、jQuery优点：
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Aiax以及其他功能
3.2、JQuery初体验
常见问题
-
使用jQuery一定要引入jQuery库吗？
必须引入
-
jQuery中的$到底是什么？
是一个函数
-
怎么为按钮添加点击响应函数的？
①使用jQuery查询到标签对象
②使用标签对象.click(function(){});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function (){
// var btnObj = document.getElementById("btnId");
// btnObj.onclick = function (){
// alert("JS原生的单击事件");
// }
// }
$(function (){ //表示页面加载完成之后，相当于onload事件window.onload = function(){}
var $btnObj = $("#btnId"); //表示按id查询标签对象
$btnObj.click(function (){ //绑定单机事件
alert("JQuery的单击事件");
})
})
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>3.3、JQuery核心函数
$是jQuery的核心函数，能完成jQuery很多功能，$()就是调用$这个函数
1、传入参数为[函数]时：
表示页面加载完成之后。相当于window.onload = function(){}
2、传入参数为[HTML字符串]时：
根据这个字符串创建元素节点对象，会对我们创建这个html标签对象
3、传入参数为[选择器字符串]时：
根据这个字符串查找元素结点对象
$("#id属性值")； id 选择器，根据id查询标签对象
$(“标签名”); 标签名选择器，可以根据指定的标签名查询标签对象
$(".class属性值"); 类型选择器，可以根据class属性查询标签对象
4、传入参数为[DOM对象]时：
将DOM对象包装为jQuery对象返回
3.4、jQuery对象和dom对象区分
3.4.1、什么是jQuery对象？什么是dom对象？
Dom对象
- 通过getElementById()查询出来的标签对象是Dom对象
- 通过getElementsByName()查询出来的标签对象是Dom对象
- 通过getElementsByTagName()查询出来的标签对象是Dom对象
- 通过createElement()方法创建的对象，是Dom对象
- Dom对象alert出来的效果是：[object HTML标签名Element]
jQuery对象
- 通过jQuery提供的API创建的对象，是jQuery对象
- 通过jQuery包装的Dom对象也是jQuery对象
- 通过jQuery提供的API查询到的对象，是jQuery对象
- jQuery对象alert出来的效果是：[object Object]
3.4.2、jQuery对象的本质
JQuery对象的本质是dom对象的数组 + jQuery提供的一系列功能函数
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//testDiv.css("color","red")
//testDiv.style.color = "blue";
var arr = [12,"abc",true];
var $btns = $("button");
for (var i = 0; i < $btns.length; i++) {
alert($btns[i]); //[object HTMLButtonElement]
}
});
</script>
</head>
<body>
<div id="testDiv">Atguigu is Very Good!</div>
<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>
</html>3.4.3、jQuery对象和Dom对象使用区别
jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法
3.4.4、jQuery对象和Dom对象互转
1、Dom对象转化为jQuery对象
①先有dom对象
②$( dom对象 ) 就可以转化为 JQuery对象
2、jQuery对象转化为Dom对象
①先有JQuery对象
②JQuery对象[ 下标 ]取出相应的dom对象
3.5、JQuery选择器
3.5.1、基本选择器
#id选择器:根据id查找标签对象
.class选择器：根据class查找标签对象
element选择器：根据标签名查找标签对象
*选择器：表示任意的所有元素
selector1,selector2组合选择器：合并选择器1，选择器2 的结果并返回，顺序为页面从上到下
注意：p.myClass表示标签名为p，class类型为myClass
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function (){
//css()方法可以设置和获取样式
$("#one").css("background-color", "#bbffaa");
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function (){
$(".mini").css("background-color", "#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function (){
$("div").css("background-color", "#bbffaa");
});
//4.选择所有的元素
$("#btn4").click(function (){
$("*").css("background-color", "#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function (){
$("span,#two").css("background-color", "#bbffaa");
});
})
</script>
</head>
<body>
<!-- <div>
<h1>基本选择器</h1>
</div> -->
<input type="button" value="选择 id 为 one 的元素" id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="选择 所有的元素" id="btn4" />
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>
3.5.2、层级选择器
ancestor descendant：在给定的祖先元素下匹配所有的后代元素
parent > child：在给定的父元素下匹配所有的子元素
prev + next：匹配所有紧接在 prev 元素后的 next 元素
prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//$(function(){})的全写
$(document).ready(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one + div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two ~ div").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
<h1>层级选择器:根据元素的层级关系选择元素</h1>
ancestor descendant ：
parent > child ：
prev + next ：
prev ~ siblings ：
</div> -->
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>
3.5.3、过滤选择器
3.5.3.1、基本过滤器
:first 获取第一元素个
:last 选择最后一个
:not 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus 触发每一个匹配元素的focus事件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(document).ready(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.选择最后一个 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.选择class不为 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.选择索引值为偶数的 div 元素
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.选择索引值为奇数的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.选择索引值为大于 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.选择索引值为等于 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.选择索引值为小于 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.选择所有的标题元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.选择当前正在执行动画的所有元素
$("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
//10.选择没有执行动画的最后一个div
$("#btn11").click(function(){
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated
</div> -->
<input type="button" value="选择第一个 div 元素" id="btn1" />
<input type="button" value="选择最后一个 div 元素" id="btn2" />
<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
<input type="button" value="选择所有的标题元素" id="btn9" />
<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
<h3>基本选择器.</h3>
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
3.5.3.2、内容过滤器
:contains：匹配包含给定文本的元素
:empty：匹配所有不包含子元素或者文本的空元素
:has(selector)：匹配含有选择器所匹配的元素的元素
:parent：匹配含有子元素或者文本的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
/**
:contains(text)
:empty
:has(selector)
:parent
*/
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function(){
$("div:contains('di')").css("background", "#bbffaa");
});
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
$("div:has(.mini)").css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
3.5.3.3、属性过滤器
[attribute] 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。（没有属性也能匹配）
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结束的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[atrrSel1] [attrSel2] [attrSelN] 复合属性选择器，需要同时满足多个条件时使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div,span,p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/**
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
*/
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
<input type="button"
value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
<input type="button"
value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
id="btn7" />
<input type="button"
value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
<br>
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display: none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" value="123456789"
size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
3.5.3.4、表单过滤器及表单对象属性过滤器
表单过滤器：
:input 匹配所有的input，textarea，select和button元素
:text 表示匹配所有的单行文本框
:password 表示匹配所有的密码框
:radio 表示匹配所有的单选框
:checkbox 表示匹配所有的复选框
:submit 表示匹配所有的提交按钮
:image 表示匹配所有的图片
:reset 表示匹配所有的重置按钮
:button 表示匹配所有的按钮
:file 表示匹配所有的文件域
:hidden 表示匹配所有的隐藏域
表单对象属性过滤器：
:enabled： 所有可用的
:disabled： 所有不可用的
:checked： 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected： 匹配所有选中的option元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
//val()可以操作表单项的value属性值，可读可写
$(":text:enabled").val("第一个按钮");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$(":text:disabled").val("第二个按钮");
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
alert($(":checkbox:checked").size())
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
//获取全部选中的复选框标签对象
var $checkboxes = $(":checkbox:checked");
//each()方法是JQuery对象提供的用来遍历元素的方法
//在遍历的function函数中，有一个this对象，这个this对象就是当前遍历到的dom对象
$checkboxes.each(function (){
alert(this.value);
})
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
//获取选中的标签对象
var $options = $("select option:selected");
//遍历、获取option标签中的文本内容
$options.each(function (){
alert(this.value);
})
});
})
</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
<br>
多选框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">辽宁</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>辽宁</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>
3.6、JQuery元素筛选
eq() 获取给定索引的元素，其功能与:eq() 一样
first() 获取第一个元素 ，其功能与 :first 一样
last() 获取最后一个元素，其功能与 :last 一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要匹配就返回true
has(exp) 返回包含有匹配选择器的元素的元素 ，其功能与 :has一样
not(exp) 删除匹配选择器的元素 ，其功能与:not一样
children(exp) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合 ，其功能与 parent>child一样
find(exp) 返回匹配给定选择器的后代元素，其功能与 ancestor descendant 一样
next() 当前元素的下一个兄弟元素，其功能与 prev + next 功能一样
nextAll() 返回当前元素后面所有的兄弟元素，其功能与 prev ~ siblings 功能一样
nextUntil() 返回当前元素到指定匹配的元素为止（开区间）的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUntil(exp) 返回当前元素到指定匹配的元素位置的前面元素
siblings(exp) 返回所有兄弟元素
add() 把add匹配的选择器的元素添加到当前jQuery对象中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM查询</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//(1)eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
//first() 选取第一个元素
$("div").first().css("background-color","#bfa");
});
//(3)last()选择最后一个 div 元素
$("#btn3").click(function(){
//last() 选取最后一个元素
$("div").last().css("background-color","#bfa");
});
//(4)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
//filter()过滤传入的是选择器字符串
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is()判断#one是否为:empty或:parent
$("#btn5").click(function(){
//is用来检测jq对象是否符合指定的选择器
alert( $("#one").is(":empty") );
});
//(6)has()选择div中包含.mini的
$("#btn6").click(function(){
//has(selector) 选择器字符串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not()选择div中class不为one的
$("#btn7").click(function(){
//not(selector) 选择不是selector的元素
$("div").not(".one").css("background-color","#bfa");
});
//(8)children()在body中选择所有class为one的div子元素
$("#btn8").click(function(){
//children() 选出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
});
//(9)find()在body中选择所有class为mini的div元素
$("#btn9").click(function(){
//find() 选出所有的后代元素
$("body").find("div.mini").css("background-color","#bfa");
});
//(10)next() #one的下一个div
$("#btn10").click(function(){
//next() 选择下一个兄弟元素
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one后面所有的span元素
$("#btn11").click(function(){
//nextAll() 选出后面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one和span之间的元素
$("#btn12").click(function(){
//
$("#one").nextUntil("span").css("background-color","#bfa");
});
//(13)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two的上一个div
$("#btn14").click(function(){
//prev()
$("#two").prev("div").css("background-color","#bfa");
});
//(15)prevAll() span前面所有的div
$("#btn15").click(function(){
//prevAll() 选出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa");
});
//(16)prevUntil() span向前直到#one的元素
$("#btn16").click(function(){
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa");
});
//(17)siblings() #two的所有兄弟元素
$("#btn17").click(function(){
//siblings() 找到所有的兄弟元素，包括前面的和后面的
$("#two").siblings().css("background-color","#bfa");
});
//(18)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two").css("background-color","#bfa");
});
});
</script>
</head>
<body>
<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
<input type="button" value="first()选择第一个 div 元素" id="btn2" />
<input type="button" value="last()选择最后一个 div 元素" id="btn3" />
<input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
<input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
<input type="button" value="has()选择div中包含.mini的" id="btn6" />
<input type="button" value="not()选择div中class不为one的" id="btn7" />
<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
<input type="button" value="next()#one的下一个div" id="btn10" />
<input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
<input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
<input type="button" value="parent().mini的父元素" id="btn13" />
<input type="button" value="prev()#two的上一个div" id="btn14" />
<input type="button" value="prevAll()span前面所有的div" id="btn15" />
<input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
<input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
<h3>基本选择器.</h3>
<br /><br />
文本框<input type="text" name="account" disabled="disabled" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other"><b>class为mini,title为other</b></div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<span id="span1">^^span元素 111^^</span>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span2">^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
3.7、JQuery的属性操作
html([val|fn]) ：可以设置和获取起始标签和结束标签之间的内容。 跟dom属性中的innerHTML一样。会把内容中的标签解析为html标签并按照对应效果输出
text([val|fn]) ：可以设置和获取起始标签和结束标签之间的文本。 跟dom属性中的innerTEXT一样。不会解析文本中的内容，直接接收或输出成本
val([val|fn|arr]) ：可以设置和获取表单项的value属性值。 跟dom属性value一样
3.7.1、JQuery的属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//html()不传参数是获取，传递参数是设置
// alert($("div").html()); //获取
// $("div").html("<h1>我是div的标题 1<h1/>"); //设置
//text()不传参数是获取，传递参数是设置
// alert($("div").text());
// $("div").text("<h1>我是div的标题 1<h1/>");
//val()不传参数是获取，传递参数是设置
$("button").click(function (){
alert($("#username").val());
$("#username").val("你好");
});
})
</script>
</head>
<body>
<div>我是div标签 <span>我是div中的span</span></div>
<input type="text" name="username" id="username" />
<button>操作输入框</button>
</body>
</html>3.7.2、val方法同时设置多个表单项的选中状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//val方法同时设置多个表单项的选中状态
$(function (){
// $(":radio").val(["radio2"]); //设置单选选中radio2
// $(":checkbox").val(["checkbox1","checkbox3"]);//批量操作复选框的选中状态
// $("#multiple").val(["mul1","mul3","mul4"]);
// $("#single").val(["sin2"]);
//以上语句一次性操作
//$里的内容和val里的内容顺序不影响结果
$(":radio,:checkbox,#multiple,#single").val(["radio2","checkbox1","mul3","mul4","sin2","checkbox3","mul1"]);
});
</script>
</head>
<body>
单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多选 ：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选 ：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>3.7.3、属性
attr() 设置或返回被选元素的属性值。，不推荐操作checked、readOnly、selected、diable等等。attr() 方法还可以操作非标准的属性，比如abc,bbj等。
prop() 获取在匹配的元素集中的第一个元素的属性值。，只推荐操作checked、readOnly、selected、diable等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//attr
// alert($(":checkbox:first").attr("name")); //获取
// $(":checkbox:first").attr("name", "abc"); //设置
// alert($(":checkbox").attr("checked")); //返回undefined
alert($(":checkbox").prop("checked")); //返回true / false
$(":checkbox").prop("checked","true"); //设置选中
$(":checkbox:first").attr("abc","abcValue");
alert($(":checkbox:first").attr("abc"));
});
</script>
</head>
<body>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
</body>
</html>3.8、DOM的增删改
内部插入：
appendTo()：a.appendTo(b) 把a插入到b的子元素的末尾，成为最后一个子元素。这里a之前存在的位置会删除，然后放入新的位置中，相当于 剪切，复制。
prependTo()：a.prependTo(b) 把a插入到b的子元素的前面，成为第一个子元素。这里a之前存在的位置会删除，然后放入新的位置中，相当于 剪切，复制。
外部插入：
insertAfter()：a.insertAfter(b) 得到ba
insertBefore()：a.insertBefore(b) 得到ab
替换：
replaceWith()：a.replaceWith(b); 用b替换a，将所有的b替换成一个a
replaceAll() ：a.replaceAll(b); 用a替换所有b
删除：
remove() ：a.remove(); 删除所有的a标签
empty() ：a.empty(); 清空标签a里的内容
3.9、JQuery练习
3.9.1、两个复选框从左到右，从右到左
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//第一个按钮【选中添加到右边】
$(":button:eq(0)").click(function (){
$("select:eq(0) option:selected").appendTo($("select:eq(1)"))
});
//第二个按钮【全部添加到右边】
$(":button:eq(1)").click(function (){
$("select:eq(0) option").appendTo($("select:eq(1)"));
});
//第三个按钮【选中删除到左边】
$(":button:eq(2)").click(function (){
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
//第四个按钮【全部删除到左边】
$(":button:eq(3)").click(function (){
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>3.9.2、动态添加删除表格记录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//创建一个用于删除的函数
var deleteFun = function (){
//在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
//a标签的父元素是<td>，<td>的父元素是<tr>，对a标签取两次父元素就是该行
var $trObj = $(this).parent().parent();
//
var name = $trObj.find("td:first").text();
//confirm()是JavaScript语言提供的一个确认提示框函数，传入什么参数就提示什么
//点击确定返回true，点击取消返回false
if(confirm("是否确定删除[" + name + "]？")){
$trObj.remove();
}
//return false可以阻止元素的默认行为，让超链接不跳转
return false;
}
//给提交按钮绑定单击事件
$("#addEmpButton").click(function (){
//获取各个输入框的内容
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
//创建一个行标签对象
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
"</tr>");
//将数据添加到显示数据的表格中
$trObj.appendTo($("#employeeTable"));
//给添加的行的a标签绑定单击事件
$trObj.find("a").click(deleteFun);
});
//给删除的a标签绑定单击事件
$("a").click(deleteFun);
/*
* 在调用函数时，如果有使用this，注意click的this和函数里的this是不一样的
* $("a").click(deleteFun());这种写法会将函数的返回值传给click，导致出错
* */
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
3.10、CSS样式操作
addClass() ：添加样式。
removeClass()： 删除样式。
toggleClass() ：有就删除，没有就添加样式。
offset()： 获取和设置元素的坐标。（会根据浏览器的大小位置改变）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个类
$divEle.addClass("redDiv blueBorder");
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
$divEle.removeClass("redDiv");
});
$('#btn03').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass("blueBorder");
});
$('#btn04').click(function(){
//offset() - 返回第一个匹配元素相对于文档的位置。
var pos = $divEle.offset();
// console.log(pos);
$divEle.offset({
top:100,
left:50
});
});
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="toggleClass()" id="btn03"/>
<input type="button" value="offset()" id="btn04"/>
</div>
</td>
</tr>
</table>
<br /> <br />
<br /> <br />
</body>
</html>3.11、JQuery动画
3.11.1、理论知识
基本动画
show() 将隐藏的元素显示。
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
淡入淡出动画
fadeln() 淡入（可见）
fadeOut() 淡出（消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0透明，1完全可见，0.5半透明
fadeToggle() 淡入/淡出之间切换
以上动画方法都是可以添加参数的
第一个参数是动画执行时长，以毫秒为单位
第二个参数是动画的回调函数（动画完成后自动调用的函数）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
基本
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[spe],opa,[eas],[fn]])
fadeToggle([speed,[eas],[fn]])
*/
$(function(){
//显示 show()
$("#btn1").click(function(){
$("#div1").show(1000, function (){
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function(){
$("#div1").hide(1000, function (){
alert("hide动画完成");
});
});
//实现显示与隐藏交替
// var abc = function (){
// $("#div1").toggle(1000,abc);
// }
// abc();
//切换 toggle()
$("#btn3").click(function(){
$("#div1").toggle(1000, function (){
alert("toggle动画完成");
});
});
//淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(1000,function (){
alert("fadeIn完成");
});
});
//淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(1000,function (){
alert("fadeOut完成");
});
});
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo(1000,0.5,function (){
alert("fadeTo完成");
});
});
//淡化切换 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle(1000,function (){
alert("fadeToggle完成");
});
});
})
</script>
</head>
<body>
<table style="float: left;">
<tr>
<td><button id="btn1">显示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隐藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切换fadeToggle()</button></td>
</tr>
</table>
<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
3.11.2、练习
品牌展示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
//基本初始状态
$("li:gt(5):not(:last)").hide();
//给功能按钮绑定单击事件
$("div div a").click(function (){
//让隐藏的品牌显示
$("li:gt(5):not(:last)").toggle();
//判断后部分的品牌是否是隐藏
if($("li:gt(5):not(:last)").is(":hidden")){
//品牌隐藏的状态，功能按钮显示【显示全部品牌】，角标向下 class = showmore
$("div div a span").text("显示全部品牌");
$("div div").removeClass();
$("div div").addClass("showmore");
//去掉高亮
$("li:contains('索尼')").removeClass("promoted");
}else{
//品牌可见的状态，功能按钮显示【显示精品品牌】，角标向上 class = showless
$("div div a span").text("显示精品品牌");
$("div div").removeClass();
$("div div").addClass("showless");
//加高亮
$("li:contains('索尼')").addClass("promoted");
}
return false;
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
3.12、JQuery事件操作
3.12.1、$(function(){});和window.onload = function(){}有什么区别？
触发的顺序
- jQuery页面加载完成之后先执行
- 原生js的页面加载完成之后后执行
分别在什么时候触发？
- jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会立马执行。
- 原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
执行的次数？
- 原生js的页面加载完成之后，只会执行最后一次赋值函数
- jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行。
3.12.2、jQuery中其它的事件处理方法
click()：它可以绑定单击事件，以及触发单击事件（有function是绑定事件，不传function是单击事件）
mouseover()：鼠标移入事件，可绑定可触发
mouseout()：鼠标移出事件
bind()：可以给元素一次性绑定一个或多个事件。
one()：使用上跟bind一样，但是one方法绑定的事件只会只会响应一次（每个事件一次）
live()：也是用来绑定事件的。它可以用来绑定选择器匹配的左右元素的事件。哪怕这个元素是后面动态创建出来的也有效。
unbind()：跟bind方法相反的操作，解除事件的绑定，若没有参数则全部解绑
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.通常绑定事件的方式
//2.jQuery提供的绑定方式：bind()函数
//3.合并“鼠标移入”和“鼠标移出”事件
//4.合并单击事件
//5.切换元素可见状态
//6.只绑定一次
$(function (){
// $("h5").click(function (){//传function是绑定事件
// alert("h5单击事件 == click方法绑定");
// });
//上面的绑定对新建的h5没用
// $("<h5 class=\"head\">什么是jQuery?</h5>").appendTo($("#panel"));
//使用live绑定的单击事件
$("h5").live("click",function (){
alert("live绑定的单击事件")
});
//live绑定的事件对新建的h5有用
$("<h5 class=\"head\">什么是jQuery?</h5>").appendTo($("#panel"));
// $("button").click(function (){
// $("h5").click();//不传function是单击事件
// })
// //鼠标移入
// $("h5").mouseover(function (){
// console.log("你进来了");
// });
// //鼠标移出
// $("h5").mouseout(function (){
// console.log("你出去了");
// });
//使用bind绑定事件
// $("h5").bind("click mouseover mouseout",function (){
// console.log("这是bind绑定的事件");
// })
//使用bind绑定事件
// $("h5").one("click mouseover mouseout",function (){
// console.log("这是one绑定的事件");
// })
//unbind解绑事件
// $("h5").unbind("click mouseover");
});
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
<button>按钮</button>
</div>
</body>
</html>
3.12.3、事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同时也被传递到了父元素的事件里去响应。
如何阻止事件冒泡？
在事件函数体内，return false;可以阻止事件的冒泡传递。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#content").click(function (){
alert("我是content");
});
$("span").click(function (){
alert("我是span");//若没有return false;那么点击后content和span都会响应
return false;//添加之后只相应span的点击事件
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<br><br>
<a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
</html>
3.12.4、javaScript事件对象
事件对象是封装有触发的事件信息的一个javaScript对象。
如何获取javaScript事件对象呢？
在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名，我们习惯取名为event。这个event就是javaScript传递参数事件处理函数事件对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//1.原生javascript获取 事件对象
// window.onload = function (){
// document.getElementById("areaDiv").onclick = function (event){
// console.log(event);
// }
// }
//2.JQuery代码获取 事件对象
// $(function (){
// $("#areaDiv").click(function (event){
// console.log(event);
// });
// });
//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$(function (){
$("#areaDiv").bind("mouseover mouseout",function (event){
if(event.type == "mouseover"){
console.log("鼠标移入");
}else if(event.type == "mouseout"){
console.log("鼠标移出");
}
});
});
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>3.13、练习：图片跟随
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event){
if(event.type == "mouseover"){
$("#showBig").show();
}else if(event.type == "mouseout"){
$("#showBig").hide();
}else if(event.type == "mousemove"){
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
});
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>4、XML
4.0、遇到的问题
4.0.1、xml在IDEA用浏览器打开报没有根目录，而在外部打开没有报错
旧版本参考：在idea里用浏览器打开xml文件报没有根标签，但不用idea，正常用浏览器打开就没问题，怎么解决在idea打开xml文件的问题呢？-Java-CSDN问答
2021版如下图，reload page in browser 的on save改为disabled
4.1、XML简介
1、什么是XML?
xml是可扩展标记语言。
2、XML的作用
- 用来保存数据，而且这些数据具有自我描述性
- 它还可以作为项目或模块的配置文件
- 还可以作为网络传输数据的格式（JSON为主）
4.2、XML语法
4.2.1、文档声明
<?xml version="1.0" encoding="utf-8" ?>
<!--
<?xml version="1.0" encoding="utf-8" ?>是xml文件的声明
version="1.0" version 表示xml的版本
encoding="utf-8" encoding 表示xml文件本身的编码
-->
<books><!--books表示多个图书信息-->
<book sn="SN12346786"><!--bool表示一个图书信息 sn属性表示图书序列号-->
<name>时间简史</name><!--name标签表示书名-->
<author>霍金</author><!--author表示作者-->
<price>75</price><!--price表示图书价格-->
</book>
<book sn="SN1231564"><!--bool表示一个图书信息 sn属性表示图书序列号-->
<name>时间管理大师</name><!--name标签表示书名-->
<author>小猪</author><!--author表示作者-->
<price>10086</price><!--price表示图书价格-->
</book>
</books>
4.2.2、XML注释
xml注释和html一样：<!-- -->
4.2.3、元素（标签）
回忆html标签：
- 格式：<标签名>封装数据</标签名>
- 单标签：<标签名/> < br/>换行 < hr/>水平线
- 双标签：<标签名>封装数据</标签名>
- 标签名大小写不敏感
- 标签有属性，有基本属性和事件属性
- 标签要闭合（不闭合，html中不会报错。但我们要养成良好的书写习惯，闭合标签）
什么是xml元素？
xml元素指的是从（且包括）开始标签直到（且包括）结束标签的部分。
元素可包含其他元素、文本或者两者的混合物，元素也可以拥有属性。
元素是指从开始标签到结束标签的内容。
元素命名规则
1、名称可以含字母、数字以及其他字符
2、名称不能以数字或者标点符号开始
3、名称不能以字符“xml”（或者“XML”、“Xml”）开始（其实可以，只是不建议这么做）
4、名称不能包含空格
xml中的元素（标签）也分为单标签和双标签：
单标签：
格式：<标签名 属性=“值” 属性=“值“…/>
双标签：
格式：<标签名 属性=”值“ 属性=”值“…>文本数据或子标签</标签名>
4.2.4、属性
xml的标签属性和html的标签属性是非常类似的，属性可以提供元素的额外信息
在标签上可以书写属性：一个标签上可以书写多个属性。每个属性值必须使用引号引起来
4.2.5、语法规则
1、所有xml元素都必须有关闭标签
2、xml标签对大小写敏感
3、xml必须正确的嵌套
4、xml文档必须有根元素
根元素就是顶级元素
没有父标签的元素，叫顶级元素。
根元素是没有父标签的顶级元素，而且是唯一一个
5、xml的属性值须加引号
6、xml中的特殊字符
< <
> >
7、文本区域（CDATA区）
CDATA语法可以告诉解析器CDATA里的文本内容，只是纯文本，不需要xml语法解析。
IDEA快捷键：打出一个大写的C然后tab
CDATA格式：
<![CDATA[文本内容]]>
4.3、XML解析技术
xml可扩展的标记语言。
不管是html文件还是xml文件都是标记型文档，都可以使用dom技术来解析。
document对象表示的是整个文档（可以是html文档，也可以是xml文档）
早期JDK为我们提供了两种xml解析技术：DOM和Sax
DOM解析技术是W3C组织制定的，所有的编程语言都对这个解析技术使用了自己的标记语言的特点进行实现。Java对DOM技术解析标记也做了实现。
sun公司在JDK5版本对dom解析技术进行升级：SAX（Simple API for XML）
SAX 解析，它跟 W3C 制定的解析不太一样。它是以类似事件机制通过回调告诉用户当前正在解析的内容。是一行一行的读取 xml 文件进行解析的。
不会创建大量的 dom 对象。所以它在解析 xml 的时候，在内存的使用上和性能上。都优于 Dom 解析。
第三方的解析：
jdom在dom基础张进行了封装
dom4j又对jdom进行了封装
pull主要用在Android手机开发，是在跟sax非常类似都是事件机制解析xml文件
Dom4j是第三方的解析技术，我们需要使用第三方给我们提供好的类库才可以解析xml文件。
4.4、Dom4j类库的使用
由于dom4ij它不是sun公司的技术，而属于第三方公司的技术，我们需要使用dom4j就需要到dom4j官网下载dom4j的jar包。
4.4.1、dom4j目录介绍
- docs是文档目录
- lib目录它是dom4j需要依赖其他第三方类库
- src目录是第三方类库的源码目录
4.4.2、domj4编程步骤
第一步： 先加载 xml 文件创建 Document 对象
第二步：通过 Document 对象拿到根元素对象
第三步：通过根元素.elelemts(标签名); 可以返回一个集合，这个集合里放着。所有你指定的标签名的元素对象
第四步：找到你想要修改、删除的子元素，进行相应在的操作
第五步，保存到硬盘上
4.4.3、获取document对象
需要解析的xml文件：books.xml
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book sn="SN12341232">
<name>辟邪剑谱</name>
<price>9.9</price>
<author>班主任</author>
</book>
<book sn="SN12341231">
<name>葵花宝典</name>
<price>99.99</price>
<author>班长</author>
</book>
</books>
获取Document对象并封装为类
package xml解析;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.junit.Test;
import java.util.List;
/**
* @Author zhang
* @Date 2021/12/20 12:05
* @Version 1.0
*/
public class Domj4Test {
@Test
public void test1(){
//创建一个SAXReader输入流，读取xml配置文件，生成Document对象
SAXReader saxReader = new SAXReader();
try {
Document document = saxReader.read("src/books.xml");
System.out.println(document);//org.dom4j.tree.DefaultDocument@3fee9989 [Document: name src/books.xml]
} catch (DocumentException e) {
e.printStackTrace();
}
}
//读取books.xml文件生成book类
@Test
public void test2() throws DocumentException {
//1.读取books.xml文件
SAXReader saxReader = new SAXReader();
//在Junit测试中，相对路径是从模块名开始算
Document document = saxReader.read("src/books.xml");
//2.通过Document对象获取根元素
Element rootElement = document.getRootElement();
// System.out.println(rootElement);//org.dom4j.tree.DefaultElement@3fee9989 [Element: <books attributes: []/>]
//3.通过根元素获取book标签对象
//element()和elements()都是通过标签名查找子元素
List<Element> books = rootElement.elements("book");
//4.遍历，处理每个book标签转换为Book类
for (Element book : books) {
//asXML():把标签对象转化为标签字符串
// System.out.println(book.asXML());
Element nameElement = book.element("name");
// System.out.println(nameElement.asXML());
//getText() 可以获取标签中的文本内容
String nameText = nameElement.getText();
//elementText 直接获取指定标签名的内容
String priceText = book.elementText("price");
String authorText = book.elementText("author");
//获取属性值
String snValue = book.attributeValue("sn");
Book book1 = new Book(snValue, nameText, Double.parseDouble(priceText), authorText);
System.out.println(book1);
}
}
}
5、Tomcat
5.1、JavaWeb的概念
1、什么是JavaWeb
JavaWeb是指通过java语言编写可以通过浏览器访问的程序的总称。
JavaWeb是基于请求和响应来开发的。
2、什么是请求？
请求是指客户端给服务器发送数据，叫请求（request）
3、什么是响应？
响应是指服务器给客户端回传数据，叫响应（response）
4、请求和响应的关系？
请求和相应是成对出现的，有请求就有响应
5.2、Web的资源分类
web资源按实现的技术和呈现的效果的不同，又分为静态资源和动态资源两种
- 静态资源：html、css、js、txt、mp4视频、jpg图片
- 动态资源：jsp页面、servlet程序
5.3、常用的web服务器
Tomcat：由 Apache 组织提供的一种 Web 服务器，提供对 jsp 和 Servlet 的支持。它是一种轻量级的 javaWeb 容器（服务器），也是当前应用最广的 JavaWeb 服务器（免费）。
Jboss：是一个遵从 JavaEE 规范的、开放源代码的、纯 Java 的 EJB 服务器，它支持所有的 JavaEE 规范（免费）。
GlassFish： 由 Oracle 公司开发的一款 JavaWeb 服务器，是一款强健的商业服务器，达到产品级质量（应用很少）。
Resin：是 CAUCHO 公司的产品，是一个非常流行的服务器，对 servlet 和 JSP 提供了良好的支持， 性能也比较优良，resin 自身采用 JAVA 语言开发（收费，应用比较多）。
WebLogic：是 Oracle 公司的产品，是目前应用最广泛的 Web 服务器，支持 JavaEE 规范， 而且不断的完善以适应新的开发要求，适合大型项目（收费，用的不多，适合大公司）。
5.4、Tomcat服务器和Servlet版本对应关系。
官方说明：Apache Tomcat® - Which Version Do I Want?
5.5、Tomcat的使用
5.5.1、目录介绍
bin 专门用来存放Tomcat服务器的可执行程序
conf 专门用来存放Tomcat服务器的配置文件
lib 专门用来存放Tomcat服务器的jar包
logs 专门用来存放 Tomcat 服务器运行时输出的日志信息
temp 专门用来存放 Tomcdat 运行时产生的临时数据
webapps 专门用来存放部署的 Web 工程。
work 是 Tomcat 工作时的目录，用来存放 Tomcat 运行时 jsp 翻译为 Servlet 的源码，和 Session 钝化的目录。
5.5.2、启动Tomcat
5.5.2.1、方式一
找到Tomcat目录下的bin目录下的startup.bat文件，双击，就可以启动Tomcat服务器
测试：打开浏览器，在浏览器地址栏中输入以下地址测试：
- http://localhost:8080
- http://127.0.0.1:8080
- http://真实ip地址:8080
5.5.2.2、方式二
好处：可以看到错误信息
- 打开命令行
- cd到tomcat的bin目录下
- 输入命令：catalina run
5.5.3、停止tomcat
方法一：关闭tomcat窗口
方法二：把tomcat服务器窗口置为当前窗口，然后按快捷键Ctrl+C
方法三：找到tomcat的bin目录下的shutdown.bat文件，然后双击
5.5.4、修改tomcat的默认端口号
mysql默认端口号是3306
Tomcat:默认的端口号是8080
找到Tomcat目录下的conf目录，找到server.xml配置文件。
找到Connector标签，修改port属性为你需要的端口号。端口号的范围为：1-65535。1000以内的多被系统占用。最好选1000以上的
修改完端口号，一定重启Tomcat服务器才会生效
HTTP协议默认端口号是：80.
5.6、Tomcat部署web工程
5.6.1、方法一
只需要把web工程的目录拷贝到Tomcat的webapps目录下即可。
1、在webapps目录下创建一个book工程：
2、把上午做的书城第一阶段的内容拷贝到里面
3、访问tomcat下的web工程
在浏览器中注入访问地址格式如下：
http://ip:port/工程名/目录下/文件名
http://ip:port/表示已经到了webapps这个目录下
5.6.2、方法二
-
找到tomcat下的conf目录下的\Catalina\localhost下，创建配置文件：如：abc.xml
-
在abc.xml配置文件中添加以下内容
<!--
Context表示一个工程上下文
path表示工程的访问路径:/abc(不要中文)
docBase表示该工程目录的位置
-->
<Context path="/abc" docBase="D:\Java\Javaweb\myproject\04_book_stasic" />注意，配置完后要重启Tomcat
浏览器输入为：http://ip:port/abc/？ ？为打开的文件的名字
5.7、html页面用鼠标拖到浏览器和在浏览器中输入http://ip:端口号/工程名/访问的区别
5.7.1、html页面用鼠标拖到浏览器
使用这种方式，浏览器使用file://协议。
file协议表示告诉浏览器直接读取file:协议后面的路径，解析展示在浏览器上即可。
5.7.2、在浏览器中输入http://ip:端口号/工程名/访问
这种方式使用的是http协议。背后原理和使用file:协议完全不同
5.8、ROOT的工程访问及默认index.html的访问
当我们在浏览器地址栏中注入访问地址如下：
http://ip:port/ 没有工程名的时候，默认访问的是ROOT工程
当我们在浏览器地址栏中输入的访问地址如下：
http://ip:port/工程名/ 没有资源名只有工程名的时候，默认访问index.html页面
5.9、IDEA整合Tomcat服务器
File | Settings | 构建、执行、部署 | 应用程序服务器
新建模块有Tomcat选项说明添加成功
5.10、IDEA创建动态web工程的操作
参考博客：IDEA2021 创建第一个Java Web 应用_qq_42722179的博客-CSDN博客_idea2021创建动态web
Web工程的目录介绍
src 存储自己编写的java源码
web 存放web工程的资源文件。比如：html/css/js等
WEB-INF 是一个受服务器保护的目录，浏览器无法直接访问到此目录的内容
web.xml 是整个动态web工程的配置部署描述文件，可以在这里配置很多web工程的组件，比如：Servlet/Filter过滤器/Listener监听器/Session超 时等等
lib目录 用来存放第三方的jar包（IDEA需要自己创建配置导包）
5.11、web工程添加额外jar包
参考：如何给动态 web 工程添加额外 jar 包（详细）_开心码农小王。的博客-CSDN博客
6、Servlet
6.1、什么是Servlet
- Servlet是JavaEE规范之一。规范就是接口
- Servlet就是JavaWeb三大组件之一。三大组件分别是：Servlet程序，Filter过滤器，Listener监听器。
- Servlet是运行在服务器上的一个java程序，它可以接收客户端发送过来的请求，并响应数据给客户端。
6.2、手动实现Servlet程序
6.2.1、实现
1、编写一个类去实现servlet接口
2、实现service方法，处理请求，并响应数据
package Servlet;
import jakarta.servlet.*;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/21 11:18
* @Version 1.0
*/
public class HelloServlet implements Servlet {
@Override
public void init(ServletConfig servletConfig) throws ServletException {
}
@Override
public ServletConfig getServletConfig() {
return null;
}
//service方法是专门用来处理请求和响应的
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
System.out.println("Hello Servlet 被访问了");
}
@Override
public String getServletInfo() {
return null;
}
@Override
public void destroy() {
}
}
3、到 web-INF下的web.xml中去配置servlet程序的访问地址
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
version="5.0">
<!--servlet标签给Tomcat配置Servlet程序-->
<servlet>
<!--servlet-name标签给Servlet程序起一个别名（一般是类名）-->
<servlet-name>HelloServlet</servlet-name>
<!--servlet-class是Servlet程序的全类名-->
<servlet-class>Servlet.HelloServlet</servlet-class>
</servlet>
<!--servlet-mapping标签给servlet程序配置访问地址-->
<servlet-mapping>
<!--servlet-name标签的作用是告诉服务器当前配置的地址给哪个Servlet程序使用-->
<servlet-name>HelloServlet</servlet-name>
<!--
url-pattern标签配置访问地址
/ 斜杠在服务器解析的时候，表示地址为http://ip:port/工程路径
工程路径为IDEA编辑配置里设置的地址
/hello 表示地址为http://ip:port/工程路径/hello
-->
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>6.2.2、常见错误
1、url-pattern 中配置的路径没有以斜杠打头
2、servlet-name 配置的值不存在
3、servlet-class 标签的全类名配置错误：启动不会报错，访问就报错
6.3、url地址到Servlet程序的访问
6.4、Servlet的生命周期
-
执行Servlet构造器方法
-
执行init初始化方法
第一、二步，是在第一次访问的时候创建Servlet程序会调用，即只执行一次，说明这个程序是单例的。
-
执行service方法
第三步：每次访问都会调用
-
执行destory销毁方法
第四步：在web工程停止的时候调用
6.5、GET和POST请求的分发处理
package Servlet;
import jakarta.servlet.*;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/21 11:18
* @Version 1.0
*/
public class HelloServlet implements Servlet {
public HelloServlet() {
System.out.println("1 构造器方法");
}
@Override
public void init(ServletConfig servletConfig) throws ServletException {
System.out.println("2 init初始化");
}
@Override
public ServletConfig getServletConfig() {
return null;
}
//service方法是专门用来处理请求和响应的
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
// System.out.println("3 service ----> Hello Servlet 被访问了");
//类型转换(因为HttpServletRequest有getMethod()方法)
HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
//获取请求的方式
String method = httpServletRequest.getMethod();
if("GET".equals(method)){
doGet();
}else{
doPost();
}
}
//做get请求的操作
public void doGet(){
System.out.println("get请求");
}
//做post请求的操作
public void doPost(){
System.out.println("POST请求");
}
@Override
public String getServletInfo() {
return null;
}
@Override
public void destroy() {
System.out.println("4 destroy销毁方法");
}
}
6.6、通过继承HttpServlet实现Servlet程序
一般在实际项目开发中，都是使用继承 HttpServlet 类的方式去实现 Servlet 程序。
1、编写一个类去继承 HttpServlet 类
2、根据业务需要重写 doGet 或 doPost 方法
3、到 web.xml 中的配置 Servlet 程序的访问地址
创建一个HelloServlet2类：
package Servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/21 13:51
* @Version 1.0
*/
public class HelloServlet2 extends HttpServlet {
//doGet在get请求的时候调用
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("HelloServlet2 的doGet方法");
}
//doPost在post请求的时候调用
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("HelloServlet2 的doPost方法");
}
}
web.xml中添加：
<servlet>
<servlet-name>HelloServlet2</servlet-name>
<servlet-class>Servlet.HelloServlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet2</servlet-name>
<url-pattern>/hello2</url-pattern>
</servlet-mapping>6.7、IDEA快速生成Servlet程序
若选用注解，name是这个Servlet的名字，即类名，value是你浏览器访问的URL。不用在web.xml配置
若不选用注解，需要在web.xml配置
6.8、Servlet的继承体系
6.9、ServletConfig类
ServletConfig类从类名上看，就知道是Servlet程序的配置信息类。
Servlet程序和ServletConfig对象都是由Tomcat负责创建，我们负责使用
Servlet程序默认是第一次访问的时候创建的，ServletConfig是每个Servlet程序创建时就创建一个ServletConfig对象。
6.9.1、ServletConfig类的三大作用
- 可以获取Servlet程序的别名servlet-name的值
- 获取初始化参数init-param（只能获取自己的）
- 获取ServletContext对象
注意：
Servlet 程序和 ServletConfig 对象都是由 Tomcat 负责创建，我们负责使用。
Servlet 程序默认是第一次访问的时候创建，ServletConfig 是每个 Servlet 程序创建时，就创建一个对应的 ServletConfig 对 象。
重写init方法里面一定要调用父类的init(ServletConfig)操作：super.init(config);
在web.xml的第一个servlet中添加init-param初始化参数
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
version="5.0">
<!--servlet标签给Tomcat配置Servlet程序-->
<servlet>
<!--servlet-name标签给Servlet程序起一个别名（一般是类名）-->
<servlet-name>HelloServlet</servlet-name>
<!--servlet-class是Servlet程序的全类名-->
<servlet-class>Servlet.HelloServlet</servlet-class>
<!--init-param是初始化参数-->
<init-param>
<!--参数-->
<param-name>username</param-name>
<!--参数值-->
<param-value>root</param-value>
</init-param>
<init-param>
<!--参数-->
<param-name>url</param-name>
<!--参数值-->
<param-value>jdbc:mysql://localhost:13306/test</param-value>
</init-param>
</servlet>
<!--servlet-mapping标签给servlet程序配置访问地址-->
<servlet-mapping>
<!--servlet-name标签的作用是告诉服务器当前配置的地址给哪个Servlet程序使用-->
<servlet-name>HelloServlet</servlet-name>
<!--
url-pattern标签配置访问地址
/ 斜杠在服务器解析的时候，表示地址为http://ip:port/工程路径
工程路径为IDEA编辑配置里设置的地址
/hello 表示地址为http://ip:port/工程路径/hello
-->
<url-pattern>/hello</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>HelloServlet2</servlet-name>
<servlet-class>Servlet.HelloServlet2</servlet-class>
</servlet>
<servlet>
<servlet-name>helloServlet3</servlet-name>
<servlet-class>Servlet.HelloServlet3</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet2</servlet-name>
<url-pattern>/hello2</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>helloServlet3</servlet-name>
<url-pattern>/hello3</url-pattern>
</servlet-mapping>
</web-app>主要查看init方法：
package Servlet;
import jakarta.servlet.*;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/21 11:18
* @Version 1.0
*/
public class HelloServlet implements Servlet {
public HelloServlet() {
System.out.println("1 构造器方法");
}
@Override
public void init(ServletConfig servletConfig) throws ServletException {
//ServletConfig的三大作用
//可以获取Servlet程序的别名servlet-name的值(别名在web.xml中servlet-name设置)
System.out.println("HelloSerclet的别名是:" + servletConfig.getServletName());
//获取初始化参数init-param
System.out.println("初始化参数username的值是："+servletConfig.getInitParameter("username"));
System.out.println("初始化参数url的值是："+servletConfig.getInitParameter("url"));
//获取ServletContext对象
System.out.println(servletConfig.getServletContext());
}
@Override
public ServletConfig getServletConfig() {
return null;
}
//service方法是专门用来处理请求和响应的
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
// System.out.println("3 service ----> Hello Servlet 被访问了");
//类型转换(因为HttpServletRequest有getMethod()方法)
HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
//获取请求的方式
String method = httpServletRequest.getMethod();
if("GET".equals(method)){
doGet();
}else{
doPost();
}
}
//做get请求的操作
public void doGet(){
System.out.println("get请求");
}
//做post请求的操作
public void doPost(){
System.out.println("POST请求");
}
@Override
public String getServletInfo() {
return null;
}
@Override
public void destroy() {
System.out.println("4 destroy销毁方法");
}
}
6.10、ServletContext类
6.10.1、什么是ServletContext?
- ServletContext是一个接口，它表示Servlet上下文对象
- 一个web工程，只有一个ServletContext对象实例
- ServletContext对象是一个域对象
- Servlet在wbe工程部署启动的时候创建。在web程停止的时候销毁。
域对象：是可以像map一样存取数据的对象，这里的域指的是存取数据的操作范围：整个web工程
存数据 取数据 删除数据
Map put() get() remove()
域对象 setAttribute() getAttribute() removeAttribute()
6.10.2、ServletContext类的四个作用
-
获取web.xml中配置的上下文参数context-param
-
获取当前的工程路径，格式：/工程路径
-
获取工程部署后在服务器硬盘上的绝对路径
-
像Map一样存取数据（只要web工程没有停止，且已经被赋值，那么所有Servlet都可以访问）
前三个作用演示：
首先在web.xml配置上下文参数:
<!--context-param是上下文参数(它属于整个web工程)-->
<context-param>
<param-name>username</param-name>
<param-value>context</param-value>
</context-param>
<context-param>
<param-name>password</param-name>
<param-value>value</param-value>
</context-param>package Servlet; /**
* @Author zhang
* @Date 2021/12/21 16:07
* @Version 1.0
*/
import jakarta.servlet.*;
import jakarta.servlet.http.*;
import java.io.IOException;
public class ContextServlet extends HttpServlet {
//通过浏览器的地址栏输入地址，所访问的URL都是get请求
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取web.xml中配置的上下文参数context-param
//先在web.xml设置context-param参数
ServletContext context = getServletConfig().getServletContext();
String username = context.getInitParameter("username");
System.out.println("context-param参数username的值是：" + username);
String password = context.getInitParameter("password");
System.out.println("context-param参数password的值是：" + password);
//获取当前的工程路径，格式：/工程路径
System.out.println("当前工程路径：" + context.getContextPath()); ///08_Servlet
//获取工程部署后在服务器硬盘上的绝对路径
// / 斜杠会被服务器解析为地址http://ip:port/工程名/ 就是映射到IDEA代码的web目录,还可以查其他文件的绝对路径
System.out.println("工程部署的路径是："+context.getRealPath("/"));
}
}
像Map一样存取数据（只要web工程没有停止，且已经被赋值，那么所有Servlet都可以访问）
package Servlet; /**
* @Author zhang
* @Date 2021/12/21 16:37
* @Version 1.0
*/
import jakarta.servlet.*;
import jakarta.servlet.http.*;
import java.io.IOException;
public class ContextServlet1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取ServletContext对象
ServletContext context = getServletContext();
System.out.println("保存之前 context1 中获取域数据key1的值是：" + context.getAttribute("key1")); //null
context.setAttribute("key1","value1");
System.out.println("context1 中获取域数据key1的值是：" + context.getAttribute("key1"));
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
6.11、Http协议
6.11.1、什么是Http协议
什么是协议？
协议是指双方或多方相互约定好，大家都要遵守的规则
HTTP协议，是指客户端和服务器之间通信时，发送的数据和需要遵守的规则
HTTP协议中的数据又叫报文。
6.11.2、请求的HTTP协议格式
客户端给服务器发送数据叫请求
服务器给客户端回传数据叫响应
请求又分为GET和POST两种
6.11.2.1、GET请求
-
请求行
- 请求方式 GET
- 请求的资源路径 [+?+请求参数]
- 请求的协议版本号 HTTP/1.1
-
请求头
key : value 组成 不同的键值对，表示不同的含义。
6.11.2.2、POST请求
-
请求行
- 请求的方式 POST
- 请求的资源路径[+?+请求参数]
- 请求的协议版本号 HTTP/1.1
-
请求头
key : value 不同的请求头，有不同的含义
请求头和请求行有一行空行
-
请求体====》就是发送给服务器的数据
6.11.2.3、常用请求头说明
Accept：表示客户端可以接收的数据类型
Accept-Language：表示客户端可以接收的语言类型
User-Agent：表示客户端浏览器的信息
Host：表示请求时的服务器ip和端口号
6.11.2.4、哪些是GET请求，哪些是POST请求
GET请求：
- form标签method=get
- a标签
- link标签引入css
- Script标签引入js文件
- img标签引入图片
- iframe引入html页面
- 在浏览器地址栏中输入地址后敲回车
POST请求
- form标签 method=post
6.12、响应的HTTP协议格式
-
响应行
- 响应的协议和版本号 HTTP/1.1
- 响应状态码 200
- 响应状态描述符 OK
-
响应头
key:value 不同的响应头，有其不同的含义空行
响应头和响应体间有一行空行
-
响应体 ----------->就是回传给客户端的数据
6.13、常用响应码说明
200 表示请求成功
302 表示请求重定向
404 表示服务器已经收到了请求，但是数据不存在（请求地址需错误）
500 表示服务器已经收到了请求，但是服务器内部错误（代码错误）
6.14、MIME类型说明
MIME
是
HTTP
协议中数据类型。
MIME
的英文全称是
"Multipurpose Internet Mail Extensions"
多功能
Internet
邮件扩充服务。
MIME
类型的格式是“大类型
/
小 类型”，并与某一种文件的扩展名相对应。
常见的MIME类型 ：
6.15、如何查看HTTP协议
6.16、HttpServletRequest 类
6.16.1、作用
每次只要有请求进入 Tomcat 服务器，Tomcat 服务器就会把请求过来的 HTTP 协议信息解析好封装到 Request 对象中。 然后传递到 service 方法（doGet 和 doPost）中给我们使用。我们可以通过 HttpServletRequest 对象，获取到所有请求的信息。
6.16.2、HttpServletRequest 类的常用方法
i. getRequestURI() 获取请求的资源路径
ii. getRequestURL() 获取请求的统一资源定位符（绝对路径）
iii. getRemoteHost() 获取客户端的 ip 地址
iv. getHeader() 获取请求头
v. getParameter() 获取请求的参数
vi. getParameterValues() 获取请求的参数（多个值的时候使用）
vii. getMethod() 获取请求的方式 GET 或 POST
viii. setAttribute(key, value); 设置域数据
ix. getAttribute(key); 获取域数据
x. getRequestDispatcher() 获取请求转发对象
6.16.2.1、常用API示例
package Servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import javax.xml.transform.Source;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/22 12:39
* @Version 1.0
*/
public class RequestAPI extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// i. getRequestURI() 获取请求的资源路径
System.out.println("URI = " + req.getRequestURI()); ///URI = /09_Servlet/requestServlet
// ii. getRequestURL() 获取请求的统一资源定位符（绝对路径）
System.out.println("URL = " + req.getRequestURL()); //URL = http://localhost:8080/09_Servlet/requestServlet
// iii. getRemoteHost() 获取客户端的 ip 地址
/*
* 使用localhost访问时，ip地址为 127.0.0.1
* 使用127.0.0.1访问时，ip地址为 127.0.0.1
* 使用真实地址访问时， ip地址为 真实的客户端ip
* */
System.out.println("客户端IP地址为： " + req.getRemoteHost());
// iv. getHeader() 获取请求头
System.out.println("请求头User-Agent为：" + req.getHeader("User-Agent"));
// vii. getMethod() 获取请求的方式 GET 或 POST
System.out.println("请求的方式为：" + req.getMethod());
}
}
6.16.2.2、获取请求参数
表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://localhost:8080/09_Servlet/parameterServlet" method="post">
用户名：<input type="text" name="username"><br/>
密码：<input type="password" name="password"><br/>
兴趣爱好:<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript<br/>
<input type="submit">
</form>
</body>
</html>请求代码：
package Servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
/**
* @Author zhang
* @Date 2021/12/22 12:58
* @Version 1.0
*/
public class ParameterServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("--------------doGet-----------------");
//获取请求的参数
// v. getParameter() 获取请求的参数
// vi. getParameterValues() 获取请求的参数（多个值的时候使用）
String username = req.getParameter("username");
String password = req.getParameter("password");
String[] hobby = req.getParameterValues("hobby");
System.out.println("用户名：" + username);
System.out.println("密码：" + password);
System.out.println("兴趣爱好：" + Arrays.asList(hobby));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("--------------doPost-----------------");
//设置请求体的字符集,从而解决post请求的中文乱码问题，要在获取请求参数之前调用才有效
req.setCharacterEncoding("UTF-8");
//获取请求的参数
// v. getParameter() 获取请求的参数
// vi. getParameterValues() 获取请求的参数（多个值的时候使用）
String username = req.getParameter("username");
String password = req.getParameter("password");
String[] hobby = req.getParameterValues("hobby");
System.out.println("用户名：" + username);
System.out.println("密码：" + password);
System.out.println("兴趣爱好：" + Arrays.asList(hobby));
}
}
6.16.2.3、doGet请求的中文乱码解决
// 获取请求参数
String username = req.getParameter("username");
//1 先以 iso8859-1 进行编码 /
// /2 再以 utf-8 进行解码
username = new String(username.getBytes("iso-8859-1"), "UTF-8");6.16.2.4、doPost请求的中文乱码解决
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("--------------doPost-----------------");
//设置请求体的字符集,从而解决post请求的中文乱码问题，要在获取请求参数之前调用才有效
req.setCharacterEncoding("UTF-8");
//获取请求的参数
// v. getParameter() 获取请求的参数
// vi. getParameterValues() 获取请求的参数（多个值的时候使用）
String username = req.getParameter("username");
String password = req.getParameter("password");
String[] hobby = req.getParameterValues("hobby");
System.out.println("用户名：" + username);
System.out.println("密码：" + password);
System.out.println("兴趣爱好：" + Arrays.asList(hobby));
}6.16.3、请求的转发
什么是请求的转发?
请求转发是指，服务器收到请求后，从一次资源跳转到另一个资源的操作叫请求转发。
Servlet1.java
package ServletRetransmission;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/22 13:34
* @Version 1.0
*/
public class Servlet1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取请求的参数（办事材料）
String username = req.getParameter("username");
System.out.println("在Servlet1中查看参数：" + username);
//给材料盖章，并传递到Servlet2取查看
req.setAttribute("key1","Servlet1的章");
//问路：Servlet2怎么走
//请求转发必须要以斜杠打头，斜杠表示地址为：http://ip:port/工程名/ ，映射到IDEA代码的web目录
// RequestDispatcher requestDispatcher = req.getRequestDispatcher("/servlet2");
//通过此方法跳转到WEB-INF目录下的文件
RequestDispatcher requestDispatcher = req.getRequestDispatcher("/WEB-INF/form.html");
//走向Servlet2
requestDispatcher.forward(req, resp);
}
}
Servlet2.java
package ServletRetransmission;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/22 13:34
* @Version 1.0
*/
public class Servlet2 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取请求的参数（办事材料）
String username = req.getParameter("username");
System.out.println("在Servlet2中查看参数：" + username);
//查看Servlet1是否有盖章
Object key1 = req.getAttribute("key1");
System.out.println("Servlet1 是否有章:" + key1);
//处理业务
System.out.println("Servlet2处理自己的业务");
}
}
6.16.4、base标签的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
base标签设置页面相对路径工作时参照的地址
href属性就是参数的地址值
-->
<base href="http://localhost:8080/09_Servlet/a/b/">
</head>
<body>
这是a下的b下的c.html界面 <br>
<a href="../../index.html">跳回首页</a>
</body>
</html>6.16.5、web中的相对路径和绝对路径
在 javaWeb 中，路径分为相对路径和绝对路径两种：
相对路径是：
. 表示当前目录
.. 表示上一级目录
资源名 表示当前目录/资源名
绝对路径： http://ip:port/工程路径/资源路径
在实际开发中，路径都使用绝对路径，而不简单的使用相对路径。
1、绝对路径
2、base+相对
6.16.6、web中 / 斜杠的不同意义
在 web 中 / 斜杠 是一种绝对路径。
/ 斜杠 如果被浏览器解析，得到的地址是：http://ip:port/
<a href="/">斜杠</a>
/ 斜杠 如果被服务器解析，得到的地址是：http://ip:port/工程路径
1、<url-pattern>/servlet1</url-pattern>
2、servletContext.getRealPath(“/”);
3、request.getRequestDispatcher(“/”);
特殊情况： response.sendRediect(“/”); 把斜杠发送给浏览器解析。得到 http://ip:port/
6.17、HttpServletResponse 类
6.17.1、HttpServletResponse 类的作用
HttpServletResponse 类和 HttpServletRequest 类一样。每次请求进来，Tomcat 服务器都会创建一个 Response 对象传 递给 Servlet 程序去使用。HttpServletRequest 表示请求过来的信息，HttpServletResponse 表示所有响应的信息， 我们如果需要设置返回给客户端的信息，都可以通过 HttpServletResponse 对象来进行设置
6.17.2、两个输出流的说明。
字节流 getOutputStream(); 常用于下载（传递二进制数据）
字符流 getWriter(); 常用于回传字符串（常用）
两个流同时只能使用一个。 使用了字节流，就不能再使用字符流，反之亦然，否则就会报错，如下图。
6.17.3、如何往客户端回传数据（解决乱码，设置服务器和客户端字符集和响应头）
要求：往客户端回传字符串数据。
package HttpServletResponse;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @Author zhang
* @Date 2021/12/22 14:34
* @Version 1.0
*/
public class ResponseIOServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取当前的服务器字符集
// System.out.println(resp.getCharacterEncoding());
//设置服务器字符集为UTF-8
// resp.setCharacterEncoding("UTF-8");
//通过响应头，设置浏览器也使用UTF-8字符集
// resp.setHeader("Content-Type", "text/html;character=UTF-8");
//同时设置服务器和客户端都使用UTF-8字符集，还设置了响应头
//此方法一定要在获取流对象之前调用才有效
resp.setContentType("text/html;character=UTF-8");
PrintWriter writer = resp.getWriter();
writer.write("zyj是最帅的");
}
}
6.17.4、请求重定向
请求重定向，是指客户端给服务器发请求，然后服务器告诉客户端说。我给你一些地址。你去新地址访问。叫请求重定向（因为之前的地址可能已经被废弃，比如某些非法网站）。
6.17.4.1、方式一
Response1.java
package HttpServletResponse;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/22 15:05
* @Version 1.0
*/
public class Response1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("进入了Response1");
req.setAttribute("key1","value1");
//设置响应状态码302，表示重定向（地址已搬迁）
resp.setStatus(302);
//设置响应头，说明新的地址在哪里
resp.setHeader("Location","http://localhost:8080/09_Servlet/response2");
}
}
Response2.java
package HttpServletResponse;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/22 15:05
* @Version 1.0
*/
public class Response2 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;character=UTF-8");
//重定向不共享Request域中数据
System.out.println( req.getAttribute("key1"));//null
resp.getWriter().write("response2's result");
}
}
6.17.4.2、方式二
Response1.java更改即可
package HttpServletResponse;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author zhang
* @Date 2021/12/22 15:05
* @Version 1.0
*/
public class Response1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("进入了Response1");
req.setAttribute("key1","value1");
//设置响应状态码302，表示重定向（地址已搬迁）
// resp.setStatus(302);
//设置响应头，说明新的地址在哪里
// resp.setHeader("Location","http://localhost:8080/09_Servlet/response2");
//方式二
resp.sendRedirect("http://localhost:8080/09_Servlet/response2");
}
}
7、JavaEE项目的三层架构
