HTML
CSS技术
JavaScript 和 html 代码的结合方式
jQuery核心函数
- Dom 对象和 jQuery 对象互转
jQuery选择器
- 基本选择器
ID选择器：根据 id 查找标签对象
XML简介
- XML 文本区域
- dom4j解析技术
Tomcat
Servlet技术

HTML

font标签属性

属性	作用
color	设置字体颜色
face	设置字体类型
size	设置字体大小

特殊字符

把一些特殊字符放在页面中显示不能直接将其打出，需要用实体名称给出

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&amp`	`&`
“	引号	`&quot`	`"`
‘	单引号	`'`	`'`

<body>       
html &nbsp;
</body>

标题

标题标签为从h1到h6

align属性	作用
left	靠左对齐
right	靠右对齐
center	居中

超链接

将超链接写在a标签中

href属性为超链接路径
target为设置哪个目标进行跳转
- _self:表示当前页面(默认值)
- _blank:表示打开新页面来进行跳转

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>
    <!-- a标签是 超链接
             href属性设置连接的地址
             target属性设置哪个目标进行跳转
                 _self        表示当前页面(默认值)
                 _blank        表示打开新页面来进行跳转
     -->
    <a href="http://www.baidu.com">百度</a><br/>
    <a href="http://www.baidu.com" target="_self">百度_self</a><br/>
    <a href="http://www.baidu.com" target="_blank">百度_blank</a><br/>
</body>
</html>

img 标签

在web中路径分为相对路径和绝对路径两种

相对路径
- .表示当前文件所在的目录
- .. 表示当前文件所在的上一级目录

绝对路径
- http://ip:port/工程名/资源路径

属性	作用
src	设置图片路径
width	设置图片宽度
height	设置图片高度
border	设置图片边框大小
alt	设置当指定路径找不到图片时，用来代替显示的文本内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
    <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>

表格标签

table标签是表格标签

tr：行标签、th：表头标签、td单元格标签、b：加粗标签 | 属性 | 作用 | | —- | —- | | border | 设置表格标签 | | width | 设置表格宽度 | | height | 设置表格高度 | | align | 设置表格相对于页面的对齐方式 | | cellspacing | 设置单元格间距 | | colspan | 属性设置跨列 | | rowspan | 属性设置跨行 |

需求1: 新建一个五行，五列的表格，
第一行，第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。

<table width="500" height="500" cellspacing="0" border="1">
            <tr>
                <th colspan="2" width="100">1.1</th>
                <th>1.3</th>
                <th>1.4</th>
                <th>1.5</th>
            </tr>
            <tr>
                <td rowspan="2">2.1</td>
                <td>2.2</td>
                <td>2.3</td>
                <td>2.4</td>
                <td>2.5</td>
            </tr>
            <tr>
                <td>3.2</td>
                <td>3.3</td>
                <td>3.4</td>
                <td>3.5</td>
            </tr>
            <tr>
                <td>4.1</td>
                <td>4.2</td>
                <td>4.3</td>
                <td colspan="2" rowspan="2">4.4</td>
            </tr>
            <tr>
                <td>5.1</td>
                <td>5.2</td>
                <td>5.3</td>
            </tr>
        </table>

iframe

ifarme标签可以在页面上开辟一个小区域显示一个单独的页面

ifarme和a标签组合使用的步骤:
- 1、在iframe标签中使用name属性定义一个名称
- 2、在a标签的target属性上设置iframe的name的属性值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
    <iframe src="https://www.bilibili.com/" width="1500" height="600" name="abc"></iframe>
    <br/>

    <ul>
        <li><a href="http://www.baidu.com" target="abc">百度</a></li>
        <li><a href="https://www.csdn.net/" target="abc">CSDN</a></li>
        <li><a href="https://www.bilibili.com/" target="abc">哔哩哔哩</a></li>
    </ul>
</body>
</html>

列表

ul是无序列表
ol是有序列表
- li是列表项
- type属性可以修改列表项前面的符号

<ul type="none"> 
    <li>赵四</li>   
    <li>刘能</li>   
    <li>小沈阳</li>   
    <li>宋小宝</li>
</ul>

表单

form标签就是表单
- action：设置提交的服务器地址
- method：设置提交的方式GET(默认值)或POST

input标签为输入（其中type属性可以设置输入类型）
- text：文本输入框，value设置默认显示内容
- password：密码输入框，value设置默认显示内容
- radio：单选框，name属性可以对其进行分组，checked=”checked”表示默认选中。
- checkbox：复选框，checked=”checked”表示默认选中
- reset：重置按钮，value属性可以修改其文本
- submit：提交按钮，value属性可以修改其文本
- button：按钮，value属性可以修改其文本,(有onclick属性：当按钮被点击时执行javascript代码)
- file:文件上传域
- hidden：隐藏域，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

select标签是下拉列表框
- option 标签是下拉列表框中的选项 selected=”selected”设置默认选中

textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
- rows 属性设置可以显示几行的高度
- cols 属性设置每行可以显示几个字符宽度
表单提交的时候，数据没有发送给服务器的三种情况
表单项没有name属性值
单选、复选都需要添加value属性，以便发送给服务器
表单项不在提交的form中

PS：在单选框中对于同一个组别的需要设置name属性才能使单选生效

<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>

其他标签

div标签，默认独占一行
span标签，它的长度是封装数据的长度
p段落标签，默认会在段落上方或下方各空出一行来

CSS技术

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的
最后可以不加分号(但尽量在每条声明的末尾都加上分号)

p{
color:red;
font-size:30px;
}

CSS和HTML的结合方式

第一种：在标签的 style 属性上设置”key:value value;”，修改标签样式。

<!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 #ff0000;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>
</html>

第二种：在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        /* 需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。*/
        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>

第三种：把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。

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>

CSS选择器

标签名选择器

标签名选择器的格式是：
标签名{
属性：值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            border: 5px dashed  blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 
    需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
    并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
     -->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

id 选择器

id 选择器的格式是：
#id 属性值{
属性：值;
}
id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">

        #id001{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }

        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted ;
        }

    </style>
