第一章 html以及css的用法
1.1 HTML语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grammar</title>
</head>
<body>
<!-- 1.标签的分类
HTML标签分为两类，一类叫有开始有结束的标签，另一类叫自结束标签。
-->
<div></div><div></div><span></span><p></p><br>
<!-- 2.标签不区分大小写
-->
<div>i am div</div>
<DIV>I AM DIV</DIV>
<!-- 3.标签可以嵌套但不能交叉嵌套
-->
<div>div<span>span</div></span>
<!-- 4.标签必须正确关闭
-->
<div>div</div>
<!-- 5.属性必须有值，且属性值必须加引号
-->
<div id="one">id=one</div>
<!-- 6.注释不能嵌套 -->
<!-- html注释 <!-- --> -->
</body>
</html>
1.2 常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tag</title>
</head>
<body>
<!--需求1：div、span、p标签的演示
div标签 默认独占一行
span标签 它的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
-->
2. 文本标签：和文本有关的标签
* 注释：<!-- 注释内容 -->
* <h1> to <h6>：标题标签
* h1~h6:字体大小逐渐递减
* <p>：段落标签
* <br>：换行标签
* <hr>：展示一条水平线
* 属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right：右对齐
* <b>：字体加粗
* <i>：字体斜体
* <font>:字体标签
* <center>:文本居中
* 属性：
* color：颜色
* size：大小
* face：字体
<!-- 1.标题标签
语法:h1-h6,字体大小，粗细递减。
-->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h6>h6</h6>
<h7>h7</h7><br><!-- br标签简单的换行符-->
h8
<!-- 2.div标签
语法：<div></div>
作用：无实际意义，布局，可以让页面变好看
-->
<div>
<div>上</div>
<div>中</div>
<div>下</div>
</div>
<!-- 3.段落标签
语法:<p></p>
-->
<p> 段落1</p>
<p>  段落2</p>
<p>段落3</p>
<!-- 4.转义字符
语法： &开头，;结尾
常用：
空格： 普通空格
  中文空格
