JavaWeb

<!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.0">
    <title>Document</title>
</head>
<body>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由小到大依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
</body>
</html>

段落标签：是把文字分段，如果没有段落标签，文字不会分段，会只有一段。

<!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.0">
    <title>Document</title>
</head>
<body>
    <p>他一直都在为自己投资教育，先后获得了3个学位，平时还通过各种平台学习课程。他的职业计划是66岁退休，70岁以后还计划以某种身份参与编程或从事咨询的工作。对于45-50岁这个阶段，他认为这依然还是程序员生涯的黄金时期，只要自己能够保持不断学习的状态，那么你就会慢慢好起来！
        对于这些高龄开发者的故事与建议。</p>
         <p>我们可以发现一个共同点，那就是：持续学习，投资自己，拥抱变化！说白了，就是要紧跟技术的发展，保持个人的技术价值！那么，你觉得这些建议是不是现在焦虑的原因呢？你觉得自己的程序员生涯可以做到多少岁呢？留言说说你的观点吧！</p>
</body>
</html>

1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落和段落之间有比较大的空隙。

换行标签，会把文字强制换行<br/> br是break是打断，换行的意思。

1.是单标签

2.跟段落不一样，标签只是简简单单开始一行不会有较大缝隙，和段落不一样。

<!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.0">
    <title>Document</title>
</head>
<body>
    <p>他一直都在为自己投资教育，先后获得了3个学位，平时还通过各种平台学习课程。<br/>他的职业计划是66岁退休，70岁以后还计划以某种身份参与编程或从事咨询的工作。对于45-50岁这个阶段，他认为这依然还是程序员生涯的黄金时期，只要自己能够保持不断学习的状态，那么你就会慢慢好起来！
        对于这些高龄开发者的故事与建议。</p>
         <p>我们可以发现一个共同点，那就是：持续学习，投资自己，拥抱变化！说白了，就是要紧跟技术的发展，保持个人的技术价值！那么，你觉得这些建议是不是现在焦虑的原因呢？你觉得自己的程序员生涯可以做到多少岁呢？留言说说你的观点吧！</p>
</body>
</html>

文本格式化标签：有时需要设置文字为粗体，斜体和下划线效果，这时就需要用到html中文本格式化标签，使文字以特殊的方式显示。

案例之体育新闻

<!DOCTYPE html><!--约束，声明-->
<html lang="zh-CN"><!--表示html开始zh-cn表示中文-->
<head>
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>欧洲杯-沙奇里2球 德甲飞翼3助攻 瑞士3-1小组第3</h1>
    <h4>一</h4>
    <p>北京时间6月21日00:00(阿塞拜疆当地时间20日20:00)，2020欧洲杯A组第3轮一场比赛在巴库奥林匹克球场展开争夺，瑞士3比1力克土耳其，塞费罗维奇进球，沙奇里梅开二度，祖贝尔上演助攻帽子戏法。瑞士获得小组第3，出线待定。</p>
    <h4>二</h4>
    <p>这是两队第16次交手，此前土耳其8胜3平4负，其中正式比赛5胜2平3负。祖贝尔和维德梅尔轮换出场。土耳其轮换3人，德米拉尔、穆尔杜和卡赫维奇出战。</p>
    <p>下半场。祖贝尔长传，恩博洛突入禁区右侧劲射被扑出。土耳其第62分钟扳回一城，恰尔汗奥卢传球，卡赫维奇25码处射入左上角，1-2。第68分钟，祖贝尔左路斜传，沙奇里12码处推射入网，3-1。祖贝尔上演帽子戏法。第77分钟，扎卡禁区弧内任意球直接射门打中右侧立柱</p>
    <p>作者李祖德<br/>2020-01-01</p>
</body>
</html>

JavaScript

JavaScript语言诞生主要是完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码

特点：交互性

安全性（不允许直接访问本地硬盘）

跨平台（只要可以解释js的浏览器都可以运行，和平台无关）

使用的方式

第一种方式：在head或者body标签中，使用script标签来书写JavaScript代码

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/10
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        alert("小心");
    </script>
    //alert 是javascpript语言提供的警告函数
    //它可以接收任意类型的参数，这个参数就是警告的提示信息

</head>
<body>

</body>
</html>

第二种方式：使用script标签引入单独的JavaScript代码

JavaScript变量：

数值类型：number

字符串类型：String

对象类型：object

布尔类型：boolean

函数类型：function

JavaScript里特殊的值：

undefine：所有js变量未赋初始值的时候，默认值是undefine