</head>
<body>        
    <!--
    需求1：分别定义两个 div 标签，
    第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
    字体大小30个像素。边框为1像素黄色实线。

    第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。
    边框为5像素蓝色点线。
     -->

    <div id="id002">div标签1</div>
    <div id="id001">div标签2</div>
</body>
</html>

类选择器

class 类型选择器的格式是：
.class 属性值{
属性：值;
}
class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class类型选择器</title>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }

        .class02{
            color: grey;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!--
        需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
        需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
     -->

    <div class="class02">div标签class01</div>
    <div class="class02">div标签</div>
    <span class="class02">span标签class01</span>
    <span>span标签2</span>
</body>
</html>

组合选择器

组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class类型选择器</title>
    <style type="text/css">
        .class01 , #id01{
            color: blue;
            font-size: 20px;
            border:  yellow 1px solid;
        }
    </style>
</head>
<body>
    <!-- 
    需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
    字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
     -->
   <div id="id01">div标签class01</div> <br />
   <span>span 标签</span>  <br />
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />
</body>
</html>

CSS常用样式

字体颜色 color：red；
颜色可以写颜色名如：black, blue, red, green 等颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#
宽度 width:19px;
宽度可以写像素值：19px；
也可以写百分比值：20%；
高度
height:20px;
高度可以写像素值：19px；
也可以写百分比值：20%；
背景颜色
background-color:#0F2D4C
字体样式
color：#FF0000；字体颜色红色
font-size：20px; 字体大小
红色
像素实线边框 border：1px solid red;
DIV 居中
margin-left: auto;
margin-right: auto;
文本居中
text-align: center;
超连接去下划线
text-decoration: none;
表格细线

table {
border: 1px solid black; 设置边框
border-collapse: collapse; 将边框合并
}
td,th {
border: 1px solid black; 设置边框
}
**列表去除修饰**
ul {
list-style: none;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06-css常用样式.html</title>
    <style type="text/css">

        div{
            color: red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 30px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        table{
            border: 1px red solid;
            border-collapse: collapse;
        }

        td{
            border: 1px red solid;
        }

        a{
            text-decoration: none;

        }

        ul{
            list-style: none;
        }

    </style>
</head>
<body>
    <ul>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
    </ul>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <a href="http://www.baidu.com">百度</a>
    <div>我是div标签</div>
</body>
</html>

html在执行代码的时候是从上往下执行的，由于javascript代码一般是放在上面的，所以如果有需要等待页面加载完毕再执行的js代码需要放在函数window.onload = function () {}中。

JavaScript 和 html 代码的结合方式

第一种

只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码

<script >   
    alert("helloJavaScript")
</script>

第二种

使用 script 标签引入单独的 JavaScript 代码文件

<script  type="text/javascript" src="1.js">
</script>

PS
script 标签可以用来定义js代码，也可以用来引入文件。但是，两个功能二选一使用。不能同时使用两个功能，如有需要，则要再增加一个script标签。

变量

变量	类型
number	数值类型
string	字符串类型
object	对象类型
boolean	布尔类型
function	函数类型

javaScript里面特殊的值

undefined：未定义，所有js变量未赋于初始值的时候，默认是undefined
null：空值
NAN：非数值
变量定义：var i;

函数

函数	功能
alert	输出
typeof	数据类型
arr.length	返回数组长度

关系运算

运算符	功能
==	等于（只比较不判断类型是否相同）
===	全等于（判断值和类型）
&&	且
`\|\|`	或
！	取反

0 、null、 undefined、””(空串) 都认为是 false；

&& 且运算。
- 当表达式全为真的时候。返回最后一个表达式的值。
- 当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算
- 当表达式全为假时，返回最后一个表达式的值
- 只要有一个表达式为真。就会把回第一个为真的表达式的值

&& 与运算和 ||或运算有短路。短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
   /*     在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
        0 、null、 undefined、””(空串) 都认为是 false；*/
        //
        // var a = 0;
        // if (a) {
        //     alert("零为真");
        // } 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>
</head>
<body>

</body>
</html>

数组

javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组做扩容操作

var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true];// 定义数组同时赋值元素

数组遍历

   <script>
        var arr=[1,2,3,4,5];
        for (var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }
    </script>

函数

第一种，可以使用 function 关键字来定义函数。
使用的格式如下:

function 函数名(形参列表){
函数体
}

在 JavaScript 语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用 return 语句返回值即可！

<script>
        function fun(){
            alert("无参函数被调用");
        }
        fun();

        function fun2(a,b){
            alert("有参函数被调用 a="+a+",b="+b);
        }
        fun2(1,"d");

        function fun3(num1,num2){
            return num1+num2;
        }
        alert(fun3(100,200));
    </script>

第二种

var 函数名 = function(形参列表) { 函数体}

隐形参数

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object … args );
可变长参数其他是一个数组。
那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

<script>
    function fun(){
        // alert(arguments.length)
        for (var i=0;i<arguments.length;i++)
            alert(arguments[i])
    }
    fun(1,2,3,4)
</script>

JS中的自定义对象

对象的定义：
方式一
var 变量名 = new Object();//对象实例（空对象）
变量名.属性名= 值;//定义一个属性
变量名.函数名= function(){}//定义一个函数
方式二
var 变量名 = {//空对象
属性名：值,//定义一个属性
属性名：值,//定义一个属性
函数名：function(){}//定义一个函数
};
对象的访问：变量名.属性 /函数名();

<script>
    <!--方式一-->
    var obj = new Object();
    obj.name="华仔";
    obj.age=18;
    obj.fun=function (){
        alert("姓名："+obj.name+",年龄："+obj.age)
    };
    obj.fun()
    <!--方式二-->
    var obj1={
        name:"啊华",
        age:"19",
        fun:function (){alert("姓名："+obj1.name+",年龄："+obj1.age)
        }
    }
    obj1.fun()

</script>

事件

常用的事件：
onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

静态注册和动态注册
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件
响应后的代码，叫动态注册。

动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}

onload加载完成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件，所有代码');
        }

        // onload事件动态注册。是固定写法
        window.onload = function () {
            alert("动态注册的onload事件");
        }

    </script>
</head>
<!--静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
       <body onload="onloadFun();">
-->
<body>

</body>
</html>

onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onloadFun(){<!--静态写法 -->
            alert("静态注册onload事件,所有代码");
        }

        window.onload=function (){<!--动态写法 -->
            alert("动态注册onload事件,所有代码");
        }
    </script>
</head>
<!--<body onload=onloadFun()>--><!--静态写法 -->
<body><!--动态写法 -->
    <p>段落</p>
</body>
</html>

按钮触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onloadFun(){<!--静态写法 -->
            alert("静态注册onclick事件");
        }

        window.onload=function (){<!--动态写法 -->
            //1 获取标签对象
            /*
            document 是JavaScript语言提供的一个对象
            getElementById通过id属性获取标签对象
             */
            var btnObj = document.getElementById("btn01");
            //2 通过标签对象.事件名=function(){}
            btnObj.onclick=function () {
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
    <button onclick="onloadFun()">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // console 是控制台对象，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
        // log() 是打印的方法
        function onloadFun() {
            console.log("静态失去焦点事件")
        }

        window.onload=function () {
            //1.获取标签对象
            var password = document.getElementById("pass");
            //2 通过标签对象.事件名 = function(){};
            password.onblur=function () {
                console.log("动态失去焦点事件")
            }
        }
    </script>
</head>
<body>
    用户名: <input type="text" onblur="onloadFun()"><br>
    密码: <input type="password" id="pass"><br>
</body>
</html>

onchange 内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // console 是控制台对象，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
        // log() 是打印的方法
        function onloadFun() {
           alert("女神发生改变")
        }

        window.onload=function () {
            //1.获取标签对象
            var select = document.getElementById("select01");
            //2 通过标签对象.事件名 = function(){};
            select.onchange=function () {
                alert(select.value)
            }

        }
    </script>
</head>
<body>
    <select onchange="onloadFun()">
        <option>--女神--</option>
        <option>赵丽颖</option>
        <option>迪丽热巴</option>
        <option>马尔扎哈</option>
    </select>
    <br>
    <select id="select01">
        <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>

DOM 模型

DOM 全称是 Document Object Model 文档对象模型，就是把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象中的方法介绍

document.getElementById(elementId):通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)通过标签的 name 属性查找标签dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

PS:document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

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>
</html>

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;
            }
        }
    </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>

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>

正则表达式

<!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>

DOM查询操作

childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点
className用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText 属性，表示获取/设置起始标签和结束标签中的文本

<!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>

jQuery核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。 $JavaWeb1 - 图1$ %E5%B0%B1%E6%98%AF%E8%B0%83%E7%94%A8#card=math&code=%28%29%E5%B0%B1%E6%98%AF%E8%B0%83%E7%94%A8&id=gJGx2)这个函数

1、传入参数为 [ 函数 ] 时：表示页面加载完成之后。相当于 window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时：
$JavaWeb1 - 图2$ %3B%0Aid%20%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%8C%E6%A0%B9%E6%8D%AE%20id%20%E6%9F%A5%E8%AF%A2%E6%A0%87%E7%AD%BE%E5%AF%B9%E8%B1%A1%0A#card=math&code=%28%E2%80%9C%23id%20%E5%B1%9E%E6%80%A7%E5%80%BC%E2%80%9D%29%3B%0Aid%20%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%8C%E6%A0%B9%E6%8D%AE%20id%20%E6%9F%A5%E8%AF%A2%E6%A0%87%E7%AD%BE%E5%AF%B9%E8%B1%A1%0A&id=Yhu08)(“标签名”);
标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”);
类型选择器，可以根据 class 属性查询标签对象
4、传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象

    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#btn01").click(function () {
                alert("jQuert的单击事件")
            })
        })
        $(function () {
            $("<div>div标签</div>").appendTo("body")
        })

        alert($("button"));

    </script>

Dom 对象和 jQuery 对象互转

1、dom 对象转化为 jQuery 对象

先有 DOM 对象
$( DOM 对象 ) 就可以转换成为 jQuery 对象

2、jQuery 对象转为 dom 对象

先有 jQuery 对象
jQuery 对象[下标]取出相应的 DOM 对象

jQuery选择器

基本选择器
ID选择器：根据 id 查找标签对象
.class选择器：根据 class 查找标签对象
element选择器：根据标签名查找标签对象
*选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回
层级选择器
ancestor descendant
在给定的祖先元素下匹配所有的后代元素
HTML代码
```
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
    <label>Newsletter:</label>
    <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
```

jQuery代码

$("form input")

结果

[ <input name="name" />, <input name="newsletter" /> ]

parent > child

在给定的父元素下匹配所有的子元素
HTML代码


<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码

$("form > input")

结果

[ <input name="name" /> ]

prev + next

匹配所有紧接在 prev 元素后的 next 元素
HTML代码


<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码

$("label + input")

结果

[ <input name="name" />, <input name="newsletter" /> ]

prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }

            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }

            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            <!--ready()当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。-->
            /*$(document).ready(function(){
                // 在这里写你的代码...
            });
            */  
            //以下为简写
            /*$(function($) {
                // 你可以在这里继续使用$作为别名...
                });
             */
            $(document).ready(function(){
                //1.选择 body 内的所有 div 元素
                $("#btn1").click(function(){
                    $("body div").css("background", "#bbffaa");
                });

                //2.在 body 内, 选择div子元素  
                $("#btn2").click(function(){
                    $("body > div").css("background", "#bbffaa");
                });

                //3.选择 id 为 one 的下一个 div 元素 
                $("#btn3").click(function(){
                    $("#one+div").css("background", "#bbffaa");
                });

                //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
                $("#btn4").click(function(){
                    $("#two~div").css("background", "#bbffaa");
                });
            });
        </script>
    </head>
    <body>    

<!--     <div>
        <h1>层级选择器:根据元素的层级关系选择元素</h1>
        ancestor descendant  ：
        parent > child            ：
        prev + next            ：
        prev ~ siblings        ：
    </div>     -->
        <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
        <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
        <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
        <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素^^</span>
    </body>
</html>

过滤选择器