大于号：>
小于号：<
版权号：©
-->
问：下列哪些选项是标题标签？<br>
a:<span></span><br>
b:<div></div><br>
c:<h1></h1><br>
d:<h7></h7><br>
©
<!-- 5.列表
无序列表
语法：<ul>
<li></li>
</ul>
ul li
* type
disc:实心圆
circle:空心圆
square:实心方
有序列表
语法：
<ol>
<li></li>
</ol>
-->
<h1>无序列表</h1>
<ul type="square">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<h1>有序列表</h1>
<ol type="i">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ol>
</body>
</html>
1.3 插入图片
<!--需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性
img标签是图片标签,用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
在JavaSE中路径也分为相对路径和绝对路径.
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
绝对路径:
正确格式是: http://ip:port/工程名/资源路径
错误格式是: 盘符:/目录/文件名
-->
<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/>
<img src="../../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
<img src="../imgs/5.jpg" width="200" height="260" />
<img src="../imgs/6.jpg" width="200" height="260" />
</body>
</html>
1.4 超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hyperlink</title>
</head>
<body>
<!-- 使用a标签制作超链接
href:链接路径
target:
_self:以当前选项卡（页面）打开
_blank:以新的选项卡（页面）打开
-->
<a href="pages/target.html" target="_blank">跳转到目标页面，目标页面有美女！</a>
</body>
</html>
1.5 表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<!-- * 使用table制作表格
tr行
th表头
td单元格
* 语法
<table>
<tr>
<th>|<td>
</tr>
</table>
* 跨行跨列
* 跨行：rowspan
* 跨列：colspan
cellspacing 设置单元格间距
<table align="center" border="1" width="300" height="300" cellspacing="0">
-->
<table border="1">
<tr>
<th>姓名</th>
<th>阵营</th>
<th>职业</th>
<th>武器</th>
</tr>
<tr>
<td>刘备</td>
<td>蜀</td>
<td>蜀汉集团董事长</td>
<td>双股剑</td>
</tr>
<tr>
<td>诸葛亮</td>
<td>蜀</td>
<td>蜀汉集团CEO</td>
<td>羽扇</td>
</tr>
<tr>
<td>关羽</td>
<td>蜀</td>
<td>荆襄总裁</td>
<td>青龙偃月刀</td>
</tr>
<tr>
<td>张飞</td>
<td>蜀</td>
<td>阆中销售经理</td>
<td>丈八蛇矛</td>
</tr>
</table>
</body>
</html>
1.5.1 跨行跨列的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table_blank</title>
</head>
<body>
<h1>三行三列</h1>
<table border="1" width="500px" height="300px" align="center">
<tr align="center">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr align="center">
<td colspan="2">2122</td>
<!-- <td>22</td> -->
<td rowspan="2">2333</td>
</tr>
<tr align="center">
<td>31</td>
<td>32</td>
<!-- <td>33</td> -->
</tr>
</table>
</body>
</html>
1.6 表单
<!--需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。-->
<!--
form标签就是表单
input type=text 是文件输入框 value设置默认显示内容
input type=password 是密码输入框 value设置默认显示内容
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标签是表单标签
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、理论上没有数据长度的限制
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的显示</title>
</head>
<body>
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td>
<input type="text" name="username" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>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>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
</html>
1.7 iframe的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
我是一个单独的完整的页面<br/><br/>
<!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme和a标签组合使用的步骤:
1 在iframe标签中使用name属性定义一个名称
2 在a标签的target属性上设置iframe的name的属性值
target(目标)指向iframe的name的属性值,实现在一个单独的页面上超链接切换不同的html
-->
<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
<li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
<li><a href="1.font标签.html" target="abc">1.font标签.html</a></li>
<li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
</ul>
</body>
</html>
1.8 css的用法
第一种用法
这种方式的缺点？
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;">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>
第二种方法
这种方式的缺点：
1、只能在同一页面内复用代码，不能在多个页面中复用css代码
2、维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
/* 需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。
type里面代表浏览器需要解析的内容*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
第三种方法
1.css里面的代码
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}
<!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>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
1.9 三种css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8">
<title>css的用法</title>
<link href="1.css" rel="stylesheet" type="text/css">
<style type="text/css">
#idoo1{
font-size: 10px;
color: blue;
}
.class01{
font-size: 10px;
color: yellow;
}
#id002,.class02{
font-size: 10px;
}
</style>
</head>
<body>
<div>
我好厉害
</div>
<span>我是一个人  </span><span>我不是一个人在战斗</span>
<p id="idoo1"> 你妹是猪</p>
<h1 class="class01"> 我才不是猪</h1>
</body>
</html>
1.10 常用样式
1、字体颜色 color：red； 颜色可以写颜色名如：black, blue, red, green 等 颜色也可以写rgb 值和十六进制表示值：如rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#
2、宽度 width:19px; 宽度可以写像素值：19px； 也可以写百分比值：20%； 3、高度 height:20px; 高度可以写像素值：19px； 也可以写百分比值：20%； 4、背景颜色 background-color:#0F2D4C 4、字体样式： color：#FF0000；字体颜色红色 font-size：20px; 字体大小 5、红色1 像素实线边框 border：1px solid red; 7、DIV 居中 margin-left: auto; margin-right: auto; 8、文本居中： text-align: center;
9、超连接去下划线 text-decoration: none; 10、表格细线 table { border: 1px solid black; /设置边框/ border-collapse: collapse; /将边框合并/ } td,th { border: 1px solid black; /设置边框/ } 11、列表去除修饰 ul { list-style: none; }
第二章 javaScript的使用
2.1 javaScript与html的使用
第一种
<script type="text/javascript">
// alert是JavaScript语言提供的一个警告框函数。
// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("hello javaScript!");
</script>
第二种
<!--
现在需要使用script引入外部的js文件来执行
src 属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）
script标签可以用来定义js代码，也可以用来引入js文件
但是，两个功能二选一使用。不能同时使用两个功能
-->
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
alert("国哥现在可以帅了");
</script>
2.2 javaScript的变量
<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>
2.3 javaScript的关系运算
<script type="text/javascript">
var a = "12";
var b = 12;
alert( a == b ); // true//类型完全相同用===
alert( a === b ); // false
</script>
2.4 JavaScript的逻辑运算
<script type="text/javascript">
/* 在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
0 、null、 undefined、""(空串) 都认为是 false；*/
// var a = 0;
// if (a) {
// alert("零为真");
// } else {
// alert("零为假");
// }
// var b = null;
// if (b) {
// alert("null为真");
// } else {
// alert("null为假");
// }
// var c = undefined;
// if (c) {
// alert("undefined为真");
// } else {
// alert("undefined为假");
// }
// var d = "";
// if (d) {
// alert("空串为真");
// } else {
// alert("空串为假");
// }
/* && 且运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/
var a = "abc";
var b = true;
var d = false;
var c = null;
// alert( a && b );//true
// alert( b && a );//true
// 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>
2.5 javaScript的数组
1. 创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3. 属性
length:数组的长度
4. 特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
<script type="text/javascript">
var arr = [true,1]; // 定义一个空数组
// alert( arr.length ); // 0
arr[0] = 12;
// alert( arr[0] );//12
// alert( arr.length ); // 0
// javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
arr[2] = "abc";
alert(arr.length); //3
// alert(arr[1]);// undefined
// 数组的遍历
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
</script>
2.6 函数的调用方式
第一种
<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,50) );
</script>
第二种
<script type="text/javascript">
var fun = function () {
alert("无参函数");
}
// fun();
var fun2 = function (a,b) {
alert("有参函数a=" + a + ",b=" + b);
}
// fun2(1,2);
var fun3 = function (num1,num2) {
return num1 + num2;
}
alert( fun3(100,200) );
</script>
//注意js不允许方法的重载
2.7 隐形函数arguments
<script type="text/javascript">
function fun(a) {
alert( arguments.length );//可看参数个数
alert( arguments[0] );
alert( arguments[1] );
alert( arguments[2] );
alert("a = " + a);
for (var i = 0; i < arguments.length; i++){
alert( arguments[i] );
}
alert("无参函数fun()");
}
// fun(1,"ad",true);
// 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
function sum(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,3,4,"abc",5,6,7,8,9) );
</script>
2.8 Object形式的自定义对象
第一种
<script type="text/javascript">
// 对象的定义：
// var 变量名 = new Object(); // 对象实例（空对象）
// 变量名.属性名 = 值; // 定义一个属性
// 变量名.函数名 = function(){} // 定义一个函数
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
// 对象的访问：
// 变量名.属性 / 函数名();
// alert( obj.age );
obj.fun();
</script>
第二种
<script type="text/javascript">
// 对象的定义：
// var 变量名 = { // 空对象
// 属性名：值, // 定义一个属性
// 属性名：值, // 定义一个属性
// 函数名：function(){} // 定义一个函数
// };
var obj = {
name:"国哥",
age:18,
fun : function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
};
// 对象的访问：
// 变量名.属性 / 函数名();
alert(obj.name);
obj.fun();
</script>
2.9 js中的事件
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
onload 加载完成事件： 页面加载完成之后，常用于做页面js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
onmouseover:鼠标越过事件,用于鼠标越过变颜色
onmouseout:鼠标移开事件,用于鼠标越过回复颜色
事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件
绑定。
静态注册事件：通过html 标签的事件属性直接赋于事件响应后的代码，这种方
式我们叫静态注册fas。
动态注册事件：是指先通过js 代码得到标签的dom 对象，然后再通过dom 对
象.事件名= function(){} 这种形式赋于事件
响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名= fucntion(){}
window.onload代表在图像初始化完后立马加载
onload事件的静动注册
<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();">
-->
onclick事件的静动注册
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
// 动态注册onclick事件
window.onload = function () {
// 1 获取标签对象
/*
* document 是JavaScript语言提供的一个对象（文档）<br/>
*
* getElementById通过id属性获取标签对象
**/
var btnObj = document.getElementById("btn01");//把这个文档id为btn01的变为一个对象，这个对象有onclick属性，把这个属性赋值
// alert( btnObj );
// 2 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的onclick事件");
}
}
</script>
</head>
<body>
<!--静态注册onClick事件-->
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
onblur事件的静动注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册失去焦点事件
function onblurFun() {
// console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
// 动态注册 onblur事件
window.onload = function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象.事件名 = function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>
onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<!--静态注册onchange事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>
onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
//1 获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--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.10 DOM模型
DOM 全称是Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的
重点。
2.10.1 document对象
Document 对象的理解： 第一点：Document 它管理了所有的HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过document 访问所有的标签对象。
那么html 标签要对象化怎么办？
<div id="div01">div01</div>
模拟对象化，相当于： class Dom{ private String id; // id 属性 private String tagName; //表示标签名 private Dom parentNode; //父亲 private List children; // 孩子结点 private String innerHTML; // 起始标签和结束标签中间的内容 }
2.10.2 dom对象中的方法的介绍
document.getElementById(elementId)
通过标签的id 属性查找标签dom 对象，elementId 是标签的id 属性值
document.getElementsByName(elementName)
通过标签的name 属性查找标签dom 对象，elementName 标签的name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签dom 对象。tagname 是标签名
document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
注： document 对象的三个查询方法，如果有id 属性，优先使用getElementById 方法来进行查询
如果没有id 属性，则优先使用getElementsByName 方法来进行查询
如果id 属性和name 属性都没有最后再按标签名查getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
2.10.3 getElementById方法的实例方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
/*
* 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
* 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。
* */
function onclickFun() {
// 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
var usernameObj = document.getElementById("username");
// [object HTMLInputElement] 它就是dom对象
var usernameText = usernameObj.value;
// 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
var patt = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串，是不是匹配我的规则 ，
* 匹配就返回true。不匹配就返回false.
* */
var usernameSpanObj = document.getElementById("usernameSpan");
// innerHTML 表示起始标签和结束标签中的内容
// innerHTML 这个属性可读，可写
usernameSpanObj.innerHTML = "国哥真可爱！";
if (patt.test(usernameText)) {
// alert("用户名合法！");
// usernameSpanObj.innerHTML = "用户名合法！";
usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
} else {
// alert("用户名不合法！");
// usernameSpanObj.innerHTML = "用户名不合法！";
usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color:red;">
</span>
<button onclick="onclickFun()">较验</button>
</body>
2.10.4 getElementByName方法的实例方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全选
function checkAll() {
// 让所有复选框都选中
// document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合
// 这个集合的操作跟数组 一样
// 集合中每个元素都是dom对象
// 这个集合中的元素顺序是他们在html页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
// checked表示复选框的选中状态。如果选中是true，不选中是false
// checked 这个属性可读，可写
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
//全不选
function checkNo() {
var hobbies = document.getElementsByName("hobby");
// checked表示复选框的选中状态。如果选中是true，不选中是false
// checked 这个属性可读，可写
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;
// if (hobbies[i].checked) {
// hobbies[i].checked = false;
// }else {
// hobbies[i].checked = true;
// }
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked="checked">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.10.5 getElementByTagName方法的实例方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function(){
// alert( document.getElementById("btn01") );
}
// 全选
function checkAll() {
alert( document.getElementById("btn01") );
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是dom对象
// 集合中元素顺序 是他们在html页面中从上到下的顺序。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
<!--as -->
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button id="btn01" onclick="checkAll()">全选</button>
</body>
</html>
2.10.6 节点的常用属性和方法
节点就是标签对象
方法： 通过具体的元素节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )
方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
属性：
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
removeChild()
删除孩子对象
replaceChild(newChild,oldChild)
替换旧孩子变为新孩子
cloneChild（true）
要克隆的对象.cloneChild(true)
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本
2.10.7 dom查询练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查找#bj节点
document.getElementById("btn01").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
}
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName("li");
alert(lis.length)
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var genders = document.getElementsByName("gender");
alert(genders.length)
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
//1 获取id为city的节点
//2 通过city节点.getElementsByTagName按标签名查子节点
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length)
};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
//1 获取id为city的节点
//2 通过city获取所有子节点
alert(document.getElementById("city").childNodes.length);
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
// 查询id为phone的节点
alert( document.getElementById("phone").firstChild.innerHTML );
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
//1 查询id为bj的节点
var bjObj = document.getElementById("bj");
//2 bj节点获取父节点
alert( bjObj.parentNode.innerHTML );
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
// 获取id为android的节点
// 通过android节点获取前面兄弟节点
alert( document.getElementById("android").previousSibling.innerHTML );
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
alert(document.getElementById("username").value);
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "国哥你真牛逼";
};
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
alert(document.getElementById("city").innerHTML);//这是里面的所有内容，包括标签
// alert(document.getElementById("city").innerText);//这是里面的所有文本，不包括标签
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
2.10.8 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>
var textNodeObj = document.createTextNode("国哥，我爱你"); // 有一个文本节点对象 #国哥，我爱你
divObj.appendChild(textNodeObj); // <div>国哥，我爱你</div>
// divObj.innerHTML = "国哥，我爱你"; // <div>国哥，我爱你</div>,但，还只是在内存中
// 添加子元素
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>
2.11 作业
作业1 通过动态获取修改新闻的字体
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>04-新闻字体.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.out{
border: 1px red solid;
width: 300px;
}
.max{
font-size: 32px;
color:red;
}
.mid{
font-size: 22px;
color:black;
}
.min{
font-size: 14px;
color:blue;
}
</style>
<script type="text/javascript">
function changeSize(size) {
var elementById = document.getElementById("news");
elementById.className = size;//className相当于class，javaScript为了和java区分把class变为ClassName，相当于给标签的class属性赋值
}
</script>
</head>
<body>
<div class="out">
<div>
<a href="javascript:void(0)" onclick="changeSize('max')">大</a>//注意这里是字符串，一定要用'max'标起来
<a href="javascript:void(0)" onclick="changeSize('mid')">中</a>
<a href="javascript:void(0)" onclick="changeSize('min')">小</a>
</div>
<div id="news" class="min">
5月17日电 据公安部网站消息，5月17日中午，国务委员、
公安部部长郭声琨与越南中央政治局委员、
公安部部长陈大光通话，要求越方立即采取有力措施，坚决制止一切暴力活动，
严惩打砸抢不法分子，切实保护中方在越机构、企业和人员的人身财产安全。
</div>
</div>
</body>
</html>
作业二 表格增删
<!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>05-表格增删.html</title>
</head>
<script type="text/javascript">
window.onload=function () {
document.getElementById("addUser").onclick=function () {
var value = document.getElementById("name").value;
var value1 = document.getElementById("tel").value;
var value2 = document.getElementById("addr").value;
var newVar = document.createElement("td");
newVar.innerHTML=value;
var newVar1 = document.createElement("td");
newVar1.innerHTML=value1;
var newVar2 = document.createElement("td");
newVar2.innerHTML=value2;
var a = document.createElement("a");
a.href="#";
a.onclick=function(){
deleteMyRow(this);//注意动态注册这里要写function()
}
a.innerHTML="删除";
var newVar3 = document.createElement("td");
newVar3.appendChild(a);
var element = document.createElement("tr");
element.appendChild(newVar);
element.appendChild(newVar1);
element.appendChild(newVar2);
element.appendChild(newVar3);
var elementById = document.getElementById("usertable");
elementById.appendChild(element);
}
}
function deleteMyRow(obj) {//注意deleteMyRow代表的是当前的标签
var parentNode = obj.parentNode.parentNode;
parentNode.parentNode.removeChild(parentNode);
}
</script>
<body>
<center>
<br>
<br> 添加用户:<br>
<br> 姓名: <input type="text" name="name" id="name" /> 电话: <input type="text"
name="tel" id="tel" /> 住址: <input type="text" name="addr" id="addr" /><br>
<br>
<button id="addUser" >提交</button>
<br>
<br>
<hr>
<br>
<br>
<table id="usertable" border="1" cellpadding="5" cellspacing="0">
<tr>
<th>姓名</th>
<th>电话</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>110</td>
<td>上海</td>
<td>
<a href="#" onclick="deleteMyRow(this);" >删除</a>
</td>
</tr>
</table>
</center>
</body>
</html>
作业三 动态生成表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>06-动态生成表格.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table{
border: 1px red solid;
width: 300px;
border-collapse:collapse;
}
td{
border:1px blue solid;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
var oldTable;
function demo(){
if (oldTable) {//注意javascript里面的判断语句可以是null
oldTable.parentNode.removeChild(oldTable);
}
var htmlTableElement = document.createElement("table");
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
for (let i = 0; i < col; i++) {//三列四行相当于先把一行创建出来然后一个个添加数据
var tr = document.createElement("tr");
for (let j = 0; j < row; j++) {
var td1 = document.createElement("td");
td1.innerHTML=i+","+j;
tr.appendChild(td1);
}
htmlTableElement.appendChild(tr);
}
document.body.appendChild(htmlTableElement);
oldTable=htmlTableElement;
}
</script>
</head>
<body>
<div id="one" >
</div>
输入行：<input type="text" id="row"/><br />
输入列：<input type="text" id="col"/><br />
<input type="button" value="创建表格" onclick="demo()"/>
</body>
</html>
作业四 表格隔行变色,并添加鼠标移入事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07-表格隔行变色.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
border: 1px red solid;
width: 500px;
margin: auto;
}
td {
border: 1px blue solid;
margin: 10px;
padding: 10px;
text-align: center;
}
th {
background-color: maroon;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.over {
background-color: aqua;
}
</style>
<script type="text/javascript">
// 动态事件注册，先要把这个文档加载完成的事件先添加上
window.onload = function() {
// 再通过tr标签查找到所有的行标签对象
var trs = document.getElementsByTagName("tr");
// 遍历每一个行标签对象，来设置它的class属性值
for (var i = 1; i < trs.length; i++){
// i % 2 是求余，当余数为0时，说明是偶数
// 当余数为1时，说明这是一个奇数行
if ( i % 2 == 0) {
trs[i].className = "two";
} else {
trs[i].className = "one";
}
// 定义一个变量来保存修改这个class属性值之前的旧的样式名
var oldClass = "";
// 当鼠标移进去的时候的事件
trs[i].onmouseover = function(){
oldClass = this.className;
this.className = "over";
}
// 当鼠标移出的时候的事件
trs[i].onmouseout = function() {
this.className = oldClass;
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr class="one">
<td>高杰</td>
<td>18</td>
<td>闵行</td>
</tr>
<tr class="two">
<td>李刚</td>
<td>16</td>
<td>上海</td>
</tr>
<tr>
<td>赵士龙</td>
<td>22</td>
<td>东莞</td>
</tr>
<tr>
<td>鲁宾</td>
<td>29</td>
<td>北京</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
</table>
</body>
</html>
作业五 移动selected，左到右，右到左
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>08-左到右右到左.html</title>
<style type="text/css">
<!--
BODY {
font-family: "宋体";
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: no;
overflow-y: no;
background-color: #B8D3F4;
}
td {
font_size: 12px;
}
.default_input {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.default_input2 {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.nowrite_input {
border: 1px solid #849EB5;
height: 18px;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.default_list {
font-size: 12px;
border: 1px solid #849EB5;
}
.default_textarea {
font-size: 12px;
border: 1px solid #849EB5;
}
.nowrite_textarea {
border: 1px solid #849EB5;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color: #fff;
}
.wordtd_2 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd {
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2 {
text-align: center;
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg {
font-size: 12px;
}
.tb {
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2 {
line-height: 22px;
text-align: center;
background-color: #F6F6F6;
}
.td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
}
.td4 {
background-color: #F6F6F6;
line-height: 20px;
}
.td5 {
border: #000000 solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
}
.tb td {
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: "宋体";
}
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color: transparent;
text-align: left
}
-->
</style>
<script type="text/javascript">
// 先注册整个文件加载完成之后的事件
window.onload = function() {
//通过id属性值获取add标签对象
var addButton = document.getElementById("add");
// 动态给这个addButton添加单击事件
addButton.onclick = function() {
// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
var firstSelect = document.getElementById("first");
// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
var secondSelect = document.getElementById("second");
//把左边下拉列表中选中的option添加到右边的select下拉列表中
// selectObj.selectedIndex是下拉列表中被选中的索引//appendChild可以用来移动
secondSelect.appendChild( firstSelect.options[firstSelect.selectedIndex] );
}
// 通过ID属性值获取全部移到右边的按钮对象
var add_allButton = document.getElementById("add_all");
// 动态给这个add_allButton添加单击事件
add_allButton.onclick = function() {
// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
var firstSelect = document.getElementById("first");
// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
var secondSelect = document.getElementById("second");
// 通过遍历把左边的每一个options对象添加到右边的select下拉列表中
for (var i = 0; i < firstSelect.options.length;) {
secondSelect.appendChild( firstSelect.options[i] );
}
}
//
var removeButton = document.getElementById("remove");
removeButton.onclick = function() {
// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
var firstSelect = document.getElementById("first");
// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
var secondSelect = document.getElementById("second");
//把左边下拉列表中选中的option添加到右边的select下拉列表中
// selectObj.selectedIndex是下拉列表中被选中的索引
firstSelect.appendChild( secondSelect.options[secondSelect.selectedIndex] );
}
var remove_allButton = document.getElementById("remove_all");
remove_allButton.onclick = function() {
// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
var firstSelect = document.getElementById("first");
// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
var secondSelect = document.getElementById("second");
// 通过遍历把左边的每一个options对象添加到右边的select下拉列表中
for (var i = 0; i < secondSelect.options.length;) {
firstSelect.appendChild( secondSelect.options[i] );
}
}
}
</script>
</head>
<body>
<div
style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" size="10"
class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle"><input name="add" id="add" type="button" class="button"
value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" /> <input
name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple"
class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
作业六 两级联动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>09-二级联动.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="cities.js">//通过标签把数据引进</script>
<script type="text/javascript">
window.onload=function () {
var id = document.getElementById("province");
for (let i = 0; i < china.provinces.length; i++) {
var htmlOptionElement = document.createElement("option");
htmlOptionElement.innerHTML=china.provinces[i].name;
id.appendChild(htmlOptionElement);//把cities.js里的省份数据进下拉列表里去
}
id.onchange=function () {//注册下拉列表属性改变事件
var elementById = document.getElementById("city");
for (let i = 0; i < elementById.options.length;) {
elementById.removeChild(elementById.options[0])//如果里面有过一次数据的化，就删除里面的标签，以便等下重新插入
}
var cityElement = china.provinces[id.selectedIndex -1].city;//通过得到选中属性的下标的省份来得到省份对应的城市对象
for (let i = 0; i < cityElement.length; i++) {
var htmlOptionElement1 = document.createElement("option");
htmlOptionElement1.innerHTML=cityElement[i];
elementById.appendChild(htmlOptionElement1);//把城市数据加到下拉列表里
}
}
};
</script>
</head>
<body>
<select id="province" name="province">
<option value="none">--请选择省--</option>
</select>
<select id="city" name="city">
<option value="none">--请选择市--</option>
</select>
</body>
</html>
citys
var china = {
"provinces":[{
"name" : "吉林省",
"city" :["长春","吉林市","四平","松原","通化"]
},{
"name" : "辽宁省",
"city" :["沈阳","大连","鞍山","抚顺","铁岭"]
},{
"name" : "山东省",
"city" :["济南","青岛","威海","烟台","潍坊"]
},{
"name" : "上海市",
"city" :["闵行区","徐汇区"]
},{
"name" : "安徽省",
"city" :["合肥市","六安市"]
}]
};
作业七 注册列表
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>10-注册页面.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// 添加整个表单的数据验证方法 ，
// 当验证数据有非法时，返回false，阻止表单提交
// 当验证数据都合法时，返回true 让表单提交
function _validata() {
if (checkuser() && checkpwd() && checkrepwd() && checksex() && checkhobby() && checkDesc() && checkCountry()) {
alert("都成功");
return true;
}
return false;
}
// 当点击用户名称 输入框的时候，把里面的提前文本去掉
function func() {
var userInputObj = document.getElementById("user");
userInputObj.value = "";
}
/*
1, 用户名称验证，必须由字母、数字、下划线组成，并且长度为8-15长度
*/
function checkuser() {
// 获取用户名输入框
var userInputObjValue = document.getElementById("user").value;
/* var patt = new RegExp("\\w{8,15}");
alert(patt); */
var patt = /^\w{8,15}$/;
var result = patt.test(userInputObjValue);
var userspanObj = document.getElementById("userspan");
if (result) {
userspanObj.innerHTML = "";
return true;
} else {
userspanObj.innerHTML = "用户名必须由字母、数字、下划线组成，并且长度为8-15长度";
return false;
}
}
// 验证密码 2, 用户密码 必须由字母、数字、下划线组成，并且长度为6-12长度
function checkpwd(){
// 获取用户名输入框
var pwdInputObjValue = document.getElementById("pwd").value;
var patt = /^\w{6,12}$/;
var result = patt.test(pwdInputObjValue);
var pwdspanObj = document.getElementById("pwdspan");
if (result) {
pwdspanObj.innerHTML = "";
return true;
} else {
pwdspanObj.innerHTML = "用户密码 必须由字母、数字、下划线组成，并且长度为6-12长度";
return false;
}
}
// 验证确认密码 3，确认密码必须与用户密码相同
function checkrepwd(){
// 获取确认密码输入框
var repwdInputObjValue = document.getElementById("repwd").value;
var patt = /^\w{6,12}$/;
var result = patt.test(repwdInputObjValue);
var repwdspanObj = document.getElementById("repwdspan");
if (result) {
// 获取用户名输入框
var pwdInputObjValue = document.getElementById("pwd").value;
if (repwdInputObjValue === pwdInputObjValue) {
repwdspanObj.innerHTML = "";
return true;
} else {
repwdspanObj.innerHTML = "确认密码和用户密码不一致";
return false;
}
} else {
repwdspanObj.innerHTML = "确认密码 必须由字母、数字、下划线组成，并且长度为6-12长度";
return false;
}
}
// 4，性别，必须选一个
function checksex(){
var checked = false;
var sexs = document.getElementsByName("sex");
for (var i = 0; i < sexs.length; i++) {
if (sexs[i].checked) {
checked = true;
break;
}
}
//
var sexspanObj = document.getElementById("sexspan");
if (checked) {
sexspanObj.innerHTML = "";
return true;
} else {
sexspanObj.innerHTML = "性别，必须选一个";
return false;
}
}
// 5, 兴趣爱好也必须至少选一个
function checkhobby(){
var checked = false;
var hobbys = document.getElementsByName("hobby");
for (var i = 0; i < hobbys.length; i++) {
if (hobbys[i].checked) {
checked = true;
break;
}
}
//
var hspanObj = document.getElementById("hspan");
if (checked) {
hspanObj.innerHTML = "";
return true;
} else {
hspanObj.innerHTML = "兴趣，至少选一个";
return false;
}
}
// 验证国籍 6，国家也必须选一个（美国，中国，或者英国）
function checkCountry(){
var countrySelect = document.getElementById("country");
var countryspan = document.getElementById("countryspan");
if (countrySelect.selectedIndex == 0) {
countryspan.innerHTML = "请选择国家！";
return false;
} else {
countryspan.innerHTML = "";
return true;
}
}
// 验证详细信息 7，自我评价 长度为8-15长度
function checkDesc() {
// 获取用户名输入框
var descInputObjValue = document.getElementById("desc").value;
alert(descInputObjValue);
//new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$");
var patt = /^([\u4E00-\u9FA5]|[a-zA-Z0-9]){5,15}$/;
var result = patt.test(descInputObjValue);
var descspanObj = document.getElementById("descspan");
if (result) {
descspanObj.innerHTML = "";
return true;
} else {
descspanObj.innerHTML = "自我评价 长度为8-15长度";
return false;
}
}
</script>
</head>
<body>
<fieldset>
<legend>注册页面</legend>
<!-- 在form标签中有个默认的事件 -->
<form action="http://127.0.0.1:9090" method="post" onsubmit="return _validata();">
<table>
<tr>
<td>用户名称：<font color="red">*</font>
</td>
<td><input id="user" type="text" name="user" value="请输入用户名" onclick="func()"
onblur="checkuser()" /> <span style="color: red" id="userspan"></span></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input id="pwd" type="password" name="pwd" onblur="checkpwd()" /> <span id="pwdspan"></span>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td><input id="repwd" type="text" name="repwd" onblur="checkrepwd()" /> <span
id="repwdspan"></span></td>
</tr>
<tr>
<td>选择性别：</td>
<td>
<input name="sex" type="radio" value="nan" onblur="checksex()" />男
<input name="sex" type="radio" value="nv" onblur="checksex()" />女 <span id="sexspan"></span></td>
</tr>
<tr>
<td>选择爱好：</td>
<td>
<input type="checkbox" name="hobby" value="C" />C
<input type="checkbox" name="hobby" value="C++" />C++
<input type="checkbox" name="hobby" value="Java" />Java
<input type="checkbox" name="hobby" value="PHP" />PHP
<input type="checkbox" name="hobby" value=".net" />.net
<span id="hspan"></span></td>
</tr>
<tr>
<td>选择国家：</td>
<td><select id="country" name="country">
<option>---请选择国家----</option>
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="EN">英国</option>
</select><span style="color: red" id="countryspan"></span></td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea id="desc" rows="10" cols="40" name="desc"></textarea><span style="color: red" id="descspan"></span></td>
</tr>
<tr>
<td><input type="submit" value="注册" /></td>
<td><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
作业八 图片轮换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.onload = function(){
var idx = 0;
var imgObj = document.getElementById("img");
window.setInterval(function(){
idx++;
idx %= 21;
imgObj.src="imgs/" + idx + ".jpg";
}, 1500);
}
</script>
</head>
<body>
<center>
<img id="img" alt="图片找不到" src="imgs/0.jpg">
</center>
</body>
</html>
2.12 正则表达式
正则表达式的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 表示要求字符串中，是否包含字母e
// var patt = new RegExp("e");
// var patt = /e/; // 也是正则表达式对象
// 表示要求字符串中，是否包含字母a或b或c
// var patt = /[abc]/;
// 表示要求字符串，是否包含小写字母
// var patt = /[a-z]/;
// 表示要求字符串，是否包含任意大写字母
// var patt = /[A-Z]/;
// 表示要求字符串，是否包含任意数字
// var patt = /[0-9]/;
// 表示要求字符串，是否包含字母，数字，下划线
// var patt = /\w/;
// 表示要求 字符串中是否包含至少一个a
// var patt = /a+/;
// 表示要求 字符串中是否 *包含* 零个 或 多个a
// var patt = /a*/;
// 表示要求 字符串是否包含一个或零个a
// var patt = /a?/;
// 表示要求 字符串是否包含连续三个a
// var patt = /a{3}/;
// 表示要求 字符串是否包 至少3个连续的a，最多5个连续的a
// var patt = /a{3,5}/;
// 表示要求 字符串是否包 至少3个连续的a，
// var patt = /a{3,}/;
// 表示要求 字符串必须以a结尾
// var patt = /a$/;
// 表示要求 字符串必须以a打头
// var patt = /^a/;
// 要求字符串中是否*包含* 至少3个连续的a
// var patt = /a{3,5}/;
// 要求字符串，从头到尾都必须完全匹配
// var patt = /^a{3,5}$/;
var patt = /^\w{5,12}$/;
var str = "wzg168[[[";
alert( patt.test(str) );
</script>
</head>
<body>
</body>
</html>
一些常用的正则表达式的用法
整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2}$
只能输入数字：”^[0-9]*$”
只能输入n位的数字：”^\d{n}$”
只能输入至少n位的数字：”^\d{n,}$”
只能输入m~n位的数字：”^\d{m,n}$”
只能输入零和非零开头的数字：”^(0|[1-9][0-9]*)$”。
只能输入有两位小数的正实数：”^[0-9]+(.[0-9]{2})?$”。
只能输入有1~3位小数的正实数：”^[0-9]+(.[0-9]{1,3})?$”。
只能输入非零的正整数：”^\+?[1-9][0-9]*$”。
只能输入非零的负整数：”^\-[1-9][]0-9″*$。
只能输入长度为3的字符：”^.{3}$”。
只能输入由26个英文字母组成的字符串：”^[A-Za-z]+$”
。
只能输入由26个大写英文字母组成的字符串：”^[A-Z]+$”。
只能输入由26个小写英文字母组成的字符串：”^[a-z]+$”。
只能输入由数字和26个英文字母组成的字符串：”^[A-Za-z0-9]+$”。
只能输入由数字、26个英文字母或者下划线组成的字符串：”^\w+$”。
验证用户密码：”^[a-zA-Z]\w{5,17}$”
正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。验证是否含有^%&’,;=?$\”等字符：”[^%&',;=?$\x22]+”。
只能输入汉字：”^[\u4e00-\u9fa5]{0,}$”
验证Email地址：”^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$”。
验证InternetURL：”^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$”。
验证电话号码：”^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$”
正确格式为：”XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX”。
验证身份证号（15位或18位数字）：”^\d{15}|\d{18}$”。
验证一年的12个月：”^(0?[1-9]|1[0-2])$”
正确格式为：”01″～”09″和”1″～”12″。
验证一个月的31天：”^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为；”01″～”09″和”1″～”31″。
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）String.prototype.len=function(){return this.replace(/[^\x00-\xff]/g,”aa”).length;}
匹配空行的正则表达式：\n[\s| ]*\r
匹配html标签的正则表达式：<(.*)>(.*)<\/(.*)>|<(.*)\/>
匹配首尾空格的正则表达式：(^\s*)|(\s*$)
应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：String.prototype.trim = function(){return this.replace(/(^\s*)|(\s*$)/g, “”);}
利用正则表达式分解和转换IP地址：
下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：
function IP2V(ip){re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式
if(re.test(ip)){return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1}else{throw new Error(“Not a valid IP address!”)}}
不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：
var ip=”10.100.20.168″ip=ip.split(“.”)alert(“IP值是：”+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
利用正则表达式限制网页表单里的文本框输入内容：
用正则表达式限制只能输入中文：onkeyup=”value=value.replace(/[^\u4E00-\u9FA5]/g,”)” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\u4E00-\u9FA5]/g,”))”
用正则表达式限制只能输入全角字符： onkeyup=”value=value.replace(/[^\uFF00-\uFFFF]/g,”)” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\uFF00-\uFFFF]/g,”))”
用正则表达式限制只能输入数字：onkeyup=”value=value.replace(/[^\d]/g,”) “onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))”
用正则表达式限制只能输入数字和英文：onkeyup=”value=value.replace(/[\W]/g,”) “onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))”
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力匹配首尾空白字符的正则表达式：^\s*|\s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
评注：表单验证时很实用匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}评注：匹配形式如 0511-4405222 或 021-87888822匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始匹配中国邮政编码：[1-9]\d{5}(?!\d)
评注：中国邮政编码为6位数字匹配身份证：\d{15}|\d{18}
评注：中国的身份证为15位或18位匹配ip地址：\d+\.\d+\.\d+\.\d+
评注：提取ip地址时有用匹配特定数字：^[1-9]\d*$
//匹配正整数^-[1-9]\d*$
//匹配负整数^-?[1-9]\d*$
//匹配整数^[1-9]\d*|0$
//匹配非负整数（正整数 + 0）^-[1-9]\d*|0$
//匹配非正整数（负整数 + 0）^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$
//匹配正浮点数^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$
//匹配负浮点数^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
//匹配浮点数^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
//匹配非负浮点数（正浮点数 + 0）^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //匹配非正浮点数（负浮点数 + 0）评注：处理大量数据时有用，具体应用时注意修正匹配特定字符串：^[A-Za-z]+$
//匹配由26个英文字母组成的字符串^[A-Z]+$
//匹配由26个英文字母的大写组成的字符串^[a-z]+$
//匹配由26个英文字母的小写组成的字符串^[A-Za-z0-9]+$
//匹配由数字和26个英文字母组成的字符串^\w+$
//匹配由数字、26个英文字母或者下划线组成的字符串评注：最基本也是最常用的一些表达式整理出来的一些常用的正则表达式 所属分类: JScript
(三)
Email : /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/
isEmail1 : /^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/;
isEmail2 : /^.*@[^_]*$/;
Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/
Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/
Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\’:+!]*([^<>\"\"])*$/
IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/
Currency : /^\d+(\.\d+)?$/
Number : /^\d+$/
Code : /^[1-9]\d{5}$/
QQ : /^[1-9]\d{4,8}$/
Integer : /^[-\+]?\d+$/
Double : /^[-\+]?\d+(\.\d+)?$/
English : /^[A-Za-z]+$/
Chinese : /^[\u0391-\uFFE5]+$/
UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\’\”]*)|.{0,5})$|\s/
PassWord :^[\\w]{6,12}$
ZipCode : ^[\\d]{6}/^(\+\d+ )?(\(\d+\) )?[\d ]+$/;
//这个是国际通用的电话号码判断/^(1[0-2]\d|\d{1,2})$/;
//这个是年龄的判断/^\d+\.\d{2}$/;
//这个是判断输入的是否为货币值
应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）String.prototype.len=function(){return this.replace([^\x00-\xff]/g,”aa”).length;}
应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：String.prototype.trim = function(){return this.replace(/(^\s*)|(\s*$)/g, “”);}
匹配空行的正则表达式：\n[\s| ]*\r
匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/
匹配首尾空格的正则表达式：(^\s*)|(\s*$)
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?^\d+$ //
匹配非负整数（正整数 + 0）^[0-9]*[1-9][0-9]*$ //
匹配正整数^((-\d+)|(0+))$ //
匹配非正整数（负整数 + 0）^-[0-9]*[1-9][0-9]*$ //
匹配负整数^-?\d+$ //
匹配整数^\d+(\.\d+)?$ //
匹配非负浮点数（正浮点数 + 0）^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$ //
匹配正浮点数^((-\d+(\.\d+)?)|(0+(\.0+)?))$ //
匹配非正浮点数（负浮点数 + 0）^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ //
匹配负浮点数^(-?\d+)(\.\d+)?$
第三章 jQuary的使用
3.1 jQuary的初体验
3.1.1 使用jQuary给一个按钮绑定单击事件
<!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(){
//使用选择器获取按钮对象，随后绑定单击响应函数
$("#btnId").click(function(){
//弹出Hello
alert('Hello');
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
3.1.2 jQuary的核心函数$的用法
3、jQuery 核心函数
$ 是jQuery 的核心函数，能完成jQuery 的很多功能。$()就是调用$这个函数
1、传入参数为[ 函数] 时：
表示页面加载完成之后。相当于window.onload = function(){}
2、传入参数为[ HTML 字符串] 时：
会对我们创建这个html 标签对象
3、传入参数为[ 选择器字符串] 时：
$(“#id 属性值”); id 选择器，根据id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据class 属性查询标签对象
4、传入参数为[ DOM 对象] 时：
会把这个dom 对象转换为jQuery 对象
3.2 jQuary对象和Dom对象的区分
3.2.1 什么是jQuary对象，什么是dom对象
Dom 对象
1.通过getElementById()查询出来的标签对象是Dom 对象
2.通过getElementsByName()查询出来的标签对象是Dom 对象
3.通过getElementsByTagName()查询出来的标签对象是Dom 对象
4.通过createElement() 方法创建的对象，是Dom 对象
DOM 对象Alert 出来的效果是：[object HTML 标签名Element]
jQuery 对象
5.通过JQuery 提供的API 创建的对象，是JQuery 对象
6.通过JQuery 包装的Dom 对象，也是JQuery 对象
7.通过JQuery 提供的API 查询到的对象，是JQuery 对象
jQuery 对象Alert 出来的效果是：[object Object]
3.2.2 jQuary对象的本质是什么
jQuery对象是dom对象的数组+jQuary提供的一系列功能函数。
3.2.3 jQuary对象和Dom对象使用区别
jQuery对象不能使用Dom对象的属性和方法
Dom对象也不能使用jQuary对象的属性和方法
3.2.4 Dom对象和jQuary对象的互相转化
1、dom对象转换成jQuary对象
1. 现有Dom对象
2.$(DOM对象)就可以转换成jQuary对象
2、jQuery对象转为dom对象
1.先有jQuary对象
2.jQuary对象【下标】取出对应的DOM对象
3.3 jQuary选择器
3.3.1 基本选择器
基本选择器的练习
<!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");
});
//6.选择所有的div元素，且元素class为mini
$("#btn6").click(function () {
$("div.mini").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" />
<input type="button" value="选择 所有的 div 元素且class为mini的元素" id="btn6" />
<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.3.2 层次选择器
ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在prev 元素后的next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配prev 元素之后的所有siblings 元素
3.3.3 过滤选择器
基本过滤器
基本过滤选择器的练习
<!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");
});
//11.选择没有执行动画的最后一个div
$("#btn11").click(function(){
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<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>
内容过滤器
内容过滤器的练习
<!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>
其中has的用法
属性过滤器
<!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" style="display: none;"/>
<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>
可见性过滤器
：hiddle
匹配所有不可见的元素，或者type为hiddle的元素
：visible
匹配所有可见的tr元素
表单过滤器
表单对象属性过滤器
<!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(){
/**
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象的属性
:enabled
:disabled
:checked
:selected
*/
//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").length );
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
// 获取全部选中的复选框标签对象
var $checkboies = $(":checkbox:checked");
// 老式遍历
// for (var i = 0; i < $checkboies.length; i++){
// alert( $checkboies[i].value );
// }
// each方法是jQuery对象提供用来遍历元素的方法
// 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
$checkboies.each(function () {
alert( this.value );
});
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
// 获取选中的option标签对象
var $options = $("select option:selected");
// 遍历，获取option标签中的文本内容
$options.each(function () {
// 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
alert(this.innerHTML);
});
});
})
</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.4 jQuary元素筛选
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) 返回当前元素的上一个兄弟元素 功能和prev+next相反
prevAll() 返回当前元素前面所有的兄弟元素 功能和prev~siblings功能相反
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素 功能和nextUntil()相反
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();
/**
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)1.6*
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])
查找
children([expr])
closest(expr,[con]|obj|ele)1.6*
find(expr|obj|ele)
next([expr])
nextall([expr])
nextUntil([exp|ele][,fil])1.6*
parent([expr])
parents([expr])
parentsUntil([exp|ele][,fil])1.6*
prev([expr])
prevall([expr])
prevUntil([exp|ele][,fil])1.6*
siblings([expr])
串联
add(expr|ele|html|obj[,con])
*/
//(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
//is用来检测jq对象是否符合指定的选择器
$("#btn5").click(function(){
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").add("#one").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>
<p class="selected"></p><p class="selected">我是猪</p>
</body>
</html>
第四章 jQuary的操作
4.1 jQuary的属性操作
注意：不传参数是获取，传递参数的设置
html() 它可以设置和获取起始标签和结束标签中的内容。跟dom 属性innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签中的文本。跟dom 属性innerText 一样。
val() 它可以设置和获取表单项的value 属性值。跟dom 属性value 一样 val属性还可以设置多个表单项的选中状态
attr() 可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等等 attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值，只推荐操作checked、readOnly、selected、disabled等等
// each方法是jQuery对象提供用来遍历元素的方法 // 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象 $checkboies.each(function () { alert( this.value ); });
val的示例代码：
<!DOCTYPE html>
<html lang="zh_CN">
<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 () {
/!*
// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
*!/
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
);
});*/
$(function () {
//批量操作单选
/*$(":radio").val(["radio2"]);
//批量操作复选框
$(":checkbox").val(["checkbox1","checkbox2","checkbox3"]);
//批量操作下拉框选中状态
$("#multiple").val(["mul1","mul2","mul3","mul4"]);*/
//可以一次性操作全部的
// $(":radio,:checkbox").val(["radio2","checkbox1","checkbox2"])
});
</script>
</head>
<body>
<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>
</body>
</html>
4.2 DOM的增删改
内部插入： appendTo() a.appendTo(b) 把a 插入到b 子元素末尾，成为最后一个子元素. 把所有匹配的元素追加到另一个指定的元素元素集合中。
prependTo() a.prependTo(b) 把a 插到b 所有子元素前面，成为第一个子元素
外部插入：
After() b.after(a)得到ba
Before()b.before(a)得到ab
insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBefore(b) 得到ab
替换:
replaceWith() a.replaceWith(b) 用b 替换掉a 他是移动到目标位置来替换，而不是复制一份来替换。
replaceAll() a.replaceAll(b) 用 a 替换掉所有b 和replaceWith相反
删除：
remove() a.remove(); 删除a 标签
empty() a.empty(); 清空a 标签里的内容
复制：
clone 克隆元素
dom的练习–添加删除记录
<!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 deletete(){
var val = $(this).parents("tr").find("td").first().text();
if (confirm("你确定要删除"+val+"吗")) {
$(this).parents("tr").remove();
}
return false;
};
$(function () {
$("a").click(deletete);
$("#addEmpButton").click(function () {
var value = $(":text")[0].value;
var value1 = $(":text")[1].value;
var value2 = $(":text")[2].value;
var $1 = $("<tr><td>"+value+"</td>" +
"<td>"+value1+"</td>" +
"<td>"+value2+"</td>" +
"<td><a href=\"deleteEmp?id=002\">Delete</a></td></tr>");
$1.find("a").click(
deletete)
$1.appendTo($("#employeeTable"));
})
})
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</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>
4.3 CSS样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加样式。
offset() 获取和设置元素的坐标。
css样式操作练习–品牌展示
<!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('redDiv')
});
$('#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>
4.4jQuary动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数(动画完成后自动调用的函数)
淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可
见，0.5 半透明
fadeToggle() 淡入/淡出切换
4.5 jQuary 事件的操作
jQuary和原生js
他们分别是在什么时候触发？
1.jQuary的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后马上执行。
2、原生js的页面加载完成之后，出来要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载
他们触发的顺序？
1、jQuery页面加载完成之后先执行
2、原生js的页面加载完成之后
他们执行的次数？
1、原生js的页面加载完成之后，只会执行最后一次赋值语句
2、jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行
$(function(){
$("h5").click(function(){//传function是绑定事件
alert('h5单击事件 == click方法绑定')
})
$("button").click(function(){
$("h5").click();//不传function是触发事件
})
})
事件的处理方法
click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。
one() 使用上跟bind 一样。但是one 方法绑定的事件只会响应一次。
unbind() 跟bind 方法相反的操作，解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪
怕这个元素是后面动态创建出来的也有效
事件的冒泡
事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时
候，同一个事件也被传递到了父元素的事件里去 响应。
那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
javaScript 事件对象
事件对象，是封装有触发的事件信息的一个javascript 对象。
我们重点关心的是怎么拿到这个javascript 的事件对象。以及使用。
如何获取呢javascript 事件对象呢？
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参
数，这个参数名，我们习惯取名为event。
这个event 就是javascript 传递参事件处理函数的事件对象。
比如：
//1.原生javaScript获取事件对象
window.onload = function(){
document.getElementById("areaDiv").onclick = function(event){
concole.log(event);
}
}
//2.jQuery获取事件的对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
{);
3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
练习07事件 图片跟随
<!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 == "mousemove") {
console.log(event);
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10//这里加十，是为了和鼠标位置分离，这样才可以真正每次都响应事件，以防止鼠标指着判定为不在当前图像位置上
});
} else if (event.type == "mouseout") {
$("#showBig").hide();
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>
第五章 xml的用法
5.1 xml简介
什么时xml？
xml是可扩展的标志性语言
xml的作用？
xml 的主要作用有：
1、用来保存数据，而且这些数据具有自我描述性
2、它还可以做为项目或者模块的配置文件
3、还可以做为网络传输数据的格式（现在JSON 为主）。
xml语法
- 文档声明。
- 元素（标签）
- xml 属性
- xml 注释
- 文本区域（CDATA 区）
5.2 xml文档声明
而且这个<?xml 要连在一起写，否则会有报错 属性 version 是版本号 encoding 是xml 的文件编码 standalone=“yes/no” 表示这个xml 文件是否是独立的xml 文件
5.3 xml的元素
什么是xml元素？
xml元素指的是（且包括）开始标签直到（且包括）结束标签的部分
元素可包含其他元素、文本或者两者的混合物。元素也可以拥有属性
5.4 xml的属性
xml 的标签属性和html 的标签属性是非常类似的，属性可以提供元素的额外信息 在标签上可以书写属性： 一个标签上可以书写多个属性。每个属性的值必须使用引号引起来。 的规则和标签的书写规则一致。
属性的注意事项
1、属性必须使用引号引起来，不引会报错示例代码
5.4 xml 语法规则
5.4.1 所有的xml元素需要有关闭标签（也就是闭合）
5.4.2 xml标签对大小写敏感
5.4.3 xml必须正确的嵌套
5.4.4 xml文档必须有根元素
根元素就是顶级元素，
没有父标签的元素，叫顶级元素
根元素是没有父标签的顶级元素，而且是唯一一个才行
5.4.5 xml的属性值须加引号
5.4.6 xml中的特殊字符
5.4.7 文本区域（CDATA区）
CDATA语法可以告诉xml解析器，我CDATA里的文本内容，只是纯文本，不需要xml语法解析
CDATA 格式：
5.5 xml解析技术介绍
xml可扩展的标记语言
不管是html文件还是xml文件它们都是标记型文档，都可以使用w3c组织定制的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 文件。
5.6 dom4j解析技术
5.6.1 dom4j编程步骤
第一步： 先加载xml 文件创建Document 对
第二步：通过Document 对象拿到根元素对象
第三步：通过根元素.elelemts(标签名); 可以返回一个集合，这个集合里放着。所有你指定的标签名的元素对象
第四步：找到你想要修改、删除的子元素，进行相应在的操作
第五步，保存到硬盘上
package com.atguigu.pojo;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.junit.Test;
import javax.naming.Name;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
public class Dom4jTest {
@Test
public void xiao() throws Exception{
//创建一个SAXReader去读取document对象
SAXReader a = new SAXReader();
Document read = a.read("xml/books.xml");
//通过document对象去读取根元素
Element rootElement = read.getRootElement();
//通过根元素去获取每一个子元素
List<Element> book1 = rootElement.elements("book");
ArrayList<book> books = new ArrayList<>();
for (Element aa : book1) {
String name = aa.element("name").getText();
String price = aa.element("price").getText();
String authon = aa.element("authon").getText();
String sn = aa.attributeValue("sn");
books.add(new book(sn,name,Double.parseDouble(price),authon));
}
for (book aa : books) {
System.out.println(aa);
}
}
}
5.7 xpath查询
•XPath 是在 XML 文档中查找信息的语言
•XPath通过元素和属性进行查找，简化了Dom4j查找节点的过程，是W3C组织发布的标准。
•使用XPath必须导入jaxen-1.1-beta-6.jar包
•具体语法见 XPathTutorial(菜鸟必备)
•两个重要方法：document.selectSingleNode("/students/student[@id=‘1’]")document.selectNodes("/students/student")
public class Dom4jTest {
@Test
public void xiao() throws Exception{
//创建一个SAXReader去读取document对象
SAXReader a = new SAXReader();
Document read = a.read("xml/books.xml");
//通过document对象去读取根元素
//通过找到当前路径的sn属性来获取当前的Element
Element aaa = (Element)read.selectSingleNode("/books/book[@sn='SN1232343']");
System.out.println(aaa);
String name = aaa.element("name").getText();
System.out.println(name);
第六章 javaWeb
6.1 javaWeb的概念
什么是javaWeb
javaWeb是指所有通过java语言编写，可以通过浏览器访问的程序的总称，叫javaWeb
javaWeb是基于请求和相应来开发的
什么是请求
请求时客户端给服务器发送数据，叫请求request
什么是响应
相应是指服务器给客户端回传数据，叫相应response
请求和相应的关系
请求和相应是成对出现的，有请求就有响应
6.2 web资源的分类
web 资源按实现的技术和呈现的效果的不同，又分为静态资源和动态资源两种。
静态资源： html、css、js、txt、mp4 视频, jpg 图片
动态资源： jsp 页面、Servlet 程序
6.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 规范， 而且不断的完善以适应新的开发要求，适合大型项目（收费，用的不多，适合大公司）。
6.4 Tomcat 服务器和Servlet 版本的对应关系
当前企业常用的版本7.、8.
Servlet 程序从2.5 版本是现在世面使用最多的版本（xml 配置） 到了Servlet3.0 之后。就是注解版本的Servlet 使用。 以2.5 版本为主线讲解Servlet 程序。
6.5 Tomcat 的使用
6.5.1 安装
找到你需要用的Tomcat版本对应的zip压缩包，解压到需要安装的目录即可
6.5.2 目录介绍
bin 专门用来存放Tomcat 服务器的可执行程序
conf 专门用来存放Tocmat 服务器的配置文件
lib 专门用来存放Tomcat 服务器的jar 包
logs 专门用来存放Tomcat 服务器运行时输出的日记信息
temp 专门用来存放Tomcdat 运行时产生的临时数据
webapps 专门用来存放部署的Web 工程。
work 是Tomcat 工作时的目录，用来存放Tomcat 运行时jsp 翻译为Servlet 的源码，和Session 钝化的目录。
6.5.3 如何启动Tomcat服务器
找到Tomat目录下的bin目录下的startup.bat文件，双击，就可以启动Tomcat服务器
如何测试Tomcat 服务器启动成功？？？ 打开浏览器，在浏览器地址栏中输入以下地址测试： 1、http://localhost:8080 2、http://127.0.0.1:8080 3、http://真实ip:8080 当出现如下界面，说明Tomcat 服务器启动成功！！！
6.5.4 Tomcat的停止
1、点击tomcat 服务器窗口的x 关闭按钮 2、把Tomcat 服务器窗口置为当前窗口，然后按快捷键Ctrl+C 3、找到Tomcat 的bin 目录下的shutdown.bat 双击，就可以停止Tomcat 服务器
6.5.5 如何修改Tomcat的端口号
6.5.6 如何部署web工程到Tomcat中
第一种部署方法
第二种部署方法
找到Tomcat 下的conf 目录\Catalina\localhost\ 下,创建如下的配置文件：
abc.xml 配置文件内容如下：
6.5.7 手托html页面到浏览器和在浏览器中输入http://ip:端口号/工程名/访问的区别
手托html页面的原理
输入访问地址访问的原因
6.5.8 ROOT 的工程的访问，以及默认index.html 页面的访问
当我们在浏览器地址栏中输入访问地址如下： http://ip:port/ ====»» 没有工程名的时候，默认访问的是ROOT 工程。 当我们在浏览器地址栏中输入的访问地址如下： http://ip:port/工程名/ ====»» 没有资源名，默认访问index.html 页面
6.6 IDEA整合Tomcat服务器
操作的菜单如下：File | Settings | Build, Execution, Deployment | Application Servers
配置你的tomcat安装目录
6.7 IDEA中动态web工程的操作
6.7.1 IDEA中如何创建动态web工程
1.创建一个新模块
2.选择你要创建什么类型的模块
3.输入模块名，完成创建
创建完成的页面
最后在web-inf包下创建lib文件夹
6.7.2 Web工程的目录介绍
6.7.3 如何给动态Web工程添加额外的jar包
1.可以打开项目结构菜单操作界面，添加一个自己的类库：
2.添加你类库需要的jar包文件
3、选择你添加的类库，给哪个模块使用：
4.选择Artifacts选项，将类库，添加到打包部署中：，选一个选项
6.7.4如何在IDEA中部署工程到Tomcat上运行
1.建议修改web工程对应的Tomcat运行实例名称
2、确认你的Tomcat 实例中有你要部署运行的web 工程模块：
3、你还可以修改你的Tomcat 实例启动后默认的访问地址：
4.重启tomcat方法
①Update resources：更新静态的资源，比如html,js,css等 运行模式和调试模式都是立即生效； ②Update classes and resources：更新java,jsp和静态资源
\1. java 修改后，会被编译成.class 然后覆盖到target/kao文件夹下，IDE调试模式的情况下，立即生效。IDEA运行模式下，不立即生效，需要redeployed才可生效；
\2. jsp修改后，再次被访问的时候，会自动更新，重新编译成.java—->.class 保存在tomcat的work目录下。由于是访问时才检测是否修改，是否需要重新编译，所以 IDEA运行模式 和 IDEA调试模式下，都是立即生效。刷新下页面就可；
总结Update classes and resources：
1.运行模式下，jsp是 update classes and resources 是立即生效的，但是.java文件修改后 并不会立即生效
2.debug调试模式下，jsp和java文件修改 都会立即生效
③Redeploy：重新部署，发布到tomcat里，不重启tomcat，而是把原来的删掉，然后重新发布；
④Restart server：重启服务器;
6.7.5 修改工程访问路径
6.7.6 修改运行的端口号
6.7.7 配置资源热部署（当你的页面修改的时候，刷新网页直接修改）
第七章 servlet
7.1 Servlet技术
7.1.1 什么是Servlet
1、Servlet 是JavaEE 规范之一。规范就是接口
2、Servlet 就JavaWeb 三大组件之一。三大组件分别是：Servlet 程序、Filter 过滤器、Listener 监听器。
3、Servlet 是运行在服务器上的一个java 小程序，它可以接收客户端发送过来的请求，并响应数据给客户端。
7.1.2 手动实现Servlet程序
1、编写一个类去实现Servlet接口
2、实现service 方法，处理请求，并响应数据
3、到web.xml 中去配置servlet 程序的访问地址
Servlet程序实例代码
package com.atguigu.xiao;
import javax.servlet.*;
import java.io.IOException;
public class Helloworld implements Servlet {
@Override
public void init(ServletConfig servletConfig) throws ServletException {
}
@Override
public ServletConfig getServletConfig() {
return null;
}
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
System.out.println("被访问了");
}
@Override
public String getServletInfo() {
return null;
}
@Override
public void destroy() {
}
}
web.xml中的配置
web.xml 中的配置：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!-- servlet 标签给Tomcat 配置Servlet 程序-->
<servlet>
<!--servlet-name 标签Servlet 程序起一个别名（一般是类名） -->
<servlet-name>HelloServlet</servlet-name>
<!--servlet-class 是Servlet 程序的全类名-->
<servlet-class>com.atguigu.servlet.HelloServlet</servlet-class>
</servlet>
<!--servlet-mapping 标签给servlet 程序配置访问地址-->
<servlet-mapping>
<!--servlet-name 标签的作用是告诉服务器，我当前配置的地址给哪个Servlet 程序使用-->
<servlet-name>HelloServlet</servlet-name>
<!--url-pattern 标签配置访问地址<br/>
/ 斜杠在服务器解析的时候，表示地址为：http://ip:port/工程路径<br/>
/hello 表示地址为：http://ip:port/工程路径/hello <br/>
-->
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>
注意：/hello中的地址必须以斜杠打头
7.1.3 url地址到Servlet程序的访问图解
7.1.4 Servlet的生命周期
1、执行Servlet 构造器方法
2、执行init 初始化方法
第一、二步，是在第一次访问，的时候创建Servlet 程序会调用。
3、执行service 方法
第三步，每次访问都会调用。
4、执行destroy 销毁方法
第四步，在web 工程停止的时候调用。
7.1.5 GET请求和POST请求的分发处理
package com.atguigu.xiao;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
public class Helloworld implements Servlet {
@Override
public void init(ServletConfig servletConfig) throws ServletException {
}
@Override
public ServletConfig getServletConfig() {
return null;
}
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
HttpServletRequest a = (HttpServletRequest) servletRequest;
String method = a.getMethod();
if (method.equals("POST")) {//注意这里POST一定要大写
getpost();
} else {
getget();
}
}
@Override
public String getServletInfo() {
return null;
}
@Override
public void destroy() {
}
public void getpost() {
System.out.println("post的提交");
}
public void getget(){
System.out.println("get的提交");
}
}
7.1.6 通过继承httpServlet实现Servlet程序
一般在实际项目开发中，都是使用继承HttpServlet 类的方式去实现Servlet 程序。
1、编写一个类去继承HttpServlet 类
2、根据业务需要重写doGet 或doPost 方法
3、到web.xml 中的配置Servlet 程序的访问地址
Servlet类的代码：
public class HelloServlet2 extends HttpServlet {
/**
* doGet（）在get 请求的时候调用
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
System.out.println("HelloServlet2 的doGet 方法");
}
/**
* doPost（）在post 请求的时候调用
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
System.out.println("HelloServlet2 的doPost 方法");
}
}
xml里面的代码
<servlet>
<servlet-name>HelloServlet2</servlet-name>
<servlet-class>com.atguigu.servlet.HelloServlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet2</servlet-name>
<url-pattern>/hello2</url-pattern>
</servlet-mapping>
7.1.7 使用IDEA创建Servlet程序
菜单：new->Servlet程序
配置Servlet信息
（最好把Name和Classname设置为一样）
最后在xml里面配置访问地址
7.1.7 通过注解配置Servlet
@WebServlet("/provinceServlet")
因为java把最重要的设置为value，因此路径别设置为最重要的，因此可以用value=？来配置，又因为value可以省略，因此，直接用/provinceServlet来配置
java中创建Servlet程序,进行配置
7.1.8 Servlet类的继承体系图解
7.2 ServletConfig类
ServletConfig类从类名上看，就知道是Servlet程序的配置信息类
Servlet 程序和ServletConfig 对象都是由Tomcat 负责创建，我们负责使用。
Servlet 程序默认是第一次访问的时候创建，ServletConfig 是每个Servlet 程序创建时，就创建一个对应的ServletConfig 对 象。
7.2.1 ServletConfig类的三大作用
1.可以获取Servlet程序的别名Servlet-name
2.可以获取初始化参数init-param
3.获取ServletContext对象
web.xml中的配置：
<!-- servlet 标签给Tomcat 配置Servlet 程序-->
<servlet>
<!--servlet-name 标签Servlet 程序起一个别名（一般是类名） -->
<servlet-name>HelloServlet</servlet-name>
<!--servlet-class 是Servlet 程序的全类名-->
<servlet-class>com.atguigu.servlet.HelloServlet</servlet-class>
<!--init-param 是初始化参数-->
<init-param>
<!--是参数名-->
<param-name>username</param-name>
<!--是参数值-->
<param-value>root</param-value>
</init-param>
<!--init-param 是初始化参数-->
<init-param>
<!--是参数名-->
<param-name>url</param-name>
<!--是参数值-->
<param-value>jdbc:mysql://localhost:3306/test</param-value>
</init-param>
</servlet>
<!--servlet-mapping 标签给servlet 程序配置访问地址-->
<servlet-mapping>
<!--servlet-name 标签的作用是告诉服务器，我当前配置的地址给哪个Servlet 程序使用-->
<servlet-name>HelloServlet</servlet-name>
<!--
url-pattern 标签配置访问地址<br/>
/ 斜杠在服务器解析的时候，表示地址为：http://ip:port/工程路径<br/>
/hello 表示地址为：http://ip:port/工程路径/hello <br/>
-->
<url-pattern>/hello</url-pattern>
</servlet-mapping>
Servlet 中的代码：
@Override
public void init(ServletConfig servletConfig) throws ServletException {
System.out.println("2 init 初始化方法");
// 1、可以获取Servlet 程序的别名servlet-name 的值
System.out.println("HelloServlet 程序的别名是:" + servletConfig.getServletName());
// 2、获取初始化参数init-param
System.out.println("初始化参数username 的值是;" + servletConfig.getInitParameter("username"));
System.out.println("初始化参数url 的值是;" + servletConfig.getInitParameter("url"));
// 3、获取ServletContext 对象
System.out.println(servletConfig.getServletContext());
}
7.2.2 注意事项，继承HttpServlet重写init（ServletConfig servletconfig）的时候一定要调用父类的这个方法super.init(servletconfig)
7.3 ServletContext类
7.3.1 什么是ServletContext
1、ServletContext 是一个接口，它表示Servlet 上下文对象
2、一个web 工程，只有一个ServletContext 对象实例。
3、ServletContext 对象是一个域对象。
4、ServletContext 是在web 工程部署启动的时候创建。在web 工程停止的时候销毁。
5、servletContext.getMimeType("/file/"+downloadFileName);下载的文件类型（给他一个地址）
什么是域对象?
域对象，是可以像Map 一样存取数据的对象，叫域对象。
这里的域指的是存取数据的操作范围，整个web 工程。
存数据取数据删除数据
Map put() get() remove()
域对象setAttribute() getAttribute() removeAttribute();
7.3.2 ServletContext类的四个作用
1、获取web.xml 中配置的上下文参数context-param
2、获取当前的工程路径，格式: /工程路径
3、获取工程部署后在服务器硬盘上的绝对路径
4、像Map 一样存取数据
7.3.3 ServletContext的演示代码
当前工作路径和实际地址的获取
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
// 1、获取web.xml 中配置的上下文参数context-param
ServletContext context = getServletConfig().getServletContext();
String username = context.getInitParameter("username");
System.out.println("context-param 参数username 的值是:" + username);
System.out.println("context-param 参数password 的值是:" +
context.getInitParameter("password"));
// 2、获取当前的工程路径，格式: /工程路径
System.out.println( "当前工程路径:" + context.getContextPath() );// /web_servlet
// 3、获取工程部署后在服务器硬盘上的绝对路径
/**
* / 斜杠被服务器解析地址为:http://ip:port/工程名/ 映射到IDEA 代码的web 目录<br/>
*/
System.out.println("工程部署的路径是:" + context.getRealPath("/"));
System.out.println("工程下css 目录的绝对路径是:" + context.getRealPath("/css"));//
// C:\Users\10185\IdeaProjects\javaWeb\out\artifacts\web_servlet_war_exploded\css
System.out.println("工程下imgs 目录1.jpg 的绝对路径是:" + context.getRealPath("/imgs/1.jpg"));
}
xml中的配置
<!--context-param 是上下文参数(它属于整个web 工程)-->
<context-param>
<param-name>username</param-name>
<param-value>context</param-value>
</context-param>
<!--context-param 是上下文参数(它属于整个web 工程)-->
<context-param>
<param-name>password</param-name>
<param-value>root</param-value>
</context-param>
ServletContext像Map一样存取数据：
ContextServlet代码：
public class ContextServlet1 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
// 获取ServletContext 对象
ServletContext context = getServletContext();
System.out.println(context);
System.out.println("保存之前: Context1 获取key1 的值是:"+ context.getAttribute("key1"));
context.setAttribute("key1", "value1");
System.out.println("Context1 中获取域数据key1 的值是:"+ context.getAttribute("key1"));
}
}
ServletContext中的属性值都是公用的
7.4 HTTP协议
7.4.1 什么是HTTP协议
什么是协议?
协议是指双方，或多方，相互约定好，大家都需要遵守的规则，叫协议。
所谓HTTP 协议，就是指，客户端和服务器之间通信时，发送的数据，需要遵守的规则，叫HTTP 协议。
HTTP 协议中的数据又叫报文。
7.4.2 请求的HTTP协议格式
客户端给服务器发送数据叫请求。
服务器给客户端回传数据叫响应。
请求又分为GET 请求，和POST 请求两种
GET请求
1.请求行
（1）请求的方式
（2）请求的资源路径【+?+请求参数】
（3）请求的协议的版本号
2.请求头
key:value 组成 不同的键值对，表示不同的涵义
POST请求
1.请求行
(1) 请求的方式POST
(2) 请求的资源路径[+?+请求参数]
(3) 请求的协议的版本号HTTP/1.1
2、请求头
- key : value 不同的请求头，有不同的含义
空行
3、请求体===»> 就是发送给服务器的数据
常用请求头的说明
Accept: 表示客户端可以接收的数据类型
Accpet-Languege: 表示客户端可以接收的语言类型
User-Agent: 表示客户端浏览器的信息
Host： 表示请求时的服务器ip 和端口号
哪些是GET请求，哪些是POST请求
GET请求有哪些：
1、form 标签method=get 2、a 标签 3、link 标签引入css 4、Script 标签引入js 文件 5、img 标签引入图片 6、iframe 引入html 页面 7、在浏览器地址栏中输入地址后敲回车 POST 请求有哪些： 8、form 标签method=post
7.4.3响应的HTTP协议格式
1、响应行
(1) 响应的协议和版本号
(2) 响应状态码
(3) 响应状态描述符
2、响应头
(1) key : value 不同的响应头，有其不同含义
空行
3、响应体—-»> 就是回传给客户端的数据
7.4.4 MIME类型说明
MIME是HTTP协议中的数据类型
MIME 的英文全称是"Multipurpose Internet Mail Extensions" 多功能Internet 邮件扩充服务。MIME 类型的格式是“大类型/小 类型”，并与某一种文件的扩展名相对应。
常见的MIME类型
7.4.5 谷歌浏览器怎么查看HTTP协议
7.5 HttpServleRequest类
7.5.1 httpServletRequest类有什么用
每次只要有请求进入Tomcat 服务器，Tomcat 服务器就会把请求过来的HTTP
协议信息解析好封装到Request 对象中。
然后传递到service 方法（doGet 和doPost）中给我们使用。我们可以通过
HttpServletRequest 对象，获取到所有请求的信息。
7.5.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() 获取请求转发对象
public class Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取请求的资源路径
System.out.println("请求的资源路径是:"+req.getRequestURI());
//获取请求的统一资源定位符（绝对路径）
System.out.println("请求的绝对路径是:"+req.getRequestURL());
//获取客户端的IP地址
/**
* 在IDEA 中，使用localhost 访问时，得到的客户端ip 地址是===>>> 127.0.0.1<br/>
* 在IDEA 中，使用127.0.0.1 访问时，得到的客户端ip 地址是===>>> 127.0.0.1<br/>
* 在IDEA 中，使用真实ip 访问时，得到的客户端ip 地址是===>>> 真实的客户端ip 地址<br/>
*/
System.out.println("客户端的ip地址是："+req.getRemoteHost());
/*请求的资源路径是:/07_web/servlet
请求的绝对路径是:http://192.168.1.223:8080/07_web/servlet
客户端的ip地址是：192.168.1.152*/
System.out.println(req.getHeader("User-Agent"));
//Mozilla/5.0 (Linux; Android 10; SKR-A0 Build/G66X2006170CN00MQ2; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.120 MQQBrowser/6.2 TBS/045332 Mobile Safari/537.36 V1_AND_SQ_8.4.8_1492_YYB_D QQ/8.4.8.4810 NetType/WIFI WebP/0.3.0 Pixel/1080 StatusBarHeight/66 SimpleUISwitch/0 QQTheme/1000 InMagicWin/0
}
}
7.5.3 如何获取请求参数
public class Parameter extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(req.getParameter("用户名"));
System.out.println(req.getParameter("密码"));
String[] hobby = req.getParameterValues("兴趣爱好");
List<String> strings = Arrays.asList(hobby);
System.out.println(strings);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");//记得一定要加上字符集
System.out.println(req.getParameter("用户名"));
System.out.println(req.getParameter("密码"));
String[] hobby = req.getParameterValues("兴趣爱好");
List<String> strings = Arrays.asList(hobby);
System.out.println(strings);
}
}
7.5.4 doGet请求和post请求的中文乱码问题
7.5.5 请求的转化
什么是请求的转化？
请求转化是指，服务器收到请求后，从一次资源跳转到另一个资源的操作叫做请求转发
请求转发图解
请求转发代码实现
Servlet1代码
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（柜台1）中查看参数（材料）：" + username);
// 给材料盖一个章，并传递到Servlet2（柜台2）去查看
req.setAttribute("key1","柜台1 的章");
// 问路：Servlet2（柜台2）怎么走
/**
* 请求转发必须要以斜杠打头，/ 斜杠表示地址为：http://ip:port/工程名/ , 映射到IDEA 代码的web 目录
<br/>
*
*/
RequestDispatcher requestDispatcher = req.getRequestDispatcher("/servlet2");
// RequestDispatcher requestDispatcher = req.getRequestDispatcher("http://www.baidu.com");
// 走向Sevlet2（柜台2）
requestDispatcher.forward(req,resp);
}
}
Servlet2代码:
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（柜台2）中查看参数（材料）：" + username);
// 查看柜台1 是否有盖章
Object key1 = req.getAttribute("key1");
System.out.println("柜台1 是否有章：" + key1);
// 处理自己的业务
System.out.println("Servlet2 处理自己的业务");
}
}
7.5.6 base标签的作用
代码的解释
html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base href="http://localhost:8080/07_web/a/b/mars.html">
</head>
<body>
<a href="../../form.html">点我跳转到form.html</a><!--不用base自定义相对路径它指向的是当前网址的相对路径，在servlet1里它
网址的路径一直指向的是他自己，localhost:8080/07_web/servlet1这个路径，转发到mars.html页面，这个路径还是localhost:8080/07_web/servlet1
因此，找不到相对路径的位置，因而失败，但是可以用base标签自定义路径，来锁定他的相对路径位置，这样就不会找不到了-->
</body>
</html>
java中的代码
public class Servlet1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
System.out.println("Servlet对"+username+"的操作");
request.setAttribute("key", "我盖了一个章");
RequestDispatcher requestDispatcher = request.getRequestDispatcher("/a/b/mars.html");
requestDispatcher.forward(request, response);
}
}
7.5.7 Web中的相对路径和绝对路径
在javaWeb中，路径分为相对路径和绝对路径两种：
在javaWeb 中，路径分为相对路径和绝对路径两种：
相对路径是：
. 表示当前目录
.. 表示上一级目录
资源名表示当前目录/资源名
绝对路径：
http://ip:port/工程路径/资源路径
在实际开发中，路径都使用绝对路径，而不简单的使用相对路径。
1、绝对路径
2、base+相对
7.5.8 Web中 / 斜杠的不同意义
7.6 HttpServletResponse类
7.6.1 HttpServletResponse类的作用
HttpServletResponse 类和HttpServletRequest 类一样。每次请求进来，Tomcat 服
务器都会创建一个Response 对象传递给Servlet 程序去使用。HttpServletRequest 表
示请求过来的信息，HttpServletResponse 表示所有响应的信息，我们如果需要设置
返回给客户端的信息，都可以通过HttpServletResponse 对象来进行设置
7.6.2 两个输出流的说明
字节流getOutputStream(); 常用于下载（传递二进制数据） 字符流getWriter(); 常用于回传字符串（常用）两个流同时只能使用一个。
使用了字节流，就不能再使用字符流，反之亦然，否则就会报错。
7.6.3 往客户端回传数据并响应的乱码解决
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/*response.setCharacterEncoding("UTF-8");//设置服务器的字符编码
response.setHeader("Content-Type","text/html;charset=UTF-8");//设置浏览器的字符编码*/
//另一种简单的方法
response.setContentType("text/html;charset=UTF-8");//注意一定要在获取流之前输出流
PrintWriter writer = response.getWriter();
writer.write("我是一个小猪猪");
}
}
7.6.4 重定向的两种方式
请求重定向的第一种方案： // 设置响应状态码302 ，表示重定向，（已搬迁） resp.setStatus(302); // 设置响应头，说明新的地址在哪里 resp.setHeader(“Location”, “http://localhost:8080”);
请求重定向的第二种方案：
resp.sendRedirect(“http://localhost:8080”);
第八章 jsp
8.1 什么是jsp，它有什么用
jsp 的全换是java server pages。Java 的服务器页面。
jsp 的主要作用是代替Servlet 程序回传html 页面的数据。
因为Servlet 程序回传html 页面数据是一件非常繁锁的事情。开发成本和维护成本都极高。
Servlet回传html页面数据的代码:
public class PringHtml extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
// 通过响应的回传流回传html 页面数据
resp.setContentType("text/html; charset=UTF-8");
PrintWriter writer = resp.getWriter();
writer.write("<!DOCTYPE html>\r\n");
writer.write(" <html lang=\"en\">\r\n");
writer.write(" <head>\r\n");
writer.write(" <meta charset=\"UTF-8\">\r\n");
writer.write(" <title>Title</title>\r\n");
writer.write(" </head>\r\n");
writer.write(" <body>\r\n");
writer.write(" 这是html 页面数据\r\n");
writer.write(" </body>\r\n");
writer.write("</html>\r\n");
writer.write("\r\n");
}
}
jsp 回传一个简单的html页面的代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
这是html 页面数据
</body>
</html>
jsp的小结
8.2 jsp的本质
jsp 页面本质上是一个Servlet 程序。
当我们第一次访问jsp 页面的时候。Tomcat 服务器会帮我们把jsp 页面翻译成为一个java 源文件。并且对它进行编译成为.class 字节码程序。我们打开java 源文件不难发现其里面的内容是：
我们跟踪原代码发现，HttpJspBase 类。它直接地继承了HttpServlet 类。也就是说。jsp 翻译出来的java 类，它间接了继承了HttpServlet 类。也就是说，翻译出来的是一个Servlet 程序
总结：通过翻译的java 源代码我们就可以得到结果：jsp 就是Servlet 程序。 大家也可以去观察翻译出来的Servlet 程序的源代码，不难发现。其底层实现，也是通过输出流。把html 页面数据回传给客户端。
public void _jspService(final javax.servlet.http.HttpServletRequest request, final
javax.servlet.http.HttpServletResponse response)
throws java.io.IOException, javax.servlet.ServletException {
final java.lang.String _jspx_method = request.getMethod();
if (!"GET".equals(_jspx_method) && !"POST".equals(_jspx_method) && !"HEAD".equals(_jspx_method)
&& !javax.servlet.DispatcherType.ERROR.equals(request.getDispatcherType())) {
response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED, "JSPs only permit GET POST or
HEAD");
return;
}
final javax.servlet.jsp.PageContext pageContext;
javax.servlet.http.HttpSession session = null;
final javax.servlet.ServletContext application;
final javax.servlet.ServletConfig config;
javax.servlet.jsp.JspWriter out = null;
final java.lang.Object page = this;
javax.servlet.jsp.JspWriter _jspx_out = null;
javax.servlet.jsp.PageContext _jspx_page_context = null;
try {
response.setContentType("text/html;charset=UTF-8");
pageContext = _jspxFactory.getPageContext(this, request, response,
null, true, 8192, true);
_jspx_page_context = pageContext;
application = pageContext.getServletContext();
config = pageContext.getServletConfig();
session = pageContext.getSession();
out = pageContext.getOut();
_jspx_out = out;
out.write("\r\n");
out.write("\r\n");
out.write("<html>\r\n");
out.write("<head>\r\n");
out.write(" <title>Title</title>\r\n");
out.write("</head>\r\n");
out.write("<body>\r\n");
out.write(" a.jsp 页面\r\n");
out.write("</body>\r\n");
out.write("</html>\r\n");
} catch (java.lang.Throwable t) {
if (!(t instanceof javax.servlet.jsp.SkipPageException)){
out = _jspx_out;
if (out != null && out.getBufferSize() != 0)
try {
if (response.isCommitted()) {
out.flush();
} else {
out.clearBuffer();
}
} catch (java.io.IOException e) {}
if (_jspx_page_context != null) _jspx_page_context.handlePageException(t);
else throw new ServletException(t);
}
} finally {
_jspxFactory.releasePageContext(_jspx_page_context);
}
}
8.3 jsp的三种语法
8.3.1 jsp头部的page指令
jsp的page指令可以修改jsp页面中一些重要的属性，或者行为
<%@ page contentType=“text/html;charset=UTF-8” language=“java”%>
8.3.2 jsp中的常用脚本
声明脚本(极少使用)
声明的脚本的格式 <%! 声明的java代码%>
作用：可以给jsp翻译出来的java类定义属性和方法甚至是静态代码块。内部类等。
练习： 1、声明类属性
2、声明static 静态代码块
3、声明类方法
4、声明内部类
代码示例:
<%--1、声明类属性--%>
<%!
private Integer id;
private String name;
private static Map<String,Object> map;
%>
<%--2、声明static 静态代码块--%>
<%!
static {
map = new HashMap<String,Object>();
map.put("key1", "value1");
map.put("key2", "value2");
map.put("key3", "value3");
}
%>
<%--3、声明类方法--%>
<%!
public int abc(){
return 12;
}
%>
<%--4、声明内部类--%>
<%!
public static class A {
private Integer id = 12;
private String abc = "abc";
}
%>
声明脚本代码翻译对照：
表达式脚本(常用)
表达式脚本的格式是：<%=表达式%>
表达式脚本的作用是：在jsp页面上输出数据
表达式脚本的特点：
1、所有的表达式脚本都会被翻译到_jspService() 方法中_
2、表达式脚本都会被翻译成为out.print()输出到页面上
3、由于表达式脚本翻译的内容都在_jspService() 方法中,所以_jspService()方法中的对象都可以直接使用。
4、表达式脚本中的表达式不能以分号结束。
练习:
- 输出整型
- 输出浮点型
- 输出字符串
- 输出对象
代码脚本
代码脚本的格式是：
<%
java语句
%>
代码脚本的作用是：可以在jsp页面中，编写我们自己需要的功能（写的是java语句）
代码脚本的特点是： 1、代码脚本翻译之后都在_jspService 方法中 2、代码脚本由于翻译到_jspService()方法中，所以在_jspService()方法中的现有对象都可以直接使用。 3、还可以由多个代码脚本块组合完成一个完整的java 语句。 4、代码脚本还可以和表达式脚本一起组合使用，在jsp 页面上输出数据 练习：
- 代码脚本—-if 语句
- 代码脚本—-for 循环语句
- 翻译后java 文件中_jspService 方法内的代码都可以写
示例代码
<%--练习：--%>
<%--1.代码脚本----if 语句--%>
<%
int i = 13 ;
if (i == 12) {
%>
<h1>国哥好帅</h1>
<%
} else {
%>
<h1>国哥又骗人了！</h1>
<%
}
%>
<br>
<%--2.代码脚本----for 循环语句--%>
<table border="1" cellspacing="0">
<%
for (int j = 0; j < 10; j++) {
%>
<tr>
<td>第<%=j + 1%>行</td>
</tr>
<%
}
%>
</table>
<%--3.翻译后java 文件中_jspService 方法内的代码都可以写--%>
<%
String username = request.getParameter("username");
System.out.println("用户名的请求参数值是：" + username);
%>
翻译之后的对比
8.3.3 jsp的三种注释
8.4 jsp九大内置对象
jsp中的内置对象，是指Tomcat在翻译jsp页面 成为Servlet源代码后，内部提供的九大内置对象，叫内置对象
8.5 jsp四大域对象
四个域对象分别是： pageContext (PageContextImpl 类) 当前jsp 页面范围内有效 request (HttpServletRequest 类) 一次请求内有效 session (HttpSession 类) 一个会话范围内有效（打开浏览器访问服务器，直到关闭浏览器） application (ServletContext 类) 整个web 工程范围内都有效（只要web 工程不停止，数据都在） 域对象是可以像Map 一样存取数据的对象。四个域对象功能一样。不同的是它们对数据的存取范围。 虽然四个域对象都可以存取数据。在使用上它们是有优先顺序的。 四个域在使用的时候，优先顺序分别是，他们从小到大的范围的顺序。 pageContext ====»> request ====»> session ====»> application
scope.jsp页面
scope2.jsp页面
<body>
<h1>scope2.jsp 页面</h1>
pageContext 域是否有值：<%=pageContext.getAttribute("key")%> <br>
request 域是否有值：<%=request.getAttribute("key")%> <br>
session 域是否有值：<%=session.getAttribute("key")%> <br>
application 域是否有值：<%=application.getAttribute("key")%> <br>
</body>
8.6 jsp中的out输出和response.getWriter输出的区别
8.7 jsp的常用标签
8.7.1 jsp静态包含
自己写：这里的文件file的include代表的文件夹，没有特殊含义，普通的就是当前web目录下的
8.7.2 jsp动态包含
示例说明：
8.7.3 jsp标签-转发
<jsp:forward page="/b.jsp"></jsp:forward>
8.7.4 请求转发的使用
通过servlet进行转发学生信息到jsp文件,进行输出打印
jsp文件
<%@ page import="com.atguigu.xiao.Student" %>
<%@ page import="java.lang.reflect.Array" %>
<%@ page import="java.util.ArrayList" %><%--
Created by IntelliJ IDEA.
User: 10185
Date: 2020/10/19
Time: 10:52
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
table{
border: 1px blue solid;
width: 600px;
border-collapse: collapse;
}
td,th{
border: 1px blue solid;
}
</style>
</head>
<body>
<table >
<tr>
<td>年龄</td>
<td>姓名</td>
</tr>
<%
ArrayList<Student> students = (ArrayList<Student>) request.getAttribute("students");
for (Student a : students) {
%>
<tr>
<td>
<%=a.getAge()%>
</td>
<td>
<%=a.getName()%>
</td>
<br>
</tr>
<%}%>
</table>
</body>
</html>
servlet文件
package com.atguigu.xiao;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
public class Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<Student> students = new ArrayList<>();
for (int i = 0; i < 10; i++) {
students.add(new Student(i,"小迪迪+"+i));
}
request.setAttribute("students", students);
request.getRequestDispatcher("/jiujiu.jsp").forward(request, response);
}
}
8.8 Listener监听器
1、Listener 监听器它是JavaWeb 的三大组件之一。JavaWeb 的三大组件分别是：Servlet 程序、Filter 过滤器、Listener 监听器。
2、Listener 它是JavaEE 的规范，就是接口
3、监听器的作用是，监听某种事物的变化。然后通过回调函数，反馈给客户（程序）去做一些相应的处理。
8.8.1 ServletContextListener监听器
ServletContextListener它可以监听ServletContext对象的创建和销毁
ServletContext对象再web工程启动的时候创建，再web工程停止的时候销毁
监听到创建和销毁之后都会分别调用ServletContextListener 监听器的方法反馈。
两个方法分别是:
public interface ServletContextListener extends EventListener {
/**
* 在ServletContext 对象创建之后马上调用，做初始化
*/
public void contextInitialized(ServletContextEvent sce);
/**
* 在ServletContext 对象销毁之后调用
*/
public void contextDestroyed(ServletContextEvent sce);
}
如何使用ServletContextListener监听器监听ServletContext对象。
使用步骤如下:
1、编写一个类去实现ServletContextListener
2、实现其两个回调方法
3、到web.xml 中去配置监听器
public class MyServletContextListenerImpl implements ServletContextListener {
@Override
public void contextInitialized(ServletContextEvent sce) {
System.out.println("ServletContext 对象被创建了");
}
@Override
public void contextDestroyed(ServletContextEvent sce) {
System.out.println("ServletContext 对象被销毁了");
}
}
web
web.xml中的配置
<!--配置监听器-->
<listener>
<listener-class>com.atguigu.listener.MyServletContextListenerImpl</listener-class>
</listener>
监听器可以用来统计在线人数
监听器的使用：
* 作用:
* 监听作用域对象request、session、application的创建、销毁和内容的改变
* 使用:
* 创建一个实现了指定接口的java类
* 监听request--->ServletRequestListener 监听request对象的创建和销毁
* requestInitialized(ServletRequestEvent sre)//创建
* requestDestroyed(ServletRequestEvent sre)//销毁
* 注意:
* 形参可以获取监听的request对象
* sre.getServletRequest();
* 监听request--->ServletRequestAttributeListener 监听request作用域数据的变更。
attributeAdded(ServletRequestAttributeEvent srae)
* attributeRemoved(ServletRequestAttributeEvent srae)
* attributeReplaced(ServletRequestAttributeEvent srae)
* 注意：形参可以获取被监听的数据
* srae.getName() 获取监听数据的键
* srae.getValue() 获取监听数据的值
* 监听session--->HttpSessionListener 监听session的创建和销毁
* sessionCreated(HttpSessionEvent se) 创建
* sessionDestroyed(HttpSessionEvent se) 销毁
* 注意：形参可以获取被监听的session对象
* se.getSession();
* 监听session--->HttpSessionAttributeListener 监听session数据的变更
* attributeAdded(HttpSessionBindingEvent event)
* attributeRemoved(HttpSessionBindingEvent event)
* attributeReplaced(HttpSessionBindingEvent event)
* 注意:形参可以获取被监听的数据
* event.getName() 获取数据的键名
* event.getValue() 获取数据的值
* 监听application--->ServletContextListener 监听application对象的初始化和销毁
* contextInitialized(ServletContextEvent sce) 初始化 服务器启动
* contextDestroyed(ServletContextEvent sce) 销毁 服务器关闭
* 注意：
* 形参可以获取当前application对象。
* sce.getServletContext();
监听application--->ServletContextAttributeListener 监听数据的变更
attributeAdded(ServletContextAttributeEvent event)
* attributeRemoved(ServletContextAttributeEvent event)
* attributeReplaced(ServletContextAttributeEvent event)
* 注意：
* 形参可以获取当前监听的数据
* event.getName() 获取数据的键名
* event.getValue() 获取数据的值
* 在web.xml中配置监听器类
* <listener>
<listener-class>com.bjsxt.listener.MyListener</listener-class>
</listener>
案例：
统计当前在线人数。
统计网页浏览器次数。
* @author MyPC
*
*/
public class MyListener implements ServletRequestListener,ServletRequestAttributeListener,HttpSessionListener,HttpSessionAttributeListener,ServletContextListener,ServletContextAttributeListener{
//request对象销毁
@Override
public void requestDestroyed(ServletRequestEvent sre) {
System.out.println("我被销毁了");
}
//request对象创建
@Override
public void requestInitialized(ServletRequestEvent sre) {
System.out.println("我被创建了");
}
//监听request作用域数据的添加
@Override
public void attributeAdded(ServletRequestAttributeEvent srae) {
System.out.println("request中增加了一条数据-"+srae.getName()+":"+srae.getValue());
}
@Override
public void attributeRemoved(ServletRequestAttributeEvent srae) {
// TODO Auto-generated method stub
}
@Override
public void attributeReplaced(ServletRequestAttributeEvent srae) {
// TODO Auto-generated method stub
}
/*------------------------------------------------------------------------------*/
//监听session的创建
@Override
public void sessionCreated(HttpSessionEvent se) {
System.out.println("session被创建了");
}
//监听session的销毁
@Override
public void sessionDestroyed(HttpSessionEvent se) {
System.out.println("session被销毁了");
}
//监听session数据的表更
@Override
public void attributeAdded(HttpSessionBindingEvent event) {
System.out.println("session中增加了一条数据"+event.getName()+":"+event.getValue());
}
@Override
public void attributeRemoved(HttpSessionBindingEvent event) {
// TODO Auto-generated method stub
}
@Override
public void attributeReplaced(HttpSessionBindingEvent event) {
// TODO Auto-generated method stub
}
/*------------------------------------------------------------------------------*/
@Override
public void contextInitialized(ServletContextEvent sce) {
System.out.println("application对象被初始化了");
}
@Override
public void contextDestroyed(ServletContextEvent sce) {
System.out.println("application对象被销毁了");
}
//监听application的数据变更
@Override
public void attributeAdded(ServletContextAttributeEvent event) {
System.out.println("application中存储了数据:"+event.getName()+":"+event.getValue());
}
@Override
public void attributeRemoved(ServletContextAttributeEvent event) {
// TODO Auto-generated method stub
}
@Override
public void attributeReplaced(ServletContextAttributeEvent event) {
// TODO Auto-generated method stub
}
}
第九章 EL表达式 和 JSTL标签库和文件的上传和下载
9.1 El表达式
9.1.1 什么是EL表达式，EL表达式的作用？
EL 表达式的全称是：Expression Language。是表达式语言。
EL 表达式的什么作用：EL 表达式主要是代替jsp 页面中的表达式脚本在jsp 页面中进行数据的输出。
因为EL 表达式在输出数据的时候，要比jsp 的表达式脚本要简洁很多。
<body>
<%
request.setAttribute("key","值");
%>
表达式脚本输出key 的值是：
<%=request.getAttribute("key1")==null?"":request.getAttribute("key1")%><br/>
EL 表达式输出key 的值是：${key1}
</body>
EL 表达式的格式是：${表达式} EL 表达式在输出null 值的时候，输出的是空串。jsp 表达式脚本输出null 值的时候，输出的是null 字符串。
9.1.2 EL表达式搜索域数据的顺序
EL表达式主要是在jsp页面中输出数据
主要是输出域对象中的数据
当四个域中都有相同的key的数据的时候，EL表达式会按照四个域的从小到大的顺序去进行搜索，找到就输出
<body>
<%
//往四个域中都保存了相同的key 的数据。
request.setAttribute("key", "request");
session.setAttribute("key", "session");
application.setAttribute("key", "application");
pageContext.setAttribute("key", "pageContext");
%>
${ key }
</body>
9.1.3 EL表达式输出Bean的普通属性，数组属性。List集合属性，map集合属性
需求：输出People类中普通属性，数组属性。list集合属性和map集合属性
people类
public class People {
private String name;
private String[] phones;
private List<String> cities;
private Map<String,Object> map;
输出的代码
<body>
<%
People people = new People();
people.setName("江豪迪666");
ArrayList<String> strings = new ArrayList<>();
strings.add("北京");
strings.add("上海");
strings.add("绍兴");
people.setCities(strings);
HashMap<String, Object> objectObjectHashMap = new HashMap<>();
objectObjectHashMap.put("key1", "value1");
objectObjectHashMap.put("key2", "value2");
objectObjectHashMap.put("key3", "value3");
people.setMap(objectObjectHashMap);
String[] string1 = {"1234566", "1231231231", "1231234132"};
people.setPhones(string1);
pageContext.setAttribute("people", people);
%>
${people}<br>
${people.cities[1]}<br>
${people.map.key1}<br>
${people.name}<br>
</body>
</html>
相当于调用了people类中的get（）方法，来获取属性的值
9.1.4 EL表达式—运算
语法：${运算表达式}，EL表达式支持如下运算符
1、关系运算
2、逻辑运算
3、算数运算
4、empty运算
empty运算可以判断一个数据是否为空，如果为空，则输出true，不为空输出false
以下几种情况为空： 1、值为null 值的时候，为空
2、值为空串的时候，为空
3、值是Object 类型数组，长度为零的时候
4、list 集合，元素个数为零
5、map 集合，元素个数为零
<body>
<%
// 1、值为null 值的时候，为空
request.setAttribute("emptyNull", null);
// 2、值为空串的时候，为空
request.setAttribute("emptyStr", "");
// 3、值是Object 类型数组，长度为零的时候
request.setAttribute("emptyArr", new Object[]{});
// 4、list 集合，元素个数为零
List<String> list = new ArrayList<>();
// list.add("abc");
request.setAttribute("emptyList", list);
// 5、map 集合，元素个数为零
Map<String,Object> map = new HashMap<String, Object>();
// map.put("key1", "value1");
request.setAttribute("emptyMap", map);
%>
${ empty emptyNull } <br/>
${ empty emptyStr } <br/>
${ empty emptyArr } <br/>
${ empty emptyList } <br/>
${ empty emptyMap } <br/>
</body>
5、三元运算
表达式1？表达式2：表达式3 如果表达式1 的值为真，返回表达式2 的值，如果表达式1 的值为假，返回表达式3 的值。 示例： ${ 12 != 12 ? “国哥帅呆”:“国哥又骗人啦” }
6、“.”点运算和[]中括号运算符
.点运算，可以输出Bean 对象中某个属性的值。
[]中括号运算，可以输出有序集合中某个元素的值。
并且[]中括号运算，还可以输出map 集合中key 里含有特殊字符的key 的值。
<body>
<%
Map<String,Object> map = new HashMap<String, Object>();
map.put("a.a.a", "aaaValue");
map.put("b+b+b", "bbbValue");
map.put("c-c-c", "cccValue");
request.setAttribute("map", map);
%>
${ map['a.a.a'] } <br>
${ map["b+b+b"] } <br>
${ map['c-c-c'] } <br>
</body>
9.1.5 EL表达式的11个隐含对象
EL表达式中11个隐含对象，是EL表达式中自己定义的，可以直接使用
变量类型作用
pageContext PageContextImpl 它可以获取jsp 中的九大内置对象
pageScope Map<String,Object> 它可以获取pageContext 域中的数据
requestScope Map<String,Object> 它可以获取Request 域中的数据
sessionScope Map<String,Object> 它可以获取Session 域中的数据
applicationScope Map<String,Object> 它可以获取ServletContext 域中的数据
param Map<String,String> 它可以获取请求参数的值
paramValues Map<String,String[]> 它也可以获取请求参数的值，获取多个值的时候使用。
header Map<String,String> 它可以获取请求头的信息
headerValues Map<String,String[]> 它可以获取请求头的信息，它可以获取多个值的情况
cookie Map<String,Cookie> 它可以获取当前请求的Cookie 信息
initParam Map<String,String> 它可以获取在web.xml 中配置的<context-param>上下文参数
1、EL获取四个特定域中的属性
pageScope ======== pageContext域
requestScope ======== request域
sessionScope ======== Session域
applicationScope ========= ServletContext域
pageContext.setAttribute( "key1", "valuePageContext");
request.setAttribute("key2","request");
session.setAttribute("key3", "session");
application.setAttribute("key4","application");
%>
${pageScope.key1}
${requestScope.key2}
${sessionScope.key3}
${applicationScope.key4}
2、pageContext对象的使用
- 协议：
- 服务器ip：
- 服务器端口：
- 获取工程路径：
- 获取请求方法：
- 获取客户端ip 地址：
- 获取会话的id 编号：
<body>
<%--
request.getScheme() 它可以获取请求的协议
request.getServerName() 获取请求的服务器ip 或域名
request.getServerPort() 获取请求的服务器端口号
getContextPath() 获取当前工程路径
request.getMethod() 获取请求的方式（GET 或POST）
request.getRemoteHost() 获取客户端的ip 地址
session.getId() 获取会话的唯一标识
--%>
<%
pageContext.setAttribute("req", request);//以后开发都可以写成这种格式，直接req.scheme,req.servername等等，这样方便,像协议1那样写
%>
<%=request.getScheme() %> <br>
1.协议： ${ req.scheme }<br>
2.服务器ip：${ pageContext.request.serverName }<br>
3.服务器端口：${ pageContext.request.serverPort }<br>
4.获取工程路径：${ pageContext.request.contextPath }<br>
5.获取请求方法：${ pageContext.request.method }<br>
6.获取客户端ip 地址：${ pageContext.request.remoteHost }<br>
7.获取会话的id 编号：${ pageContext.session.id }<br>
</body>
3、EL表达式其他隐含对象的使用
param Map<String,String> 它可以获取请求参数的值
paramValues Map<String,String[]> 它也可以获取请求的参数
示例代码：
输出请求参数username 的值：${ param.username } <br>
输出请求参数password 的值：${ param.password } <br>
输出请求参数username 的值：${ paramValues.username[0] } <br>
输出请求参数hobby 的值：${ paramValues.hobby[0] } <br>
输出请求参数hobby 的值：${ paramValues.hobby[1] } <br>
请求地址：
http://localhost:8080/09_EL_JSTL/other_el_obj.jsp?username=wzg168&password=666666&hobby=java&hobby=cpp header Map<String,String> 它可以获取请求头的信息
headerValues Map<String,String[]> 它可以获取请求头的信息，它可以获取多个值的情况
示例代码：
输出请求头【User-Agent】的值：${ header['User-Agent'] } <br>
输出请求头【Connection】的值：${ header.Connection } <br>
输出请求头【User-Agent】的值：${ headerValues['User-Agent'][0] } <br>//注意中间有-的需要用【】来表示
cookie Map<String,Cookie> 它可以获取当前请求的Cookie 信息 示例代码：
获取Cookie 的名称：${ cookie.JSESSIONID.name } <br>
获取Cookie 的值：${ cookie.JSESSIONID.value } <br>
initParam Map<String,String> 它可以获取在web.xml 中配置的上下文参数
web.xml中的配置
<context-param>
<param-name>username</param-name>
<param-value>root</param-value>
</context-param>
<context-param>
<param-name>url</param-name>
<param-value>jdbc:mysql:///test</param-value>
</context-param>
示例代码:
输出<Context-param>username 的值：${ initParam.username } <br>
输出<Context-param>url 的值：${ initParam.url } <br>
9.2 JSTL标签库
JSTL 标签库全称是指JSP Standard Tag Library JSP 标准标签库。是一个不断完善的开放源代码的JSP 标 签库。 EL 表达式主要是为了替换jsp 中的表达式脚本，而标签库则是为了替换代码脚本。这样使得整个jsp 页面 变得更佳简洁。
在jsp标签库中使用taglib指令引入标签库
CORE 标签库 <%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core" %> XML 标签库 <%@ taglib prefix=“x” uri=“http://java.sun.com/jsp/jstl/xml" %> FMT 标签库 <%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt" %> SQL 标签库 <%@ taglib prefix=“sql” uri=“http://java.sun.com/jsp/jstl/sql" %> FUNCTIONS 标签库 <%@ taglib prefix=“fn” uri=“http://java.sun.com/jsp/jstl/functions" %>
9.2.1 JSTL标签库的使用步骤
1、先导入jstl标签库的jar包
taglibs-standard-impl-1.2.1.jar
taglibs-standard-spec-1.2.1.jar
2、第二步，使用taglib指令引入标签库
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core" %>
9.2.2 core核心库使用
Ⅰ.<c:set />（使用很少）
作用：set标签可以往域中保存数据
<%--
i.<c:set />
作用：set 标签可以往域中保存数据
域对象.setAttribute(key,value);
scope 属性设置保存到哪个域
page 表示PageContext 域（默认值）
request 表示Request 域
session 表示Session 域
application 表示ServletContext 域
var 属性设置key 是多少
value 属性设置值
--%>
保存之前：${ sessionScope.abc } <br>
<c:set scope="session" var="abc" value="abcValue"/>
保存之后：${ sessionScope.abc } <br>
ii. <c:if />
if标签用来做if判断
<%--
ii.<c:if />
if 标签用来做if 判断。
test 属性表示判断的条件（使用EL 表达式输出）
--%>
<c:if test="${ 12 == 12 }">
<h1>12 等于12</h1>
</c:if>
<c:if test="${ 12 != 12 }">
<h1>12 不等于12</h1>
</c:if>
iii. <c:choose> <c:when> <c:otherwise>标签
作用：多路判断。跟switch…case…default非常接近
<%--
iii.<c:choose> <c:when> <c:otherwise>标签
作用：多路判断。跟switch ... case .... default 非常接近
choose 标签开始选择判断
when 标签表示每一种判断情况
test 属性表示当前这种判断情况的值
otherwise 标签表示剩下的情况
<c:choose> <c:when> <c:otherwise>标签使用时需要注意的点：
1、标签里不能使用html 注释，要使用jsp 注释
2、when 标签的父标签一定要是choose 标签
--%>
<%
request.setAttribute("height", 180);
%>
<c:choose>
<%-- 这是html 注释--%>
<c:when test="${ requestScope.height > 190 }">
<h2>小巨人</h2>
</c:when>
<c:when test="${ requestScope.height > 180 }">
<h2>很高</h2>
</c:when>
<c:when test="${ requestScope.height > 170 }">
<h2>还可以</h2>
</c:when>
<c:otherwise>
<c:choose>
<c:when test="${requestScope.height > 160}">
<h3>大于160</h3>
</c:when>
<c:when test="${requestScope.height > 150}">
<h3>大于150</h3>
</c:when>
<c:when test="${requestScope.height > 140}">
<h3>大于140</h3>
</c:when>
<c:otherwise>
其他小于140
</c:otherwise>
</c:choose>
</c:otherwise>
</c:choose>
iv. <c:forEach />
作用：遍历输出使用
1、遍历1到10，输出
示例代码:
<c:forEach begin="1" end="10" var="i">
${i}
</c:forEach>
2、遍历Object数组
示例代码：
<%request.setAttribute("arr", new String[]{"12321312","1231343456436","7566y4534534"});%>
<table border="1" >
<c:forEach items="${requestScope.arr}" var="j">
<tr>
<td>
${j}
</td>
</tr>
</c:forEach>
</table>
3、遍历Map集合
示例代码
<% HashMap<String, Object> stringObjectHashMap = new HashMap<>();
stringObjectHashMap.put("mars", 1231);
stringObjectHashMap.put("xiao", 12312);
stringObjectHashMap.put("xiao11", 314141);
request.setAttribute("map", stringObjectHashMap);
%>
<c:forEach items="${requestScope.map} " var="xi">
${xi}<br>
</c:forEach>
4、遍历List集合—list中存放Student类，有属性：编号，用户名，密码，年龄，电话信息
电话信息
Student类：
public class Student {
//4.编号，用户名，密码，年龄，电话信息
private Integer id;
private String username;
private String password;
private Integer age;
private String phone;
示例代码:
<%--4.遍历List 集合---list 中存放Student 类，有属性：编号，用户名，密码，年龄，电话信息--%>
<%
List<Student> studentList = new ArrayList<Student>();
for (int i = 1; i <= 10; i++) {
studentList.add(new Student(i,"username"+i ,"pass"+i,18+i,"phone"+i));
}
request.setAttribute("stus", studentList);
%>
<table>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>电话</th>
<th>操作</th>
</tr>
<%--
items 表示遍历的集合
var 表示遍历到的数据
begin 表示遍历的开始索引值
end 表示结束的索引值
step 属性表示遍历的步长值
varStatus 属性表示当前遍历到的数据的状态
for（int i = 1; i < 10; i+=2）
--%>
<c:forEach begin="2" end="7" step="2" varStatus="status" items="${requestScope.stus}" var="stu">
<tr>
<td>${stu.id}</td>
<td>${stu.username}</td>
<td>${stu.password}</td>
<td>${stu.age}</td>
<td>${stu.phone}</td>
<td>${status.step}</td>
</tr>
</c:forEach>
</table>
varStatus的用法
9.3 文件的上传和下载
文件的上传和下载，是非常常见的功能。很多系统中，或者软件中都经常使用文件的上传和下载.
比如：QQ头像，就使用了上传。
邮箱中也有符间的上传和下载功能。
OA系统中审批有附件材料的上传。
9.3.1 文件的上传介绍（重点）
1、要有一个form 标签，method=post 请求 2、form 标签的encType 属性值必须为multipart/form-data 值 3、在form 标签中使用input type=file 添加上传的文件 4、编写服务器代码（Servlet 程序）接收，处理上传的数据。 encType=multipart/form-data 表示提交的数据，以多段（每一个表单项一个数据段）的形式进行拼 接，然后以二进制流的形式发送给服务器
文件上传，HTTP协议的说明
jsp文件中的内容
<form action="/09_el/updateServlet" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="username" ><br>
头像:<input type="file" name="photo"><br>
<input type="submit" name="提交" value="提交">
java文件中的内容
public class UpdateServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//req.getParameter("username");//这样就接受不到了，因为客户端以流的形式发送
ServletInputStream inputStream = req.getInputStream();
byte[] a = new byte[10];
while (true) {
int read = inputStream.read(a);
if (read == -1) {
break;
}
System.out.println(new String(a,0,read));
}
}
}
9.3.2 commons-fileupload.jar常用API介绍说明
commons-fileupload.jar 需要依赖commons-io.jar 这个包，所以两个包我们都要引入。
第一步，就是需要导入两个jar 包：
commons-fileupload-1.2.1.jar commons-io-1.4.jar
commons-fileupload.jar 和commons-io.jar 包中，我们常用的类有哪些？
ServletFileUpload 类，用于解析上传的数据。
FileItem 类，表示每一个表单项。
boolean ServletFileUpload.isMultipartContent(HttpServletRequest request);
判断当前上传的数据格式是否是多段的格式。(判断是否是带文件上传的表单项)
public List parseRequest(HttpServletRequest request)
解析上传的数据
boolean FileItem.isFormField()
判断当前这个表单项，是否是普通的表单项。还是上传的文件类型。
true 表示普通类型的表单项
false 表示上传的文件类型
String FileItem.getFieldName()
获取表单项的name 属性值
String FileItem.getString()
获取当前表单项的值。
String FileItem.getName();
获取上传的文件名
void FileItem.write( file );
将上传的文件写到参数file 所指向抽硬盘位置。
9.3.3 文件上传
上传文件的表单：
<form action="http://192.168.31.74:8080/09_EL_JSTL/uploadServlet" method="post"
enctype="multipart/form-data">
用户名：<input type="text" name="username" /> <br>
头像：<input type="file" name="photo" > <br>
<input type="submit" value="上传">
</form>
解析上传的数据的代码:
public class UpdateServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//先设置服务器端中文乱码问题
req.setCharacterEncoding("UTF-8");
//先判断上传的数据是否多段数据（只有是多段的数据，才是文件上传的）（判断是否是带有文件的表单项）
if (ServletFileUpload.isMultipartContent(req)) {
//创建FileItemFactory工厂实现类
FileItemFactory fileItemFactory = new DiskFileItemFactory();
//创建用于解析上传数据的工具类ServletFileUpload类
ServletFileUpload servletFileUpload = new ServletFileUpload(fileItemFactory);
try {
//解析上传的数据，得到每一个表单项
List<FileItem> list = servletFileUpload.parseRequest(req);
for (FileItem a : list) {
//如果是普通表单项
if (a.isFormField()) {
System.out.println(a.getFieldName());
System.out.println(a.getString("UTF-8"));
} else {
//如果是上传的文件
System.out.println(a.getFieldName());
String name = a.getName();
//把他保存到E盘
a.write(new File("E://" + name));
}
}
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
9.3.4 文件下载
下载的常用API 说明： response.getOutputStream(); servletContext.getResourceAsStream(); servletContext.getMimeType(); response.setContentType(); response.setHeader(“Content-Disposition”, “attachment; fileName=1.jpg”); 这个响应头告诉浏览器。这是需要下载的。而attachment 表示附件，也就是下载的一个文件。fileName=后面， 表示下载的文件名。 完成上面的两个步骤，下载文件是没问题了。但是如果我们要下载的文件是中文名的话。你会发现，下载无法正确 显示出正确的中文名。 原因是在响应头中，不能包含有中文字符，只能包含ASCII 码。
public class DownLoad extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String jpgName = "xue.png";
ServletContext servletContext = getServletContext();
InputStream resourceAsStream = servletContext.getResourceAsStream("/jpg/" + jpgName);
ServletOutputStream outputStream = resp.getOutputStream();
//告知浏览器你传递的类型
String mimeType = servletContext.getMimeType("/jpg/" + jpgName);
resp.setContentType(mimeType);
//告知浏览器你下载的内容是用于下载使用（还是使用响应头）
resp.setHeader("Content-Disposition", "attachment; filename="+jpgName);
IOUtils.copy(resourceAsStream, outputStream);//最后在进行这一步//把下载的内容回传给客户端
}
}
9.3.5 附件中文名乱码问题解决方案
方案一：URLEncoder 解决IE 和谷歌浏览器的附件中
文名问题。 如果客户端浏览器是IE 浏览器或者是谷歌浏览器。我们需要使用URLEncoder 类先对中文名进行UTF-8 的编码 操作。 因为IE 浏览器和谷歌浏览器收到含有编码后的字符串后会以UTF-8 字符集进行解码显示。 // 把中文名进行UTF-8 编码操作。 String str = “attachment; fileName=” + URLEncoder.encode(“中文.jpg”, “UTF-8”); // 然后把编码后的字符串设置到响应头中 response.setHeader(“Content-Disposition”, str);
方案二：BASE64 编解码解决火狐浏览器的附件中文名问题
如果客户端浏览器是火狐浏览器。那么我们需要对中文名进行BASE64 的编码操作。 这时候需要把请求头Content-Disposition: attachment; filename=中文名 编码成为：Content-Disposition: attachment; filename==?charset?B?xxxxx?= =?charset?B?xxxxx?= 现在我们对这段内容进行一下说明。 =? 表示编码内容的开始 charset 表示字符集
B 表示BASE64编码 xxxx 表示文件名BASE64编码后的内容
?= 表示编码内容的结束
BASE64 编解码操作：
因为火狐使用的是BASE64 的编解码方式还原响应中的汉字。所以需要使用BASE64Encoder 类进行编码操作。 // 使用下面的格式进行BASE64 编码后 String str = “attachment; fileName=” + “=?utf-8?B?”
- new BASE64Encoder().encode(“中文.jpg”.getBytes(“utf-8”)) + “?=”; // 设置到响应头中 response.setHeader(“Content-Disposition”, str);
不同的浏览器有不同的解编码方式。我们只需要通过判断请求头中User-Agent这个请求携带过来的
浏览器信息即可判断出是什么浏览器
String ua = request.getHeader("User-Agent");
// 判断是否是火狐浏览器
if (ua.contains("Firefox")) {
// 使用下面的格式进行BASE64 编码后
String str = "attachment; fileName=" + "=?utf-8?B?"
+ new BASE64Encoder().encode("中文.jpg".getBytes("utf-8")) + "?=";
// 设置到响应头中
response.setHeader("Content-Disposition", str);
} else {
// 把中文名进行UTF-8 编码操作。
String str = "attachment; fileName=" + URLEncoder.encode("中文.jpg", "UTF-8");
// 然后把编码后的字符串设置到响应头中
response.setHeader("Content-Disposition", str);
}
第十章 Cookie和Session
10.1 什么是cookie
1、Cookie 翻译过来是饼干的意思。
2、Cookie 是服务器通知客户端保存键值对的一种技术。
3、客户端有了Cookie 后，每次请求都发送给服务器。
4、每个Cookie 的大小不能超过4kb
10.2 如何创建Cookie
Servlet程序中的代码:
protected void createCookie(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
//1 创建Cookie 对象
Cookie cookie = new Cookie("key4", "value4");
//2 通知客户端保存Cookie
resp.addCookie(cookie);
//1 创建Cookie 对象
Cookie cookie1 = new Cookie("key5", "value5");
//2 通知客户端保存Cookie
resp.addCookie(cookie1);
resp.getWriter().write("Cookie 创建成功");
}
10.3 服务器如何获取Cookie
Cookie的工具类
public class CookieUtils {
/**
* 查找指定名称的Cookie 对象
* @param name
* @param cookies
* @return
*/
public static Cookie findCookie(String name , Cookie[] cookies){
if (name == null || cookies == null || cookies.length == 0) {
return null;
}
for (Cookie cookie : cookies) {
if (name.equals(cookie.getName())) {
return cookie;
}
}
return null;
}
}
Servlet程序中的代码
protected void getCookie(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
Cookie[] cookies = req.getCookies();
for (Cookie cookie : cookies) {
// getName 方法返回Cookie 的key（名）
// getValue 方法返回Cookie 的value 值
resp.getWriter().write("Cookie[" + cookie.getName() + "=" + cookie.getValue() + "] <br/>");
}
Cookie iWantCookie = CookieUtils.findCookie("key1", cookies);
// for (Cookie cookie : cookies) {
// if ("key2".equals(cookie.getName())) {
// iWantCookie = cookie;
// break;
// }
// }
// 如果不等于null，说明赋过值，也就是找到了需要的Cookie
if (iWantCookie != null) {
resp.getWriter().write("找到了需要的Cookie");
}
}
10.4 Cookie值的修改
方案一：
1、先创建一个要修改的同名（指的就是key）的Cookie 对象
2、在构造器，同时赋于新的Cookie 值。
3、调用response.addCookie( Cookie );
// 方案一：
// 1、先创建一个要修改的同名的Cookie 对象
// 2、在构造器，同时赋于新的Cookie 值。
Cookie cookie = new Cookie("key1","newValue1");
// 3、调用response.addCookie( Cookie ); 通知客户端保存修改
resp.addCookie(cookie);
方案二：
1、先查找到需要修改的Cookie 对象
2、调用setValue()方法赋于新的Cookie 值。
3、调用response.addCookie()通知客户端保存修改
// 方案二：
// 1、先查找到需要修改的Cookie 对象
Cookie cookie = CookieUtils.findCookie("key2", req.getCookies());
if (cookie != null) {
// 2、调用setValue()方法赋于新的Cookie 值。
cookie.setValue("newValue2");
// 3、调用response.addCookie()通知客户端保存修改
resp.addCookie(cookie);
}
10.5 浏览器查看Cookie：
谷歌浏览器如何查看Cookie：
火狐浏览器如何查看Cookie
10.6 Cookie生命控制
Cookie的生命控制指的是如何管理Cookie什么时候销毁
setMaxAge() 正数，表示在指定的秒数后过期
负数，表示浏览器一关，Cookie 就会被删除（默认值是-1）
零，表示马上删除Cookie
/**
* 设置存活1 个小时的Cooie
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void life3600(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
Cookie cookie = new Cookie("life3600", "life3600");
cookie.setMaxAge(60 * 60); // 设置Cookie 一小时之后被删除。无效
resp.addCookie(cookie);
resp.getWriter().write("已经创建了一个存活一小时的Cookie");
}
/**
* 马上删除一个Cookie
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void deleteNow(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
// 先找到你要删除的Cookie 对象
Cookie cookie = CookieUtils.findCookie("key4", req.getCookies());
if (cookie != null) {
// 调用setMaxAge(0);
cookie.setMaxAge(0); // 表示马上删除，都不需要等待浏览器关闭
// 调用response.addCookie(cookie);
resp.addCookie(cookie);
resp.getWriter().write("key4 的Cookie 已经被删除");
}
}
/**
* 默认的会话级别的Cookie
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void defaultLife(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
Cookie cookie = new Cookie("defalutLife","defaultLife");
cookie.setMaxAge(-1);//设置存活时间
resp.addCookie(cookie);
}
10.6 Cookie有效路径Path的设置
Cookie 的path 属性可以有效的过滤哪些Cookie 可以发送给服务器。哪些不发。
path 属性是通过请求的地址来进行有效的过滤。
CookieA path=/工程路径
CookieB path=/工程路径/abc
请求地址如下：
http://ip:port/工程路径/a.html
CookieA 发送
CookieB 不发送
http://ip:port/工程路径/abc/a.html
CookieA 发送
CookieB 发送
protected void testPath(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
Cookie cookie = new Cookie("path1", "path1");
// getContextPath() ===>>>> 得到工程路径
cookie.setPath( req.getContextPath() + "/abc" ); // ===>>>> /工程路径/abc
resp.addCookie(cookie);
resp.getWriter().write("创建了一个带有Path 路径的Cookie");
}
10.7 Cookie练习—免输入用户名登入
login.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<form action="userServlet" method="post">
<table>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="username" value=${cookie.username.value}>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="password">
<input type="hidden" name="action" value="login">
<input type="submit" value="登入">
</td>
</tr>
</table>
</form>
</body>
</html>
LoginServlet程序
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
if ("wzg168".equals(username) && "123456".equals(password)) {
//登录成功
Cookie cookie = new Cookie("username", username);
cookie.setMaxAge(60 * 60 * 24 * 7);//当前Cookie 一周内有效
resp.addCookie(cookie);
System.out.println("登录成功");
} else {
// 登录失败
System.out.println("登录失败");
}
}
10.8 什么是Session会话？
1、Session 就一个接口（HttpSession）。
2、Session 就是会话。它是用来维护一个客户端和服务器之间关联的一种技术。
3、每个客户端都有自己的一个Session 会话。
4、Session 会话中，我们经常用来保存用户登录之后的信息。
10.9 如何创建Session和获取（id号,是否为新）
如何创建和获取Session。它们的API 是一样的。 request.getSession() 第一次调用是：创建Session 会话 之后调用都是：获取前面创建好的Session 会话对象。 isNew(); 判断到底是不是刚创建出来的（新的） true 表示刚创建 false 表示获取之前创建 每个会话都有一个身份证号。也就是ID 值。而且这个ID 是唯一的。 getId() 得到Session 的会话id 值。
protected void getSession(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
HttpSession session = req.getSession();
String id = session.getId();
boolean aNew = session.isNew();
resp.getWriter().write("id是"+id+"<br>");
resp.getWriter().write("是否是新的?"+(aNew?"是新的":"不是新的")+"<br>");
}
10.10 Session域数据的存取
protected void setAttribute(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
req.getSession().setAttribute("key1", "value1");
resp.getWriter().write("已经往Session 中保存了数据");
}
/**
* 获取Session 域中的数据
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void getAttribute(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
Object attribute = req.getSession().getAttribute("key1");
resp.getWriter().write("从Session 中获取出key1 的数据是：" + attribute);
}
10.11 Session生命周期控制
public void setMaxInactiveInterval(int interval) 设置Session 的超时时间（以秒为单位），超过指定的时长，Session 就会被销毁。 值为正数的时候，设定Session 的超时时长。 负数表示永不超时（极少使用） public int getMaxInactiveInterval()获取Session 的超时时间 public void invalidate() 让当前Session 会话马上超时无效。 Session 默认的超时时长是多少！ Session 默认的超时时间长为30 分钟。 因为在Tomcat 服务器的配置文件web.xml 中默认有以下的配置，它就表示配置了当前Tomcat 服务器下所有的Session 超时配置默认时长为：30 分钟。 30
如果说。你希望你的web 工程，默认的Session 的超时时长为其他时长。你可以在你自己的web.xml 配置文件中做 以上相同的配置。就可以修改你的web 工程所有Seession 的默认超时时长。
<!--表示当前web 工程。创建出来的所有Session 默认是20 分钟超时时长-->
<session-config>
<session-timeout>20</session-timeout>
</session-config>
如果你想只修改个别Session 的超时时长。就可以使用上面的API。setMaxInactiveInterval(int interval)来进行单独的设
置。
session.setMaxInactiveInterval(int interval)单独设置超时时长。
Session 超时的概念介绍：
示例代码
protected void life3(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
// 先获取Session 对象
HttpSession session = req.getSession();
// 设置当前Session3 秒后超时
session.setMaxInactiveInterval(3);
resp.getWriter().write("当前Session 已经设置为3 秒后超时");
}
Session马上超时的示例代码
protected void deleteNow(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
// 先获取Session 对象
HttpSession session = req.getSession();
// 让Session 会话马上超时
session.invalidate();
resp.getWriter().write("Session 已经设置为超时（无效）");
}
10.12 浏览器和Session之间关联的技术内幕
为什么每次关闭浏览器就会关闭Session，虽然它没有超时
因为Session获取的id值是第一次创建的，每次请求客户端以cookie的形式发送过去当服务器接收到这个id值，如果关闭浏览器，这个cookie就消失了，因此Session也在浏览器关闭后就消失
第十一章 Filter过滤器
1、Filter 过滤器它是JavaWeb 的三大组件之一。三大组件分别是：Servlet 程序、Listener 监听器、Filter 过滤器 2、Filter 过滤器它是JavaEE 的规范。也就是接口 3、Filter 过滤器它的作用是：拦截请求，过滤响应。 拦截请求常见的应用场景有： 1、权限检查 2、日记操作 3、事务管理 ……等等
11.1 Fileter的初体验
要求：在你的web 工程下，有一个admin 目录。这个admin 目录下的所有资源（html 页面、jpg 图片、jsp 文件、等等）都必 须是用户登录之后才允许访问。 思考：根据之前我们学过内容。我们知道，用户登录之后都会把用户登录的信息保存到Session 域中。所以要检查用户是否 登录，可以判断Session 中否包含有用户登录的信息即可！！！
<%
Object user = session.getAttribute("user");
// 如果等于null，说明还没有登录
if (user == null) {
request.getRequestDispatcher("/login.jsp").forward(request,response);
return;
}
%>
这种方法有局限性，只能是jsp页面，因此有一个新的方法，叫过滤器来实现
Filter的工作流程图：
Filter的代码:
public class AdminFilter implements Filter {
/**
* doFilter 方法，专门用于拦截请求。可以做权限检查
*/
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain
filterChain) throws IOException, ServletException {
HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
HttpSession session = httpServletRequest.getSession();
Object user = session.getAttribute("user");
// 如果等于null，说明还没有登录
if (user == null) {
servletRequest.getRequestDispatcher("/login.jsp").forward(servletRequest,servletResponse);
return;
} else {
// 让程序继续往下访问用户的目标资源
filterChain.doFilter(servletRequest,servletResponse);
}
}
}
web.xml中的配置
<!--filter 标签用于配置一个Filter 过滤器-->
<filter>
<!--给filter 起一个别名-->
<filter-name>AdminFilter</filter-name>
<!--配置filter 的全类名-->
<filter-class>com.atguigu.filter.AdminFilter</filter-class>
</filter>
<!--filter-mapping 配置Filter 过滤器的拦截路径-->
<filter-mapping>
<!--filter-name 表示当前的拦截路径给哪个filter 使用-->
<filter-name>AdminFilter</filter-name>
<!--url-pattern 配置拦截路径
/ 表示请求地址为：http://ip:port/工程路径/ 映射到IDEA 的web 目录
/admin/* 表示请求地址为：http://ip:port/工程路径/admin/*
-->
<url-pattern>/admin/*</url-pattern>
</filter-mapping>
Filter 过滤器的使用步骤：
1、编写一个类去实现Filter 接口 2、实现过滤方法doFilter() 3、到web.xml 中去配置Filter 的拦截路径
完整的用户登入
登入表单
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<base href="http://localhost:8080/filter/">
</head>
<body>
<form action="userServlet">
用户名：<input type="text" name="username" value="${requestScope.username}"><br>
密码 ：<input type="password" name="password"><br>
<span style="color: red">${requestScope.login}</span>
<input type="submit">
</form>
</body>
</html>
UserServlet
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
if ("xiaodidi".equals(username) && "123456".equals(password)) {
req.getSession().setAttribute("username", username);
resp.sendRedirect(req.getContextPath()+"/index.jsp");
} else {
req.setAttribute("username", username);
req.setAttribute("login", "你的用户名或者密码错误");
req.getRequestDispatcher("/login.jsp").forward(req, resp);
}
}
}
AdminFilter
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) servletRequest;
HttpServletResponse resp = (HttpServletResponse) servletResponse;
String username = (String) req.getSession().getAttribute("username");
if (username == null) {
resp.sendRedirect(req.getContextPath() + "/login.jsp");
} else {
filterChain.doFilter(req, resp);
}
}
11.2 Filter的生命周期
Filter 的生命周期包含几个方法 1、构造器方法 2、init 初始化方法 第1，2 步，在web 工程启动的时候执行（Filter 已经创建） 3、doFilter 过滤方法 第3 步，每次拦截到请求，就会执行 4、destroy 销毁 第4 步，停止web 工程的时候，就会执行（停止web 工程，也会销毁Filter 过滤器）
11.3 FilterConfig类
FilterConfig 类见名知义，它是Filter 过滤器的配置文件类。 Tomcat 每次创建Filter 的时候，也会同时创建一个FilterConfig 类，这里包含了Filter 配置文件的配置信息。 FilterConfig 类的作用是获取filter 过滤器的配置内容 1、获取Filter 的名称filter-name 的内容 2、获取在Filter 中配置的init-param 初始化参数 3、获取ServletContext 对象
java代码：
@Override
public void init(FilterConfig filterConfig) throws ServletException {
System.out.println("2.Filter 的init(FilterConfig filterConfig)初始化");
// 1、获取Filter 的名称filter-name 的内容
System.out.println("filter-name 的值是：" + filterConfig.getFilterName());
// 2、获取在web.xml 中配置的init-param 初始化参数
System.out.println("初始化参数username 的值是：" + filterConfig.getInitParameter("username"));
System.out.println("初始化参数url 的值是：" + filterConfig.getInitParameter("url"));
// 3、获取ServletContext 对象
System.out.println(filterConfig.getServletContext());
}
web.xml配置:
<!--filter 标签用于配置一个Filter 过滤器-->
<filter>
<!--给filter 起一个别名-->
<filter-name>AdminFilter</filter-name>
<!--配置filter 的全类名-->
<filter-class>com.atguigu.filter.AdminFilter</filter-class>
<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://localhost3306/test</param-value>
</init-param>
</filter>
11.4 FilterChain 过滤器链
Filter 过滤器
Chain 链，链条
FilterChain 就是过滤器链（多个过滤器如何一起工作）
11.5 Filter的拦截路径
–精确匹配
--精确匹配
<url-pattern>/target.jsp</url-pattern>
以上配置的路径，表示请求地址必须为：http://ip:port/工程路径/target.jsp
--目录匹配
<url-pattern>/admin/*</url-pattern>
以上配置的路径，表示请求地址必须为：http://ip:port/工程路径/admin/*
--后缀名匹配
<url-pattern>*.html</url-pattern>
以上配置的路径，表示请求地址必须以.html 结尾才会拦截到
<url-pattern>*.do</url-pattern>
以上配置的路径，表示请求地址必须以.do 结尾才会拦截到
<url-pattern>*.action</url-pattern>
以上配置的路径，表示请求地址必须以.action 结尾才会拦截到
Filter 过滤器它只关心请求的地址是否匹配，不关心请求的资源是否存在！！！
第十二章 JSON、AJAX、i18n
12.1 什么是JSON？
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对json 的支持（包括C, C++, C#, Java, JavaScript, Perl, Python 等）。这样就使得JSON 成为理想的数据交换格式。 json 是一种轻量级的数据交换格式。 轻量级指的是跟xml 做比较。 数据交换指的是客户端和服务器之间业务数据的传递格式。
12.2 JSON在JavaScript中的使用
json的定义
json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔， 多组键值对之间进行逗号进行分隔。 json 定义示例：
var jsonObj = {
"key1":12,
"key2":"abc",
"key3":true,
"key4":[11,"arr",false],
"key5":{
"key5_1" : 551,
"key5_2" : "key5_2_value"
},
"key6":[{
"key6_1_1":6611,
"key6_1_2":"key6_1_2_value"
},{
"key6_2_1":6621,
"key6_2_2":"key6_2_2_value"
}]
};
json的访问
alert(typeof(jsonObj));// object json 就是一个对象
alert(jsonObj.key1); //12
alert(jsonObj.key2); // abc
alert(jsonObj.key3); // true
alert(jsonObj.key4);// 得到数组[11,"arr",false]
// json 中数组值的遍历
for(var i = 0; i < jsonObj.key4.length; i++) {
alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key5.key5_2);//key5_2_value
alert( jsonObj.key6 );// 得到json 数组
// 取出来每一个元素都是json 对象
var jsonItem = jsonObj.key6[0];
// alert( jsonItem.key6_1_1 ); //6611
alert( jsonItem.key6_1_2 ); //key6_1_2_value
12.3 json的两个常用方法
json的存在有两种形式：
一种是：对象的形式存在，我们叫他json对象。
一种是:字符串的形式存在，我们叫他json字符串
一般我们要操作json中的数据的时候，需要json对象的格式
一般我们要在客户端和服务器之间进行数据交换的时候，使用json字符串
JSON.stringify() 把json对象转换称为json字符串
JSON.parse() 把json字符串转换称为json对象
示例代码：
// 把json 对象转换成为json 字符串
var jsonObjString = JSON.stringify(jsonObj); // 特别像Java 中对象的toString
alert(jsonObjString)
// 把json 字符串。转换成为json 对象
var jsonObj2 = JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc
12.4 JSON在java中的使用
12.4.1 javaBean和json的互转
public void test1(){
Person person = new Person(1,"国哥好帅!");
// 创建Gson 对象实例
Gson gson = new Gson();
// toJson 方法可以把java 对象转换成为json 字符串
String personJsonString = gson.toJson(person);
System.out.println(personJsonString);
// fromJson 把json 字符串转换回Java 对象
// 第一个参数是json 字符串
// 第二个参数是转换回去的Java 对象类型
Person person1 = gson.fromJson(personJsonString, Person.class);
System.out.println(person1);
}
12.4.2 List和json的互转
// 1.2.2、List 和json 的互转
@Test
public void test2() {
List<Person> personList = new ArrayList<>();
personList.add(new Person(1, "国哥"));
personList.add(new Person(2, "康师傅"));
Gson gson = new Gson();
// 把List 转换为json 字符串
String personListJsonString = gson.toJson(personList);
System.out.println(personListJsonString);
List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
System.out.println(list);
Person person = list.get(0);
System.out.println(person);
}
继承json里面的TypeToken类
public class PeopleListType extends TypeToken<ArrayList<People>> {
}
12.4.3 map和json的互转（直接用匿名内部类）
// 1.2.3、map 和json 的互转
@Test
public void test3(){
Map<Integer,Person> personMap = new HashMap<>();
personMap.put(1, new Person(1, "国哥好帅"));
personMap.put(2, new Person(2, "康师傅也好帅"));
Gson gson = new Gson();
// 把map 集合转换成为json 字符串
String personMapJsonString = gson.toJson(personMap);
System.out.println(personMapJsonString);
// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new
PersonMapType().getType());
Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new
TypeToken<HashMap<Integer,Person>>(){}.getType());
System.out.println(personMap2);
Person p = personMap2.get(1);
System.out.println(p);
}
当java里面的数据转换成json的字符串的形式，被ajax请求解析，每个对象前面会有一个标签
因此可以直接获取里面的对象，直接把list集合前面加上id，转变成key-value的形式
12.5 AJAX请求
12.5.1 什么是AJAX请求
AJAX 即“Asynchronous Javascript And XML”（异步JavaScript 和XML），是指一种创建交互式网页应用的网页开发技术。
ajax 是一种浏览器通过js 异步发起请求，局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容
Ajax请求同步和异步
Ajax同步表示你点了一个按钮，要等服务器响应完成以后才会执行，一行行执行，影响到代码后面的内容
Ajax异步表示你点了一个按钮，就算服务器响应没完成，也不影响代码后面内容的执行。
12.5.2 原生AJAX请求的示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 在这里使用javaScript 语言发起Ajax 请求，访问服务器AjaxServlet 中javaScriptAjax
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
var xmlhttprequest = new XMLHttpRequest();
// 2、调用open 方法设置请求参数
xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAj
ax",true)
// 4、在send 方法前绑定onreadystatechange 事件，处理请求完成后的操作。
xmlhttprequest.onreadystatechange = function(){
if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
var jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" +
jsonObj.name;
}
}
// 3、调用send 方法发送请求
xmlhttprequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
12.5.3 jQuary中的AJAX请求
$.ajax 方法
url 表示请求的地址
type 表示请求的类型GET 或POST 请求
data 表示发送给服务器的数据
格式有两种：
一：name=value&name=value
二：{key:value}
success 请求成功，响应的回调函数
dataType 响应的数据类型 常用的数据类型有：
text 表示纯文本
xml 表示xml 数据
json 表示json 对象
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert("服务器返回的数据是：" + data);
// var jsonObj = JSON.parse(data);
$("#msg").html("编号：" + data.id + " , 姓名：" + data.name);
},
dataType : "json"
});
});
$.get方法和$.post方法
url 请求的url 地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型
// ajax--get 请求
$("#getBtn").click(function(){
$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data)
{
$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
},"json");
});
$.getJSON方法
url 请求的url地址
data 发送给服务器的数据
callback 成功的回调函数
// ajax--getJson 请求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
(data) {
$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
});
});
表单序列化serialize（）
serialize()可以把表单中所有表单项的内容都获取到，并以name=value&name=value 的形式进行拼接。
// ajax 请求
$("#submit").click(function(){
// 把参数序列化
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
});
});
12.6 i18n国际化
国际化（Internationalization）指的是同一个网站可以支持多种不同的语言，以方便不同国家，不同语种的用户访问。 关于国际化我们想到的最简单的方案就是为不同的国家创建不同的网站，比如苹果公司，他的英文官网是： http://www.apple.com 而中国官网是http://www.apple.com/cn 苹果公司这种方案并不适合全部公司，而我们希望相同的一个网站，而不同人访问的时候可以根据用户所在的区域显示 不同的语言文字，而网站的布局样式等不发生改变。 于是就有了我们说的国际化，国际化总的来说就是同一个网站不同国家的人来访问可以显示出不同的语言。但实际上这种需求并不强烈，一般真的有国际化需求的公司，主流采用的依然是苹果公司的那种方案，为不同的国家创建不同的页面。所以国际化的内容我们了解一下即可。 国际化的英文Internationalization，但是由于拼写过长，老外想了一个简单的写法叫做I18N，代表的是Internationalization 这个单词，以I 开头，以N 结尾，而中间是18 个字母，所以简写为I18N。以后我们说I18N 和国际化是一个意思。
12.6.1 国际化相关元素介绍
12.6.2 国际化资源properties测试
配置两个语言的配置文件： i18n_en_US.properties 英文
username=username
password=password
sex=sex
age=age
regist=regist
boy=boy
email=email
girl=girl
reset=reset
submit=submit
i18n_zh_CN.properties 中文
username=用户名
password=密码
sex=性别
age=年龄
regist=注册
boy=男
girl=女
email=邮箱
reset=重置
submit=提交
国际化测试代码
public class I18nTest {
@Test
public void testLocale(){
// 获取你系统默认的语言。国家信息
// Locale locale = Locale.getDefault();
// System.out.println(locale);
// for (Locale availableLocale : Locale.getAvailableLocales()) {
// System.out.println(availableLocale);
// }
// 获取中文，中文的常量的Locale 对象
System.out.println(Locale.CHINA);
// 获取英文，美国的常量的Locale 对象
System.out.println(Locale.US);
}
@Test
public void testI18n(){
// 得到我们需要的Locale 对象
Locale locale = Locale.CHINA;
// 通过指定的basename 和Locale 对象，读取相应的配置文件
ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);
System.out.println("username：" + bundle.getString("username"));
System.out.println("password：" + bundle.getString("password"));
System.out.println("Sex：" + bundle.getString("sex"));
System.out.println("age：" + bundle.getString("age"));
}
}
12.6.3 通过请求头国际化页面
<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
// 从请求头中获取Locale 信息（语言）
Locale locale = request.getLocale();
System.out.println(locale);
// 获取读取包（根据指定的baseName 和Locale 读取语言信息）
ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
%>
<a href="">中文</a>|
<a href="">english</a>
<center>
<h1><%=i18n.getString("regist")%></h1>
<table>
<form>
<tr>
<td><%=i18n.getString("username")%></td>
<td><input name="username" type="text" /></td>
</tr>
<tr>
<td><%=i18n.getString("password")%></td>
<td><input type="password" /></td>
</tr>
<tr>
<td><%=i18n.getString("sex")%></td>
<td>
<input type="radio" /><%=i18n.getString("boy")%>
<input type="radio" /><%=i18n.getString("girl")%>
</td>
</tr>
<tr>
<td><%=i18n.getString("email")%></td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="<%=i18n.getString("reset")%>" />
<input type="submit" value="<%=i18n.getString("submit")%>" /></td>
</tr>
</form>
</table>
<br /> <br /> <br /> <br />
</center>
国际化测试：
<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
<br /> 2、通过左上角，手动切换语言
</body>
</html>
12.6.4 通过显示的选择语言类型进行国际化
<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
// 从请求头中获取Locale 信息（语言）
Locale locale = null;
String country = request.getParameter("country");
if ("cn".equals(country)) {
locale = Locale.CHINA;
} else if ("usa".equals(country)) {
locale = Locale.US;
} else {
locale = request.getLocale();
}
System.out.println(locale);
// 获取读取包（根据指定的baseName 和Locale 读取语言信息）
ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
%>
<a href="i18n.jsp?country=cn">中文</a>|
<a href="i18n.jsp?country=usa">english</a>
<center>
<h1><%=i18n.getString("regist")%></h1>
<table>
<form>
<tr>
<td><%=i18n.getString("username")%></td>
<td><input name="username" type="text" /></td>
</tr>
<tr>
<td><%=i18n.getString("password")%></td>
<td><input type="password" /></td>
</tr>
<tr>
<td><%=i18n.getString("sex")%></td>
<td>
<input type="radio" /><%=i18n.getString("boy")%>
<input type="radio" /><%=i18n.getString("girl")%>
</td>
</tr>
<tr>
<td><%=i18n.getString("email")%></td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="<%=i18n.getString("reset")%>" />
<input type="submit" value="<%=i18n.getString("submit")%>" /></td>
</tr>
</form>
</table>
<br /> <br /> <br /> <br />
</center>
国际化测试：
<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
<br /> 2、通过左上角，手动切换语言
</body>
</html>
4.6 JSTL标签库实现国际化
<%–1 使用标签设置Locale 信息–%> <fmt:setLocale value=”” /> <%–2 使用标签设置baseName–%> <fmt:setBundle basename=””/> <%–3 输出指定key 的国际化信息–%> <fmt:message key=”” />
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%--1 使用标签设置Locale 信息--%>
<fmt:setLocale value="${param.locale}" />
<%--2 使用标签设置baseName--%>
<fmt:setBundle basename="i18n"/>
<a href="i18n_fmt.jsp?locale=zh_CN">中文</a>|
<a href="i18n_fmt.jsp?locale=en_US">english</a>
<center>
<h1><fmt:message key="regist" /></h1>
<table>
<form>
<tr>
<td><fmt:message key="username" /></td>
<td><input name="username" type="text" /></td>
</tr>
<tr>
<td><fmt:message key="password" /></td>
<td><input type="password" /></td>
</tr>
<tr>
<td><fmt:message key="sex" /></td>
<td>
<input type="radio" /><fmt:message key="boy" />
<input type="radio" /><fmt:message key="girl" />
</td>
</tr>
<tr>
<td><fmt:message key="email" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="<fmt:message key="reset" />" />
<input type="submit" value="<fmt:message key="submit" />" /></td>
</tr>
</form>
</table>
<br /> <br /> <br /> <br />
</center>
</body>
</html>
第十三章 BookStrap
13.1 概念：
一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
- 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
- 好处：
- 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
- 响应式布局。
- 同一套页面可以兼容不同分辨率的设备。
13.2 快速入门
-
下载Bootstrap
-
在项目中将这三个文件夹复制
-
创建html页面，引入必要的资源文件
//最基本的bookstrap页面
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-3.2.1.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>你好，世界！</h1> </body> </html>13.3 响应式布局
-
同一套页面可以兼容不同分辨率的设备。
-
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
-
步骤： 1. 定义容器。相当于之前的table、
- 容器分类：
- container：两边留白
- container-fluid：每一种设备都是100%宽度 2. 定义行。相当于之前的tr 样式：row 3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
- 设备代号：
- xs：超小屏幕 手机 (<768px)：col-xs-12
- sm：小屏幕 平板 (≥768px)
- md：中等屏幕 桌面显示器 (≥992px)
- lg：大屏幕 大桌面显示器 (≥1200px)
- 容器分类：
* 注意： 1. 一行中如果格子数目超过12，则超出部分自动换行。 2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。 3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
-
<body> <div class="container-fluid"> <---->一般实际开发中都用container，留白比较好看</----> <div class="row"> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <div class="col-lg-1 col-xs-3 inner">栅格</div> <-->最大占1行</--> <---->最小的屏幕也只占三行</---->
-
13.4 CSS样式和JS插件
按钮:
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
图片:
* class="img-responsive"：图片在任意尺寸都占100%
* 图片形状
* <img src="..." alt="..." class="img-rounded">：方形
* <img src="..." alt="..." class="img-circle"> ： 圆形
* <img src="..." alt="..." class="img-thumbnail"> ：相框
表格：
table
table-bordered 加入边框
table-hover 鼠标滑到变色
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
具体见bootstrap里面
组件
导航条
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
分页条
<nav>
<ul class="pagination">
<li>
<a class="disabled" href="#" aria-label="Previous">//表示无法选中，具体见官方文档
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>//表示激活状态
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
插件
轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
BookStrap案例
<!DOCTYPE html>
<html lang="zh-CN">
<!--指定为中文-中国-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>黑马旅游网</title>
<!--导入bootstrap框架-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<header class="container-fluid">
<!--第一行-->
<div class="row">
<img src="img/top_banner.jpg" class="img-responsive">
</div>
<!--第二行-->
<div class="row padd-top">
<div class="col-md-4">
<img src="img/logo.jpg" class="text-center">
</div>
<div class="col-md-5 padd-top">
<input class="search_input" type="text" placeholder="请输入线路名称">
<a class="search_button" href="#">搜索</a>
</div>
<div class="col-md-3">
<img src="img/hotel_tel.png">
</div>
</div>
<!--第三行-->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 指定商标和开关的样式，让它在手机上更好的显示-->
<div class="navbar-header">
<!--开关按钮-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="glyphicon glyphicon-th-list" style="color: white"></span>
</button>
<a class="navbar-brand" href="#">传智播客</a>
</div>
<!-- 下拉菜单，表单等-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">JavaEE <span class="sr-only">(current)</span></a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Android</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--第四行：轮播图-->
<div class="row">
<div id="carousel-example-generic" data-interval="2000" class="carousel slide" data-ride="carousel">
<!-- 中间的小圆点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 包含图片 -->
<div class="carousel-inner" role="listbox">
<!--每个div是一张图片-->
<div class="item active">
<img src="img/banner_1.jpg">
<div class="carousel-caption">
弓箭手
</div>
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
<div class="carousel-caption">
我是歌手
</div>
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="...">
<div class="carousel-caption">
花木兰
</div>
</div>
</div>
<!-- 控制按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<div class="container">
<!--黑马精选-->
<div class="row">
<div class="jx_top">
<img src="img/icon_5.jpg">
黑马精选
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="jx_top">
<img src="img/icon_6.jpg">
国内游
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/guonei_1.jpg" class="img-responsive">
</div>
<div class="col-md-8">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_1.jpg" alt="...">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<span style="color: red">¥888</span>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<div class="row">
<img src="img/footer_service.png" class="img-responsive">
</div>
<div class="row company">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
</div>
</footer>
</body>
</html>