null：空值

NAN：非数字，非数值比如：6*qqq

关系运算

==：等于

===：全等于除了比较字面值，还会比较两个变量的数据类型

逻辑运算

且运算：&&

或运算：||

取反运算：！

在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量使用。0，null，undefine，""(空串)都认为是false

逻辑运算具有短路效应。

数组

var arr = []

int a = [123]

函数

第一种，可以使用function关键字来定义函数。

使用的格式如下：

function 函数名（形参列表）{

函数体

}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function fun(){
            alert("无参函数被调用");
        }
        function a(a,b){
            alert(有参函数被调用了);
            return a + b;//无需返回值，直接返回
        }
        fun();
    </script>
</head>
<body>

</body>
</html>

第二种

var 函数名 = function（形参列表）{函数体}

JavaScript的隐形传输

js中隐形参数也跟java变长参数一样，操作类似数组，

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/10
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function fun(){
            alert(arguments.length);//2
        }
        fun(1,2);
    </script>
</head>
<body>

</body>
</html>

js中自定义对象

object形式的自定义对象

var 变量名 = new object();//对象实例

变量名.属性名 = 值；

变量名.函数名 = function{}

{}花括号形式自定义对象:

var 变量名 = {

属性名：值

函数名：function（）{}

}

JS中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件

onload：加载完成事件页面加载完成之后，常用于做页面js代码初始化操作

onclick：单击事件常用于按钮的点击响应操作

onblur：失去焦点事件常用于输入框失去焦点后验证其输入内容是否合法。

啥是失去焦点：光标存在的地方。

onchange：内容发生改变事件常用于下拉列表和输入框内容发生改变后操作

onsubmit：表单提交事件常用于表单提交前，验证所有表单项是否合法

事件的注册又分为静态注册和动态注册两种：

什么是事件注册绑定？

其实就是告诉浏览器，当事件响应后要执行那些操作代码，叫做事件注册或者绑定

静态注册：提供html标签的事件属性直接赋值于事件响应后的代码，这种方式叫做静态注册

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/10
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">

    </script>
</head>
<body onload="alert('静态事件onload事件，是浏览器解析完页面之后就会自动触发的事件')">

</body>
</html>

改进

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function fun(){
            alert('静态事件onload事件，是浏览器解析完页面之后就会自动触发的事件');
        }

    </script>
</head>
<body onload="fun()">

</body>
</html>

动态注册：是指先通过js代码得到dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋于事件后响应的代码，叫做动态注册。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function functionc(){
            alert("静态注册onclink");
        }
        window.onload = function (){
            //1.获取标签对象
            //2.通过标签对象.事件名 = function(){}
            
            var b = document.getElementById("1");
            b.onclick = function (){//检测到button标签有单击事件，则响应。
                alert("动态注册onclink");
            }
        }

    </script>
</head>
<body>
<button id="1">按钮1</button>
<button onclick="functionc()">按钮2</button>

</body>
</html>