选择器	作用
:first	获取第一个元素
:last	获取最后个元素
:not(selector)	去除所有与给定选择器匹配的元素
:even	匹配所有索引值为偶数的元素，从 0 开始计数
:odd	匹配所有索引值为奇数的元素，从0开始计数
:eq()	匹配一个给定索引值的元素
:gt()	匹配所有大于给定索引值的元素
:lt()	匹配所有小于给定索引值的元素
:header	匹配如h1，h2，h3之类的标题元素
:animated	匹配所有正在执行动画效果的元素
:focus	触发每一个匹配元素的focus事件。

内容选择器

选择器	作用
:contains(text)	匹配包含给定文本的元素
:empty	匹配所有不包含子元素或者文本的空元素
:has(selector)	匹配含有选择器所匹配的元素的元素
:parent	匹配含有子元素或者文本的元素
:hidden	匹配所有不可见元素，或者type为hidden的元素
:visible	匹配所有的可见元素

属性过滤器

过滤器	作用
[attribute]	匹配包含给定属性的元素。
[attribute=value]	匹配给定的属性是某个特定值的元素
[attribute!=value]	匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素

表单过滤器

过滤器	作用
:input	匹配所有 input, textarea, select 和 button 元素
:text	匹配所有的单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:image	匹配所有图像域
:reset	匹配所有重置按钮
:button	匹配所有按钮
:file	匹配所有文件域
:hidden	匹配所有不可见元素，或者type为hidden的元素