失去焦点事件

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/10
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function fun1(){
            console.log("静态失去焦点");
        }
        window.onload = function (){
            var b = document.getElementById("password");
            b.onblur = function (){
                console.log("动态失去焦点");
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" onblur="fun1()"><br>
密码：<input type="text" id="password">

</body>
</html>

内容发生改变事件

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/10
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function onchangefun(){
            alert("女神已经改变了");

        }
        window.onload = function (){
            var elementById = document.getElementById("1");
            elementById.onchange = function (){
                alert("女神已经改变了");
            }
        }
    </script>
</head>
<body>
请选择你心中的女神：
<select onchange="onchangefun()">
    <option>女神</option>
    <option>芳芳</option>
    <option>佳佳</option>
    <option>娘娘</option>
</select>
<select id="1">
    <option>女神</option>
    <option>芳芳</option>
    <option>佳佳</option>
    <option>娘娘</option>
</select>

</body>
</html>

表单提交事件

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/10
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
    //静态注册表单提交事物
    function funs(){
        //要验证所有表单项是否合法，如果有一个不合法就不提交表单
        alert("静态注册表单提交事件");
        return false;
    }
    </script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return funs()">
    <input type="submit" value="静态注册">
</form>
</body>
</html>

DOM 模型

其实就是把文档中标签，文本，属性转换成为对象来管理。把标签转换成对象来管理

document.getElementById(elementId)

通过标签的id属性查找标签dom对象

document.getElementByName(elementName)

通过标签的name属性查找标签dom对象

document.getElementByTagName(tagname)

通过标签名查找标签dom对象，tagname是标签名

document.createElement(tagName)

通过给定标签名，创建一个标签对象，tagName是要创建的标签名

innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

Jquery

Jquery是JavaScript的js类库

<!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>
	<!--导入Jquery类库-->
	<!--jquery必须导入Jquery类库，$是一个函数-->
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		/*window.onload = function (){
			var dobj = document.getElementById("btnId");
			dobj.click = function (){
				alert("js原生的单击事件");
			}
		}*/
		$(function (){/*表示页面加载完成，相当于window.onload = function (){}*/
			var $obj = $("#btnId");/*表示按照id查询标签对象*/
			$obj.click(function (){//绑定单击事件
				alert("jquery的单击事件");
			})
		})
	</script>
</head>
<body>

	<button id="btnId">SayHello</button>

</body>
</html>

核心函数

$是jquery的核心函数，能完成jquery的很多功能，$()就是调用$这个函数。

1.当传入参数为函数时候，表示页面加载完成之后；

$(function (){/*表示页面加载完成，相当于window.onload = function (){}*/

2.传入参数为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>
	<!--导入Jquery类库-->
	<!--jquery必须导入Jquery类库，$是一个函数-->
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		/*window.onload = function (){
			var dobj = document.getElementById("btnId");
			dobj.click = function (){
				alert("js原生的单击事件");
			}
		}*/
		$(function (){/*表示页面加载完成，相当于window.onload = function (){}*/
			var $obj = $("#btnId");/*表示按照id查询标签对象*/
			$obj.click(function (){//绑定单击事件
				alert("jquery的单击事件");
			})
			$("<div>" +
					"<span>div-span1</span>" +
					"<span>div-span2</span>" +
					"</div>").appendTo("body");
		})
	</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

3.传入参数是选择器字符串

$("#id属性值")；id选择器，根据id查询标签对象

$("标签名")；标签名选择器，根据指定标签名查询标签对象

$(".class属性值") 根据属性值选择标签对象

4.查询dom对象时候，会把dom对象转换成jQuery对象

jQuery对象：

通过jQuery提供的API创建的对象是Jquery对象

通过jQuery包装的dom对象，也是jQuery对象

var dobj = document.getElementById("btnId");
$(doobj);

通过jQueryAPI查询到的对象，是jQuery对象

jQuery对象Alert出来的效果是：【object object】

jQuery对象的本质是什么？

jquery对象是dom对象的数组+一系列方法。

$(function(){
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";
		var arr = [12,"abc","true"];
		var $btns = $("button");
		for (var i = 0; i < $btns.length; i++){
			alert($btns[i]);
		}

	});

jquery对象和dom对象使用区别

jquery对象不能使用dom对象的属性和方法

dom对象不能使用jquery对象的属性和方法

dom对象和jquery对象互转

dom对象转为jquery对象

1.先有Dom对象

2.$(dom对象)就可以转换为jquery对象

jquery对象转换为dom对象

1.先有jquery对象

2.jquery对象下标取出相应的dom对象

	$(function(){
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";
		/*var arr = [12,"abc","true"];
		var $btns = $("button");
		for (var i = 0; i < $btns.length; i++){
			alert($btns[i]);
		}*/
		//dom对象转为jquery对象
		alert($(document.getElementById("testDiv")));
		//jquery对象转为dom对象
		alert($(document.getElementById("testDiv"))[0]);
		

	});

基本选择器

#id 选择器：根据id查询标签对象

.class 选择器：根据class查找标签对象

element 选择器根据标签名查找标签对象

* 选择器：表示任意的，所有的元素

selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
				$(function () {
					//1.选择 id 为 one 的元素 "background-color","#bbffaa"
					$("#btn1").click(function () {
						// css() 方法 可以设置和获取样式
						$("#one").css("background-color","#bbffaa");
					});


					//2.选择 class 为 mini 的所有元素
					$("#btn2").click(function () {
						$(".mini").css("background-color","#bbffaa");
					});

					//3.选择 元素名是 div 的所有元素
					$("#btn3").click(function () {
						$("div").css("background-color","#bbffaa");
					});

					//4.选择所有的元素
					$("#btn4").click(function () {
						$("*").css("background-color","#bbffaa");
					});

					//5.选择所有的 span 元素和id为two的元素
					$("#btn5").click(function () {
						$("span,#two").css("background-color","#bbffaa");
					});

				});
		</script>
	</head>

层级选择器

<!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(){
				//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>

过滤选择器

基本过滤选择器

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

内容过滤选择器

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

属性过滤选择器

	*/
	$(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>

表单过滤器

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

元素筛选

				//(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属性一样

<!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 () {
            // alert( $("input[name!='newsletter']").length );
            // alert( $("div").has("span").length );
            // $("div:first").nextUntil("span").addClass("after");
            //alert($("div").add("span").length)
            alert($("div").html());
            $("div").html("<h1>我是div中的标题1</h1>")
        });
    </script>
</head>
<body>
<div>我是div标签 <span>我是div标签中的span标签</span></div>
</body>
</html>

text（）它可以设置和获取起始标签和结束标签中的文本。跟dom属性innerText属性一样

<!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 () {
            alert($("div").text());
            $("div").text("<h1>我是div中的标题1</h1>")
        });
    </script>
</head>
<body>
<div>我是div标签 <span>我是div标签中的span标签</span></div>
</body>
</html>

val（）它可以设置和获取表单项的value属性值。跟dom对象value属性一样

<!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 () {
            $("button").click(function (){
                /*alert($("#username").val());*/
                $("#username").val("超级程序员")
            })
        });
    </script>
</head>
<body>
<div>我是div标签 <span>我是div标签中的span标签</span></div>
<input type="text" name="username" id="username">
<button>操作输入框</button>
</body>
</html>

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"]);//写入表单项选中的value属性值
            $(":checked").val(["checkbox1","checkbox2"]);
            $("#multip").val(["mul1"]);
            $("#single").val(["sin2"]);*/
            $(":radio,:checked").val(["radio1","checkbox1"]);
        });
    </script>
</head>
<body>
单选：
<input name="radio" type="radio" value="radio1">radio1
<input name="radio" type="radio" value="radio2">radio2
<br>
多选：
<input name="checkbox" type="checkbox" value="checkbox1">checkbox1
<input name="checkbox" type="checkbox" value="checkbox2">checkbox2
<input name="checkbox" type="checkbox" value="checkbox3">checkbox3
</body>
<br>
下拉多选：
<select id="multip" 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>
</html>

当传入一个参数时候表示获取该参数的属性值，当传入两个参数时候一个表示那个参数，一个表示设置该参数值

attr() 可以设置或者获取属性值不推荐操作checked，readonly，selected，disabled等等

prop() 可以设置和获取属性值只推荐操作checked，readonly，selected，disabled等等

因为当用attr方法操作checked，readonly，selected，disabled时候如果没有定义这些属性时候会出现undefine用户不太容易明白，但是prop是false更加容易懂

dom对象的增删改

内部插入：

appendTo() a.appendto(b) 把a插入到b子元素末尾，成为最后一个子元素

prependTo() a.prependTo(b) 把a插到b所有子元素前面，成为第一个子元素

外部插入：

insertAfter() a.insertAfter(b) 得到ba

insertBefore() a.insertBefore(b) 得到ab

替换：

replaceWith() a.replaceWith(b) 用b替换掉a

replaceAll() a.replaceAll(b) 用a替换所有b

删除：

remove（） a.remove () 删除a标签

empty（） a.empty() 清空标签中内容

css样式操作

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加样式

offset() 获取和设置元素的坐标

jquery动画

基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见就隐藏，不可见就显示

以上动画方法都可以添加参数。

1.第一个参数是动画执行的时长，以毫秒为单位

2.第二个参数是动画的回调函数（动画完成之后自动调用）

	$("#btn1").click(function(){
				$("#div1").show(1000,function (){
					alert("s")
				});
			});

淡入淡出动画

fadeIn() 淡入（慢慢可见）

fadeOut() 淡出（慢慢消失）

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值

fadeToggle() 淡入淡出切换

jquery事件操作

先执行jquery页面加载完成之后，再执行原生页面加载完成之后。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	/*$(document).ready(function (){

	})*/
	$(function (){
		alert("jquery加载");
	})
	window.onload = function (){
		alert("原生jquery");
	}

</script>
</head>
<body>

jQuery页面加载完成之后是等到浏览器内核解析完页面标签创建好dom对象之后就会马上执行。

js原生页面加载完成之后是等到浏览器内核解析完页面标签创建好dom对象之后，还要等标签显示时需要的内容加载完成。

jquery和原生js的执行次数

jquery只执行一次

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function (){
		alert("jquery加载1");
	})
	$(function (){
		alert("jquery加载2");
	})
	$(function (){
		alert("jquery加载3");
	})
	window.onload = function (){
		alert("原生jquery1");
	}
	window.onload = function (){
		alert("原生jquery2");
	}
	window.onload = function (){
		alert("原生jquery3");
	}

</script>
</head>
<body>

jQuery 中其他事件处理方法

click() 单击事件

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

bind() 给元素一次性绑定一个或者多个事件

$(function (){
					$(".head").bind("click mouseover mouseout",function (){
						console.log("这是bind绑定的click事件");
					})
				})

one() 跟bind一样可以绑定多个单击事件，但是单击事件各自只响应一次。

$(function (){
					$(".head").one("click mouseover mouseout",function (){
						console.log("这是bind绑定的click事件");
					})
				})

unbind() 解除绑定事件

$(function (){
					$(".head").unbind("click");
				})

live() 也是用来绑定当前事件的

/*$("h5").click(function (){
					alert("s");
				})*/
				$("h5").live("click",function (){
					alert("live")
				})
				$("<h5 class=\"head\">什么是jQuery?</h5>").appendTo("#panel");
			});

事件冒泡

当父子元素同时监听同一个事件的时候，当子元素被触发的时候，同一个事件也被传递到了父元素的事件里面去。

如何阻止事件冒泡呢

		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#content").click(function (){
					alert("div");
				})
				$("span").click(function (){
					alert("span");
					return false;
				})
			})
		</script>
	</head>
	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>
		
		<div id="msg"></div>	
		
		<br><br>
		<a href="http://www.hao123.com">WWW.HAO123.COM</a>	
	</body>