<script type="text/javascript">
            $(function(){
                //1.对表单内 可用input 赋值操作
                $("#btn1").click(function(){
                    // val()可以操作表单项的value属性值
                    // 它可以设置和获取
                    $(":text:enabled").val("我是万能的程序员");
                });
                //2.对表单内 不可用input 赋值操作
                $("#btn2").click(function(){
                    $(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
                });
                //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
                $("#btn3").click(function(){
                    alert( $(":checkbox:checked").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>

元素的筛选

过滤器	作用
eq()	获取给定索引的元素功能跟:eq()一样
first()	获取第一个元素功能跟:first一样
last()	获取最后一个元素功能跟:last一样
filter(exp)	留下匹配的元素

其他可查文档

<script type="text/javascript">
    $(document).ready(function(){
        function anmateIt(){
            $("#mover").slideToggle("slow", anmateIt);
        }
        anmateIt();

        //(1)eq()  选择索引值为等于 3 的 div 元素
        $("#btn1").click(function(){
            $("div").eq(3).css("background-color","#bfa");
        });
        //(2)first()选择第一个 div 元素
         $("#btn2").click(function(){
             //first()   选取第一个元素
            $("div").first().css("background-color","#bfa");
        });
        //(3)last()选择最后一个 div 元素
        $("#btn3").click(function(){
            //last()  选取最后一个元素
            $("div").last().css("background-color","#bfa");
        });
        //(4)filter()在div中选择索引为偶数的
        $("#btn4").click(function(){
            //filter()  过滤   传入的是选择器字符串
            $("div").filter(":even").css("background-color","#bfa");
        });
         //(5)is()判断#one是否为:empty或:parent
        //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>

jQuery 的属性操作

html()它可以设置和获取起始标签和结束标签中的内容。
跟 dom 属性 innerHTML 一样。
text()它可以设置和获取起始标签和结束标签中的文本。
跟 dom 属性 innerText 一样。
val()它可以设置和获取表单项的 value 属性值。
跟 dom 属性 value 一样
attr()可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等,attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等


$('p').html();返回p元素的内容
$("p").html("Hello <b>world</b>!");设置p元素的内容
$("input").val(); 无参数为获取文本框中的值
$("input").val("hello world!");有参数为设置文本框的值
$('p').text();返回p元素的文本内容
$("p").text("Hello world!");设置p元素的文本内容

$("img").attr("src");返回文档中所有图像的src属性值
$("img").attr({ src: "test.jpg", alt: "Test Image" });为所有图像设置src和alt属性

$("input[type='checkbox']").prop("checked");选中复选框为true，没选中为false
$("input[type='checkbox']").prop({ disabled: true});禁用页面上的所有复选框
禁用何选中所有页面上的复选框
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

$("input[type='checkbox']").prop("checked", function( i, val ) {  return !val;});通过函数来设置所有页面上的复选框被选中。

DOM 的增删改

函数	功能
a.appendTo(b)	把 a 插入到 b 子元素末尾，成为最后一个子元素
a.prependTo(b)	把 a 插到 b 所有子元素前面，成为第一个子元素
a.insertAfter(b)	得到 ba
a.insertBefore(b)	得到 ab
a.replaceWith(b)	用 b 替换掉 a
a.replaceAll(b)	用 a 替换掉所有 b
a.remove();	删除 a 标签
a.empty();	清空 a 标签里的内容

CSS 样式操作

函数	功能
addClass()	添加样式
removeClass()	删除样式
toggleClass()	有就删除，没有就添加样式
offset()	获取和设置元素的坐标。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

    div{
        width:100px;
        height:260px;
    }

    div.border{
        border: 2px white solid;
    }

    div.redDiv{
        background-color: red;
    }

    div.blackDiv{
        border: 5px blue solid;
    }
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">


    $(function(){
        /*
CSS
css(name|pro|[,val|fn])       读写匹配元素的样式属性。 
                                a.css('color')取出a元素的color
                                a.css('color',"red")设置a元素的color为red

CSS 类

addClass(class|fn)             为元素添加一个class值;<div class="mini big">
removeClass([class|fn])     删除元素的class值；传递一个具体的class值，就会删除具体的某个class
                            a.removeClass()：移除所有的class值

**/

        var $divEle = $('div:first');

        $('#btn01').click(function(){
            //addClass() - 向被选元素添加一个或多个类
            $divEle.addClass("redDiv blackDiv");
        });

        $('#btn02').click(function(){
            //removeClass() - 从被选元素删除一个或多个类 
            $divEle.removeClass()
        });

        $('#btn03').click(function(){
            //toggleClass() - 对被选元素进行添加/删除类的切换操作 
            //切换就是如果具有该类那么删除，如果没有那么添加上
            $divEle.toggleClass("redDiv");
        });

        $('#btn04').click(function(){
            //offset() - 返回第一个匹配元素相对于文档的位置。
            var os = $divEle.offset();
            //注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
            alert("顶边距："+os.top+" 左边距："+os.left);

            //调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
            //offset({ top: 10, left: 30 });
             $divEle.offset({
                 top:50,
                 left:60
             }); 
        });
    })
</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>

品牌展示练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>品牌展示练习</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body {font-size:12px;text-align:center;}
        a { color:#04D; text-decoration:none;}
        a:hover { color:#F50; text-decoration:underline;}
        .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
        .SubCategoryBox ul { list-style:none;}
        .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
        .showmore { clear:both; text-align:center;padding-top:10px;}
        .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
        .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
        .promoted a { color:#F50;}
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
            var category = $("ul:first li:gt(4):not(:last)");
            category.hide();

            var $promoptedCategory = $("ul:first li").filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')");

            $(".showmore a").click(function(){
                if(category.is(":hidden")){
                    category.show();
                    $promoptedCategory.addClass("promoted");
                    $(".showmore a span").text("显示精简品牌")
                                         .css("background", "url(img/up.gif) no-repeat 0 0");
                }else{
                    category.hide();
                    $promoptedCategory.removeClass("promoted");
                    $(".showmore a span").text("显示全部品牌")
                                         .css("background", "url(img/down.gif) no-repeat 0 0");
                }

                return false;
            });
        });
    </script>
    </head>
    <body>
        <div class="SubCategoryBox">
            <ul>
                <li ><a href="#">佳能</a><i>(30440) </i></li>
                <li ><a href="#">索尼</a><i>(27220) </i></li>
                <li ><a href="#">三星</a><i>(20808) </i></li>
                <li ><a href="#">尼康</a><i>(17821) </i></li>
                <li ><a href="#">松下</a><i>(12289) </i></li>
                <li ><a href="#">卡西欧</a><i>(8242) </i></li>
                <li ><a href="#">富士</a><i>(14894) </i></li>
                <li ><a href="#">柯达</a><i>(9520) </i></li>
                <li ><a href="#">宾得</a><i>(2195) </i></li>
                <li ><a href="#">理光</a><i>(4114) </i></li>
                <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
                <li ><a href="#">明基</a><i>(1466) </i></li>
                <li ><a href="#">爱国者</a><i>(3091) </i></li>
                <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
            </ul>
            <div class="showmore">
                <a href="more.html"><span>显示全部品牌</span></a>
            </div>
        </div>
    </body>
</html>

jQuery 事件操作

函数	作用
click()	它可以绑定单击事件，以及触发单击事件
mouseover()	鼠标移入事件
mouseout()	鼠标移出事件
one()	使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次
unbind()	跟 bind 方法相反的操作，解除事件的绑定
live()	也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">

            $(function(){
                //*1.通常绑定事件的方式
                //给元素绑定事件  
                //jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
                //绑定事件可以链式操作
                //toggle()有就隐藏，没有就删除
                $(".head").click(function(){
                    $(".content").toggle();
                }).mouseover(function(){
                    $(".content").toggle();
                }); 

                //*2.jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
                //type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
                //bind(事件字符串,回调函数),后来添加的元素不会绑定事件
                //使用bind()绑定多个事件   type可以接受多个事件类型，使用空格分割多个事件
                /* $(".head").bind("click mouseover",function(){
                    $(".content").toggle();
                }); */


                //3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)函数把元素和事件绑定起来
                //type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
            /*     $(".head").one("click mouseover",function(){
                    $(".content").toggle();
                }); */

                //4.live方法会为现在及以后添加的元素都绑定上相应的事件，bind事件绑定后如果再页面加载完成后再加标签将不会被动态绑定
            /**    $(".head").live("click",function(){
                    $(".content").toggle();
                });

                $("#panel").before("<h5 class='head'>什么是jQuery?</h5>");
            */
            });

        </script>
    </head>
    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>

</html>

事件冒泡

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递

事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。

如何获取呢 javascript 事件对象呢？

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。

动画

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

<script type="text/javascript">
    /*     
        基本
        show([speed,[easing],[fn]]) 
        hide([speed,[easing],[fn]]) 
        toggle([speed],[easing],[fn]) 
        滑动
        slideDown([spe],[eas],[fn]) 
        slideUp([speed,[easing],[fn]]) 
        slideToggle([speed],[easing],[fn]) 
        淡入淡出
        fadeIn([speed],[eas],[fn]) 
        fadeOut([speed],[eas],[fn]) 
        fadeTo([[spe],opa,[eas],[fn]]) 
        fadeToggle([speed,[eas],[fn]])
        */
        $(function(){
            //显示   show()
            $("#btn1").click(function(){
                $("#div1").show(1000);
            });        
            //隐藏  hide()
            $("#btn2").click(function(){
                $("#div1").hide(1000);
            });    
            //切换   toggle()
            $("#btn3").click(function(){
                $("#div1").toggle(1000);
            });    


            //淡入   fadeIn()
            $("#btn4").click(function(){
                $("#div1").fadeIn(500);
            });    
            //淡出  fadeOut()
            $("#btn5").click(function(){
                $("#div1").fadeOut(500);
            });    

            //淡化到  fadeTo()
            $("#btn6").click(function(){
                $("#div1").fadeTo("slow",Math.random());
            });    
            //淡化切换  fadeToggle()
            $("#btn7").click(function(){
                $("#div1").fadeToggle("slow","linear");
            });    
        })
</script>

    </head>
    <body>
        <table style="float: left;">
            <tr>
                <td><button id="btn1">显示show()</button></td>
            </tr>
            <tr>
                <td><button id="btn2">隐藏hide()</button></td>
            </tr>
            <tr>
                <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
            </tr>
            <tr>
                <td><button id="btn4">淡入fadeIn()</button></td>
            </tr>
            <tr>
                <td><button id="btn5">淡出fadeOut()</button></td>
            </tr>
            <tr>
                <td><button id="btn6">淡化到fadeTo()</button></td>
            </tr>
            <tr>
                <td><button id="btn7">淡化切换fadeToggle()</button></td>
            </tr>
        </table>

        <div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
            jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
        </div>
    </body>

</html>

图片跟随

<!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")
            .mouseover(function(event){
                $("#showBig")
                    .show()
                    .css("left",event.pageX+10)
                    .css("top",event.pageY+10);
            })
            .mousemove(function(event){
                $("#showBig")
                    .css("left",event.pageX+10)
                    .css("top",event.pageY+10);
            })
            .mouseout(function(){
                $("#showBig").hide();
            });
    });
</script>
</head>
<body>

    <img id="small" src="img/small.jpg" />

    <div id="showBig">
        <img src="img/big.jpg">
    </div>

</body>
</html>

XML简介

xml 是可扩展的标记性语言。

xml 的主要作用有：

用来保存数据，而且这些数据具有自我描述性
它还可以做为项目或者模块的配置文件
还可以做为网络传输数据的格式（现在 JSON 为主）

XML 文本区域

CDATA 语法可以告诉 xml 解析器，我 CDATA 里的文本内容，只是纯文本，不需要 xml 语法解析

CDATA 格式： <![CDATA[这里可以把你输入的字符原样显示，不会解析 xml ]]>

dom4j解析技术

由于 dom4j 它不是 sun 公司的技术，而属于第三方公司的技术，我们需要使用 dom4j 就需要到 dom4j 官网下载 dom4j 的 jar 包。

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 java.util.List;

public class Dom4jTest {
    @Test
    public void test1() throws Exception {
        //创建一个SAXReader流，去读取xml配置文件，生成Document对象
        SAXReader saxReader = new SAXReader();
        Document document = saxReader.read("src/books.xml");
        System.out.println(document);
    }

    /**
     * 读取book.xml文件生成book类
     */
    @Test
    public void test2() throws Exception {
        //1.读取book.xml
        SAXReader reader = new SAXReader();
        //2.通过Document对象获取根元素
        Document document = reader.read("src/books.xml");
        Element rootElement = document.getRootElement();
        //3.通过根元素获取book标签对象
        List<Element> books = rootElement.elements("book");
        //4.遍历，处理每个book标签转换为BOOk类
        for(Element book:books){
//            System.out.println(book.asXML()); //asXML()把标签标签字符串
            String name = book.element("name").getText();
//            System.out.println(name.getText()); //getText()可以获取标签中的文本内容

            String price = book.elementText("price"); //elementText()直接获得标签文本内容
            String author = book.elementText("author"); //elementText()直接获得标签文本内容

            String sn = book.attributeValue("sn");//获取sn属性值
            System.out.println(new Book(sn,name,Double.parseDouble(price),author));

        }
    }
}

book.xml

<?xml version="1.0" encoding="utf-8" ?>

<books>
    <book sn="Book1">
        <name>时间简史</name>
        <author>霍金</author>
        <price>75</price>
    </book>
    <book sn="Book1">
        <name>java</name>
        <author>Huande Liu</author>
        <price>75</price>
    </book>
</books>

Book.java

package com.atguigu.pojo;

import java.math.BigDecimal;

public class Book {
    private String sn;
    private String name;
    private Double price;
    private String author;

    public Book() {
    }

    public Book(String sn, String name, Double price, String author) {
        this.sn = sn;
        this.name = name;
        this.price = price;
        this.author = author;
    }

    @Override
    public String toString() {
        return "Book{" +
                "sn='" + sn + '\'' +
                ", name='" + name + '\'' +
                ", price=" + price +
                ", author='" + author + '\'' +
                '}';
    }
}

Tomcat

tomcat的使用

安装：找到你需要用的 Tomcat 版本对应的 zip 压缩包，解压到需要安装的目录即可。
目录
- bin 专门用来存放 Tomcat 服务器的可执行程序
- conf 专门用来存放 Tocmat 服务器的配置文件
- lib 专门用来存放 Tomcat 服务器的 jar 包
- logs 专门用来存放 Tomcat 服务器运行时输出的日记信息
- temp 专门用来存放 Tomcdat 运行时产生的临时数据
- webapps 专门用来存放部署的 Web 工程。
- work 是 Tomcat 工作时的目录，用来存放 Tomcat 运行时 jsp 翻译为 Servlet 的源码，和 Session 钝化的目录。

启动Tomcat 服务器:找到 Tomcat 目录下的 bin 目录下的 startup.bat 文件，双击，就可以启动 Tomcat 服务器。
另一种启动方式：cd 到Tomcat的bin目录下，敲入命令catalina run
常见的启动失败原因：没有配置好 JAVA_HOME 环境变量（JAVA_HOME 配置的路径只需要配置到 jdk 的安装目录即可。不需要带上 bin 目录）

修改Tomcat的端口号

Mysql 默认的端口号是：3306

Tomcat 默认的端口号是：8080

找到 Tomcat 目录下的 conf 目录，找到 server.xml 配置文件。

找到Connector标签，修改port属性为你需要的端口号即可

如何部署web工程到Tomcat中

第一种部署方法：只需要把 web工程的目录拷贝到Tomcat的 webapps目录下即可。通过http://ip:port/工程名/目录下/文件名进行访问

第二种部署方法： 找到 Tomcat 下的 conf 目录\Catalina\localhost\ 下,创建一个xml的配置文件

，内容为<Context path="/abc" docBase="E:\book" />就表示访问E:\book

当我们在浏览器地址栏中输入访问地址如下： http://ip:port/ ====>>>> 没有工程名的时候，默认访问的是 ROOT 工程。

当我们在浏览器地址栏中输入的访问地址如下： http://ip:port/工程名/ ====>>>> 没有资源名，默认访问 index.html 页面

IDEA 整合Tomcat服务器

把Tomcat服务器整合到IDEA上

操作的菜单如下：File | Settings | Build, Execution, Deployment | Application Servers

创建完web工程之后一般会在web目录下创建lib目录，用于存放jar包

Servlet技术

Servlet 是 JavaEE 规范之一。规范就是接口
Servlet 就 JavaWeb 三大组件之一。三大组件分别是：Servlet 程序、Filter 过滤器、Listener 监听器。
Servlet 是运行在服务器上的一个 java 小程序，它可以接收客户端发送过来的请求，并响应数据给客户端。

手动实现Servlet程序

1、编写一个类去实现 Servlet 接口
2、实现 service 方法，处理请求，并响应数据
3、到 web.xml 中去配置 servlet 程序的访问地址

Servlet 程序的示例代码

public class HelloServlet implements Servlet {
    /*
     * service方法是专门用来处理请求和相应的
     * @param servletRequest
     * @param servletResponse
     * @throws ServletException
     * @throws IOException
     */
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("3 Hello Servlet 被访问了");
    }

}

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.example.demo.HelloServlet</servlet-class>
    </servlet>

    <!-- servlet-mapping 标签给servlet程序配置访问地址   -->
    <servlet-mapping>
        <!--  servlet-name标签的作用是告诉服务器,我当前配置的地址给哪个servlet程序使用      -->
        <servlet-name>HelloServlet</servlet-name>
        <!--  url-pattern标签配置访问地址      -->
        <!-- /表示地址为http://ip:port/工程路径   -->
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
</web-app>

Servlet的生命周期

1、执行 Servlet 构造器方法
2、执行 init 初始化方法
第一、二步，是在第一次访问，的时候创建 Servlet 程序会调用。
3、执行 service 方法
第三步，每次访问都会调用。
4、执行 destroy 销毁方法
第四步，在 web 工程停止的时候调用。

GET 和 POST 请求的分发处理


public class HelloServlet implements Servlet {
    public HelloServlet() {
        System.out.println("1 构造器方法");
    }

    @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        System.out.println("2 初始化方法");
    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    /**
     * service方法是专门用来处理请求和相应的
     * @param servletRequest
     * @param servletResponse
     * @throws ServletException
     * @throws IOException
     */
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("3 Hello Servlet 被访问了");
        //类型转换(因为他有getMethod()方法
        HttpServletRequest httpServletRequest=(HttpServletRequest) servletRequest;
        //获取请求的方式
        String method = httpServletRequest.getMethod();
        if (method.equals("GET")){
            System.out.println("get请求");
        }else {
            System.out.println("post请求");
        }
    }

    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void destroy() {
        System.out.println("4 销毁方法");
    }
}

通过继承 HttpServlet 实现 Servlet 程序

一般在实际项目开发中，都是使用继承 HttpServlet 类的方式去实现 Servlet 程序。

1、编写一个类去继承 HttpServlet 类
2、根据业务需要重写 doGet 或 doPost 方法
3、到 web.xml 中的配置 Servlet 程序的访问地址

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;

@WebServlet(name = "helloServlet", value = "/hello-servlet")
public class HelloServlet extends HttpServlet {
    private String message;


    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html");

        // Hello
        PrintWriter out = response.getWriter();
        out.println("<html><body>");
        out.println("<h1>" + message + "</h1>");
        out.println("</body></html>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("POST请求");
    }
}

ServletConfig 类

ServletConfig 类从类名上来看，就知道是 Servlet 程序的配置信息类。

Servlet 程序和 ServletConfig 对象都是由 Tomcat 负责创建，我们负责使用。

Servlet 程序默认是第一次访问的时候创建，ServletConfig 是每个 Servlet 程序创建时，就创建一个对应的 ServletConfig 对象。

ServletConfig类的三大作用

可以获取 Servlet 程序的别名 servlet-name 的值
获取初始化参数 init-param
获取 ServletContext 对象

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.example.demo.HelloServlet</servlet-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://localhost:3306/test</param-value>
        </init-param>
    </servlet>

    <!-- servlet-mapping 标签给servlet程序配置访问地址   -->
    <servlet-mapping>
        <!--  servlet-name标签的作用是告诉服务器,我当前配置的地址给哪个servlet程序使用      -->
        <servlet-name>HelloServlet</servlet-name>
        <!--  url-pattern标签配置访问地址      -->
        <!-- /表示地址为http://ip:port/工程路径   -->
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
</web-app>

HelloServlet中的代码

@Override
public void init(ServletConfig servletConfig) throws ServletException {
    System.out.println("2 初始化方法");
    System.out.println("HelloServlet程序的别名是"+servletConfig.getServletName());
    System.out.println("初始化参数username的值是"+servletConfig.getInitParameter("username"));
}

ServletContext类

1、ServletContext 是一个接口，它表示 Servlet 上下文对象

2、一个 web 工程，只有一个 ServletContext 对象实例。

3、ServletContext 对象是一个域对象（存取公用的数据）。

4、ServletContext 是在 web 工程部署启动的时候创建。在 web 工程停止的时候销毁。

ServletContext类的四个作用

获取 web.xml 中配置的上下文参数 context-param 它属于整个web
获取当前的工程路径，格式: /工程路径
获取工程部署后在服务器硬盘上的绝对路径
像 Map 一样存取数据（）

package com.example.demo;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "ContextServlet", value = "/ContextServlet")
public class ContextServlet extends HttpServlet {
    @Override
    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-parm参数username的值是:"+username);
        //  2、获取当前的工程路径，格式: /工程路径
        System.out.println("当前工程路径是:"+context.getContextPath());
        //  3、获取工程部署后在服务器硬盘上的绝对路径
        System.out.println("工程部署的路径是"+context.getRealPath("/"));
        //  4、像 Map 一样存取数据
        context.setAttribute("key1","value1");//向web工程中添加key:value值
        System.out.println("获取域数据key1是:"+context.getAttribute("key1"));
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

<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://localhost:3306/test</param-value>
</context-param>

HttpServletRequest类

每次只要有请求进入 Tomcat 服务器，Tomcat 服务器就会把请求过来的 HTTP 协议信息解析好封装到 Request 对象中。然后传递到 service 方法（doGet 和 doPost）中给我们使用。我们可以通过HttpServletRequest 对象，获取到所有请求的信息

方法	作用
getRequestURI()	获取请求的资源路径
getRequestURL()	获取请求的统一资源定位符（绝对路径）
getRemoteHost()	获取客户端的 ip 地址
getHeader()	获取请求头
getParameter()	获取请求的参数
getParameterValues()	获取请求的参数（多个值的时候使用）
getMethod()	获取请求的方式 GET 或 POST
setAttribute(key, value);	设置域数据
getAttribute(key);	获取域数据
getRequestDispatcher()	获取请求转发对象

POST请求会返回乱码，需要设置请求体的字符集为utf-8从而解决post请求乱码问题，request.setCharacterEncoding(“utf-8”)

package com.example.demo;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.Array;
import java.util.Arrays;

@WebServlet(name = "httpServletRequestTest", value = "/httpServletRequestTest")
public class httpServletRequestTest extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("请求资源路径为:"+request.getRequestURI());
        System.out.println("请求的统一资源定位符为:"+request.getRequestURL());
        System.out.println("客户端请求的ip地址为:"+request.getRemoteHost());
        System.out.println("请求头为:"+request.getHeader("User-Agent"));
        System.out.println("请求方式为:"+request.getMethod());

        System.out.println("用户名:"+request.getParameter("name"));
        System.out.println("密码:"+request.getParameter("password"));
        System.out.println("兴趣爱好:"+ Arrays.asList(request.getParameterValues("hobby")));
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//设置请求体的字符集为utf-8从而解决post请求乱码问题
        System.out.println("用户名:"+request.getParameter("name"));
        System.out.println("密码:"+request.getParameter("password"));
        System.out.println("兴趣爱好:"+ Arrays.asList(request.getParameterValues("hobby")));
    }
}

请求转发

请求转发的特点

浏览器地址栏没有变化
他们是一次请求
他们共享Request域中的数据
可以转发到WEB-INF目录下
不可以访问工程以外的资源

Servlet1.java

package com.example.demo;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "Servlet1", value = "/Servlet1")
public class Servlet1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求的参数（办事的材料）查看
        String username = request.getParameter("username");
        System.out.println("在servlet1中查看的参数"+username);

        //给材料改一个章并带到Servlet2中查看
        request.setAttribute("key1","柜台1的章");
        //问路：servlet2怎么走
        /**
         * 请求转发必须以斜杆打头。/表示地址为:http://ip:port/工程名/ ,映射到IDEA代码的web目录
         */
        RequestDispatcher requestDispatcher = request.getRequestDispatcher("/Servlet2");

        //走向servlet2
        requestDispatcher.forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

Servlet2.java

package com.example.demo;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "Servlet2", value = "/Servlet2")
public class Servlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求的参数（办事的材料）查看
        String username = request.getParameter("username");
        System.out.println("在servlet2中查看的参数"+username);

        //查看柜台1是否有盖章
        Object key1 = request.getAttribute("key1");
        System.out.println("柜台1是否有章："+key1);

        //处理自己的业务
        System.out.println("servlet2处理的业务");

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

base标签

可以设置当前页面中所有相对路径工作时，参照哪个路径来进行跳转

web中/斜杠的不同意义

如果被浏览器解析，得到的地址是：http://ip:port/
如果被服务器解析，得到的地址是：http://ip:port/工程路径

HttpServletResponse 类

HttpServletResponse 类和 HttpServletRequest 类一样。每次请求进来，Tomcat 服务器都会创建一个 Response 对象传递给 Servlet 程序去使用。HttpServletRequest 表示请求过来的信息，HttpServletResponse 表示所有响应的信息，我们如果需要设置返回给客户端的信息，都可以通过 HttpServletResponse 对象来进行设置。

两个输出流说明，两个流同时只能使用一个。使用了字节流，就不能再使用字符流，反之亦然，否则就会报错

getOutputStream(); 字节流，常用于下载（传递二进制数据）
getWriter();字符流，常用于回传字符串（常用）

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "respondTest", value = "/respondTest")
public class respondTest extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //如果返回给客户端的数据是中文会出现乱码问题，可以通过以下方法进行设置
        //方法一、