</html>

JavaScript事件对象

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

我们重点关心的是这个JavaScript的事件对象，以及使用

如何

xml语法

<?xml version="1.0" encoding="UTF-8" ?>
<!--<?xml  version="1.0" encoding="UTF-8" ?>
以上内容就是xml文件的声明
version="1.0"  表示xml的版本
encoding=“utf-8” encoding表示xml文件的编码-->
<books>books表示多个图书信息
    <book sn="12345567878">book表示一个图书信息，sn属性表示图书序列号
        <name>时间简史</name>name标签表示书名
        <author>霍金</author>outer表示作者
        <price>75</price>price表示图书价格
    </book>
</books>

文本区域（CDATA区）

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

语法格式：<![CDATA[<<<<<<<<<<<<<]]>

        <a><![CDATA[<<<<<<<<<<<<<<]]]></a>

XML解析技术介绍

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

DOM4J类库的使用，是第三方技术，就需要这个jar包

import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.junit.jupiter.api.Test;

import java.util.List;

public class DOM4jTest {
    @Test
    public void test() throws DocumentException {
        /*首先创建一个SaxReader输入流，去读取xml配置文件，生成document对象*/
        SAXReader saxReader = new SAXReader();
        Document document = saxReader.read("books.xml");
        System.out.println(document);
        Element rootElement = document.getRootElement();
        List<Element> books = rootElement.elements("book");
        for (Element book:books){
            Element nameElement = book.element("name");
            String nametext = nameElement.getText();
            System.out.println(nametext);
        }
    }
}

JSON

1.什么是JSON？

JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。数据交换指的是客户端和服务器之间业务数据的传递

2.JSON的定义？

		<script type="text/javascript">
			// json的定义
			var jsonoobj = {
				"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":6611,
					"key6_2_2":"key6_2_2"
				}]
			}
			// json的访问
			// json对象转字符串
			// json字符串转json对象
		</script>

1.3.JSON的访问

JSON本身是一个对象

JSON中的key我们可以理解为对象中的一个数组，就像访问对象中的属性一样访问就行。

<!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">
			// json的定义
			var jsonoobj = {
				"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":6611,
					"key6_2_2":"key6_2_2"
				}]
			}
			alert(typeof (jsonoobj));//json就是一个对象
			
			// json的访问
			alert(jsonoobj.key1);//12
			alert(jsonoobj.key4);
			for (var i = 0; i < jsonoobj.key4.length; i++){
				alert(jsonoobj.key4[i]);
			}
			alert(jsonoobj.key5);//object*/
			alert(jsonoobj.key6);
			alert(jsonoobj.key6.length);
			// json对象转字符串
			// json字符串转json对象
		</script>
	</head>
	<body>
		
	</body>
</html>

json的两个常用方法

json的存在两种形式。

一种是对象的形式，我们叫他json对象。

一种是字符串的形式存在，我们叫它json字符串。

JSON.Stringify() 把json对象转换成json字符串

JSON.parse()把json字符串转换成json对象

<!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">
			// json的定义
			var jsonoobj = {
				"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":6611,
					"key6_2_2":"key6_2_2"
				}]
			}
	
			alert(jsonoobj);
			var jsonstring = JSON.stringify(jsonoobj);
			alert(jsonstring);
			var o = JSON.parse(jsonstring);
			alert(o);
		</script>
	</head>
	<body>
		
	</body>
</html>

JSON在java中的使用

首先要导入json的jar包，gson.jar。

javabean与JSON互转

public class Jsontest {
    //javabean与json的互转
    @Test
    public void test(){
        Person person = new Person(1,"李祖德");
       //创建gson对象
        Gson gson = new Gson();
        //gson的tojson方法把javabean对象转成json
        String pesonjsonstring = gson.toJson(person);
        System.out.println(pesonjsonstring);//{"id":1,"name":"李祖德"}

        //gson的fromJson方法把字符串转换成javabean对象
        Person person1 = gson.fromJson(pesonjsonstring, Person.class);
        System.out.println(person1);

    }
}

LIST和JSON互转

    @Test
    public void test1(){
        List<Person> personList = new ArrayList<>();
        personList.add(new Person(1,"李祖德"));
        personList.add(new Person(2,"组的"));
        //把list转换成JSON字符串
        Gson gson = new Gson();
        String personstring = gson.toJson(personList);
        System.out.println(personstring);
        List<Person> k = gson.fromJson(personstring,personList.getClass());
        System.out.println(k);
        System.out.println(k.get(0));

    }
}

map 和json的互转

    @Test
    public void test2(){
        Map<Integer,Person> personMap = new HashMap<>();
        personMap.put(1,new Person(1,"sss"));
        Gson gson = new Gson();
        String mapstring = gson.toJson(personMap);
       Map<Integer,Person> s =  gson.fromJson(mapstring,new PersonMapType().getType());
        System.out.println(s.get(1));
    }

servlet

放在了SpringMvc中.

AJAX请求

AJAX是一种浏览器通过异步发起请求，局部更新页面技术。

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_Web_exploded/ajaxServlet?action=javaScriptAjax",true);
// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlhttprequest.onreadystatechange = function (){
					//当readState改变时候，就会触发onreadystatechange事件。
					/*readState：
					0：请求未初始化
					1：服务器连接已建立
					2：请求已接收
					3：请求处理中
					4：请求已完成，且响应已就绪*/
					if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
						var o = JSON.parse(xmlhttprequest.responseText);

						document.getElementById("div01").innerHTML = o.id + o.name;

					}
				}

// 				3、调用send方法发送请求
				xmlhttprequest.send();

			}
		</script>
	</head>
	<body>
<!--		<a href="http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax">非Ajax</a>-->
		<button onclick="ajaxRequest()">ajax request</button>
		<button onclick="ajaxRequest()">ajax request</button>
		<button onclick="ajaxRequest()">ajax request</button>
		<button onclick="ajaxRequest()">ajax request</button>
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
		<table border="1">
			<tr>
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr>
				<td>2.1</td>
				<td>2.2</td>
			</tr>
		</table>
	</body>
</html>

package com.atguigu.servlet;

import com.atguigu.pojo.Person;
import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求过来了");
        Person person = new Person(1, "国哥");
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryAjax == 方法调用了");
        Person person = new Person(1, "国哥");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryGet  == 方法调用了");
        Person person = new Person(1, "国哥");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryPost   == 方法调用了");
        Person person = new Person(1, "国哥");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }


    protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryGetJSON   == 方法调用了");
        Person person = new Person(1, "国哥");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQuerySerialize   == 方法调用了");

        System.out.println("用户名：" + req.getParameter("username"));
        System.out.println("密码：" + req.getParameter("password"));

        Person person = new Person(1, "国哥");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }
}

package com.atguigu.servlet;

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.lang.reflect.Method;

public abstract class BaseServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 解决post请求中文乱码问题
        // 一定要在获取请求参数之前调用才有效
        req.setCharacterEncoding("UTF-8");
        // 解决响应中文乱码
        resp.setContentType("text/html; charset=UTF-8");
        String action = req.getParameter("action");
        try {
            // 获取action业务鉴别字符串，获取相应的业务 方法反射对象
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
//            System.out.println(method);
            // 调用目标业务 方法
            method.invoke(this, req, resp);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);// 把异常抛给Filter过滤器
        }
    }

}