//        response.setCharacterEncoding("utf-8");
//        response.setHeader("Content-Type","text/html；charset=utf-8");
        //方法二、
        // 它会同时设置服务器和客户端都使用 UTF-8 字符集，还设置了响应头，此方法一定要在获取流对象之前调用才有效
         response.setContentType("text/html; charset=UTF-8");

        PrintWriter writer = response.getWriter();
        writer.write("返回给客户端的输出");
    }
}

请求重定向

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "Response1", value = "/response1")
public class Response1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("浏览过此页面Response1");
        //方法一、
        //设置状态码302，表示重定向
//        response.setStatus(302);
        //设置响应头，说明新的地址在哪里
//        response.setHeader("location","http://localhost:8080/demo/response2");
        //方法二、
        response.sendRedirect("http://localhost:8080/demo/response2");
    }
}

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "Response2", value = "/response2")
public class Response2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().write("response2,return");
    }

}

请求重定向的特点

浏览器地址栏会发生变化
两次请求
不共享Request域中的数据
不能访问WEB-INF下的资源
可以访问工程外的资源

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&amp`	`&`
“	引号	`&quot`	`"`
‘	单引号	`'`	`'`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&amp`	`&`
“	引号	`&quot`	`"`
‘	单引号	`'`	`'`

JavaWeb1

HTML

font标签属性

特殊字符

标题

超链接

img 标签

表格标签

iframe

列表

表单

其他标签

CSS技术

CSS和HTML的结合方式

CSS选择器

标签名选择器

id 选择器

类选择器

组合选择器

CSS常用样式

JavaScript 和 html 代码的结合方式

第一种

第二种

变量

函数

关系运算

数组

函数

隐形参数

JS中的自定义对象

事件

onload加载完成事件

onclick事件

onblur失去焦点事件

onchange 内容发生改变事件

onsubmit 表单提交事件

DOM 模型

Document 对象中的方法介绍

正则表达式

DOM查询操作

jQuery核心函数

Dom 对象和 jQuery 对象互转

jQuery选择器

基本选择器

ID选择器：根据 id 查找标签对象

层级选择器

ancestor descendant

parent > child

prev + next

prev ~ siblings

过滤选择器

内容选择器

属性过滤器

表单过滤器

元素的筛选

jQuery 的属性操作

DOM 的增删改

CSS 样式操作

jQuery 事件操作

事件冒泡

动画

图片跟随

XML简介

XML 文本区域

dom4j解析技术

Tomcat

tomcat的使用

如何部署web工程到Tomcat中

IDEA 整合Tomcat服务器

Servlet技术

Servlet的生命周期

GET 和 POST 请求的分发处理

通过继承 HttpServlet 实现 Servlet 程序

ServletConfig 类

ServletContext类

HttpServletRequest类

请求转发

base标签

HttpServletResponse 类

请求重定向

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&amp`	`&`
“	引号	`&quot`	`"`
‘	单引号	`'`	`'`