文章目录
四、jQuery
001-关于jQuery对象属性的相关方法
html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 的属性 innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签之间的文本。 跟 dom 的属性 innerText 一样。
val() 它可以设置和获取 表单项 的 value 属性值。 跟 dom 的属性 value 一样
val() 还可以设置单选框、复选框、下拉框的选中状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html()-text()-val()</title>
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
//不传参数是获取，传参数是设置
//alert($("div").html());//我是div标签 <span>我是div中的span标签
//$("div").html("<h1>我是div中的标题1</h1>");//我是div中的标题1
//不传参数是获取，传参数是设置
//alert($("div").text());//我是div标签 我是div中的span标签
//$("div").text("<h1>我是div中的标题1</h1>");//<h1>我是div中的标题1</h1>
//不传参数是获取，传参数是设置
$("button").click(function (){
alert($("#username").val());
$("#username").val("超级程序员");
});
//val()还可以设置单选框、复选框、下拉框的选中状态
//设置单选框的radio1选中
$(":radio").val(["radio1"]);
//设置复选框全选
$(":checkbox").val(["checkbox1","checkbox2","checkbox3"]);
//设置下拉多选框 选中mul2和mul4
$("#multiple").val(["mul2","mul4"]);
//设置下拉单选框 选中sin1
$("#single").val(["sin1"]);
//也可以一次性设置完
//$(":radio,:checkbox,#multiple,#single").val(["radio1","checkbox1","checkbox2","checkbox3","mul2","mul4","sin1"]);
});
</script>
</head>
<body>
<div>我是div标签 <span>我是div中的span标签</span></div>
<input type="text" name="username" id="username">
<button>操作输入框</button>
<br>
<br>
单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br>
下拉多选：
<!--设置multiple属性就可以多选，按ctrl键即可-->
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br>
下拉单选：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>
attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等
attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()-prop()</title>
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
//attr(属性，属性值)方法
alert($(":checkbox:first").attr("name"));//获得属性值：获得checkbox1的name属性的值checkbox
$(":checkbox:first").attr("name","abc")//设置属性值：checkbox1的name属性值变成了abc
//attr()方法不适用checked、readOnly、selected、disabled等属性操作
alert($(":checkbox:first").attr("checked"));//返回undefined
//prop()方法仅适用checked、readOnly、selected、disabled等属性操作
alert($(":checkbox:first").prop("checked"));//返回false未选中
$(":checkbox:first").prop("checked",true);//设置checkbox1默认选中
//attr()方法还可以操作非标准的属性。比如自定义属性：abc,bbj等
//给checkbox1设置一个属性xxx,属性值为yyy
$(":checkbox:first").attr("xxx","yyy");
//设置之后也能获取出来
alert($(":checkbox:first").attr("xxx"));
});
</script>
</head>
<body>
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
</body>
</html>
002-全选、全不选、反选练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//全选按钮
$("#checkedAllBtn").click(function (){
$(":checkbox").prop("checked",true);
});
//全不选按钮
$("#checkedNoBtn").click(function (){
$(":checkbox").prop("checked",false);
});
//反选按钮
$("#checkedRevBtn").click(function (){
//获取所有球类复选框(不包括你爱好的运动是？那个复选框)
$(":checkbox[name='items']").each(function (){
//遍历判断
//each遍历的function函数中，有一个this对象，这个this对象就是当前正在遍历的dom对象
this.checked = !this.checked;
});
//要检查，是否满选
//如果全部选中，你爱好的运动是？那个复选框也要选中，否则不选中
//获取全部的球类个数
var allCount = $(":checkbox[name='items']").length;
//获取选中的球类个数
var checkedCount = $(":checkbox[name='items']:checked").length;
if (allCount == checkedCount){
$("#checkedAllBox").prop("checked",true);
}else {
$("#checkedAllBox").prop("checked",false);
}
//一行代码写完
//$("#checkedAllBox").prop("checked",allCount == checkedCount);
});
//提交按钮
$("#sendBtn").click(function (){
$(":checkbox[name='items']").each(function (){
alert(this.value);
});
});
//给你爱好的运动是？那个复选框绑定单击事件
$("#checkedAllBox").click(function (){
//在事件的function函数中，有一个this对象，该this对象就是当前正在响应事件的dom对象
//在这里就是给你爱好的运动是？那个复选框对象
//这个复选框一点击，下面的复选框应该都选上
//这个复选框一选中，它的checked属性就变为true，即this.checked=true
//这个复选框一不选中，它的checked属性就变为false，即this.checked=false
$(":checkbox[name='items']").prop("checked",this.checked);
});
//给全部球类绑定单击事件
//如果全部选中，你爱好的运动是？那个复选框也要选中，否则不选中
//同上面的反选中的检查
$(":checkbox[name='items']").click(function (){
var allCount = $(":checkbox[name='items']").length;
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCount == checkedCount);
});
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br>
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
003-DOM对象(标签)的增删改操作
内部插入：
appendTo() a.appendTo(b) 把 a 插入到 b的 子元素末尾，成为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(); 清空 a 标签里的内容(清空标签里的子节点包括文本)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
//创建一个标签对象h1-->$("<h1>标题</h1>")
//内部插入
//a.appendTo(b) 把 a 插入到 b的 子元素末尾，成为b的最后一个子元素
$("<h1>标题1</h1>").appendTo("div");//也可以.appendTo($("div")) 参数可以是一个选择器
//a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素
$("<h2>标题2</h2>").prependTo("div");
//外部插入
//a.insertAfter(b) 得到 ba
$("<h3>标题3</h3>").insertAfter("div");
//a.insertBefore(b) 得到 ab
$("<h4>标题4</h4>").insertBefore("div");
//替换
//a.replaceWith(b) 用 b 替换掉 a
//$("div").replaceWith("<h5>标题5</h5>");
//a.replaceAll(b) 用 a 替换掉 b
//$("<h6>标题6</h6>").replaceAll("div");
//删除
//a.remove() 删除 a 标签
//$("div").remove();
//a.empty() 清空 a 标签里的内容(清空标签里的子节点包括文本)
//$("div").empty();
});
</script>
</head>
<body>
<div>1234</div>
<div>5678</div>
</body>
</html>
004-从左到右，从右到左练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
//第一个按钮(把选中的添加到右边)
$("button:eq(0)").click(function (){
//左边选中的option.appendTo(右边的select里面)
//select:eq(0) (第一个下拉列表(即左边的下拉列表))
//option:selected (option中被选中的option)
//select:eq(0) option:selected (第一个下拉列表中被选中的option)
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
});
//第二个按钮(把左边的全部添加到右边)
$("button:eq(1)").click(function (){
$("select:eq(0) option").appendTo($("select:eq(1)"));
});
//第三个按钮(把右边选中的添加到左边)
$("button:eq(2)").click(function (){
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
//第四个按钮(把右边的全部添加到左边)
$("button:eq(3)").click(function (){
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
005-动态添加、删除表格的一行记录练习
<!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></title>
<link rel="stylesheet" type="text/css" href="04.css" />
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
//添加新员工：填写完数据之后，点击submit，会添加一条新员工信息到上面表格中
//类似于把以下代码写在<table></table>中：
/* <table>
<tr>
...
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
*/
//给button按钮绑定单击事件
$("#addEmpButton").click(function (){
//创建一个行标签对象tr，添加到表格中
//获得用户输入的内容
//姓名
var name = $("#empName").val();
//邮箱
var email = $("#email").val();
//工资
var salary = $("#salary").val();
//创建一个行标签对象，先复制粘贴即可
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
"</tr>");
//添加到表格中
$trObj.appendTo($("#employeeTable"));
//给新添加的那条数据的a标签绑定单击事件
$trObj.find("a").click(function (){
var name = $trObj.find("td:first").text();
if(confirm("你确定要删除"+ name +"吗？") == true){
$trObj.remove();
};
return false;
});
});
//点击Delete 删除表格中的一条数据
//给a标签绑定单击事件
$("a").click(function (){
//点击Delete之后，弹出窗口询问是否确认删除
//在事件响应的function函数中，有一个this对象，这个this对象就是当前正在响应事件的dom对象(即a标签对象)
//而行标签对象是a标签对象的父元素的父元素
var $trObj = $(this).parent().parent();
//更详细一点：你确定删除xxxx吗？
//xxxx怎么得到？
var name = $trObj.find("td:first").text();
//confirm()是JavaScript提供的一个确认提示框函数，你给它传什么，它就提示什么
//当用户点击了确定，返回true; 点击取消，返回false
//alert是警示框，没有确定取消按钮
//更详细一点：你确定删除xxxx吗？
if(confirm("你确定要删除"+ name +"吗？") == true){
//确定删除
//行对象.remove()
//行对象就是tr对象，删除这一行就是把tr标签删除掉
//如何得到这个行对象？看上面
$trObj.remove();
};
//不想让a标签跳转
//return false; 可以阻止元素的默认行为
return false;
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002" >Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
代码优化：把相同的代码写在函数中
注意：这里的函数调用时不加()
deleteFun() -->错误
deleteFun --->正确函数调用
<!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></title>
<link rel="stylesheet" type="text/css" href="04.css" />
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
var deleteFun = function(){
//点击Delete之后，弹出窗口询问是否确认删除
//在事件响应的function函数中，有一个this对象，这个this对象就是当前正在响应事件的dom对象(即a标签对象)
//而行标签对象是a标签对象的父元素的父元素
var $trObj = $(this).parent().parent();
//更详细一点：你确定删除xxxx吗？
//xxxx怎么得到？
var name = $trObj.find("td:first").text();
//confirm()是JavaScript提供的一个确认提示框函数，你给它传什么，它就提示什么
//当用户点击了确定，返回true; 点击取消，返回false
//alert是警示框，没有确定取消按钮
//更详细一点：你确定删除xxxx吗？
if(confirm("你确定要删除"+ name +"吗？") == true){
//确定删除
//行对象.remove()
//行对象就是tr对象，删除这一行就是把tr标签删除掉
//如何得到这个行对象？看上面
$trObj.remove();
};
//不想让a标签跳转
//return false; 可以阻止元素的默认行为
return false;
};
//给button按钮绑定单击事件
$("#addEmpButton").click(function (){
//创建一个行标签对象tr，添加到表格中
//获得用户输入的内容
//姓名
var name = $("#empName").val();
//邮箱
var email = $("#email").val();
//工资
var salary = $("#salary").val();
//创建一个行标签对象，先复制粘贴即可
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
"</tr>");
//添加到表格中
$trObj.appendTo($("#employeeTable"));
//给新添加的那条数据的a标签绑定单击事件
$trObj.find("a").click( deleteFun );
});
//点击Delete 删除表格中的一条数据
//给a标签绑定单击事件
$("a").click( deleteFun );
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002" >Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
006-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></title>
<style type="text/css">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
/*
div.blueBorder这个样式写法说明：
.blueBorder是类型选择器
前面加上div，表示这个样式只能给div标签使用，别的标签无法使用
*/
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个样式(的类选择器)
$divEle.addClass("redDiv blueBorder");
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
//$divEle.removeClass();删除全部样式
$divEle.removeClass("redDiv");
});
$('#btn03').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass("redDiv");
});
$('#btn04').click(function(){
//offset() - 返回匹配元素样式在当前页面的位置。
var position = $divEle.offset();
//输出到控制台
console.log(position);
//也可以设置位置
$divEle.offset({
left:100,
right:100
});
});
})
</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>
</body>
</html>
007-jQuery动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出 切换
以上动画方法都可以添加参数。
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></title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
/*
基本
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([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();
//$("#div1").show(1000);
$("#div1").show(1000,function (){
alert("show()动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function(){
$("#div1").hide();
});
//切换 toggle()
$("#btn3").click(function(){
$("#div1").toggle();
});
//动画一直动的效果
/* var abc = function (){
$("#div1").toggle(1000,abc);
}
abc();
*/
//淡入 fadeIn()
$("#btn4").click(function(){
//$("#div1").fadeIn();
$("#div1").fadeIn(2000,function (){
alert("fadeIn完成");
});
});
//淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut();
//$("#div1").fadeOut(2000);
});
//淡化切换 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle();
});
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo(2000,0.5,function (){
alert("半透明完成");
});
});
})
</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>
table,td {
border: 1px solid;
border-collapse: collapse;
}
span {
background-color: #fb6;
text-align: center;
width: 100px;
height: 50px;
display: block;
}
008-品牌展示练习
需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌”
然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”
然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
/*
后代选择器
使用该后代选择器的标签有属性class=showmore
并且该标签有一个后代a标签，a标签有一个后代span标签
符合这两个条件的标签才能使用这个样式
如果想要对某个标签添加这个样式：标签对象.addClass("showmore")
*/
.showmore a span {
padding-left: 15px;
background: url(down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
//基本初始状态(只显示卡西欧之前的品牌和其他品牌相机)
$("li:gt(5):not(:last)").hide();
//给 a标签 绑定单击事件
//div下的div下的a标签
$("div div a").click(function (){
//让某些品牌显示，某些品牌隐藏
$("li:gt(5):not(:last)").toggle();
//点击时：修改按钮上的文字和图标
//显示全部品牌 角标向下
//显示精简品牌 角标向上
//修改文字：text()
//修改图标：改变样式addClass() 角标向下样式showmore 角标向上样式showless
//图标的样式是 div下的div的样式
//判断品牌 是否 隐藏 来修改内容
if($("li:gt(5):not(:last)").is(":hidden")){
//有些品牌被隐藏时
//修改文字
//修改div下的div下的a标签下的span标签的内容
$("div div a span").text("显示全部品牌");
//修改图标
//首先把div下的div的样式删除
$("div div").removeClass();
//然后添加新的样式
$("div div").addClass("showless");
//去除高亮
$("li:contains('佳能')").removeClass("promoted");
$("li:contains('尼康')").removeClass("promoted");
}else {
//没有品牌被隐藏
$("div div a span").text("显示精简品牌");
$("div div").removeClass();
$("div div").addClass("showmore");
//品牌全部显示时，对佳能、尼康品牌加高亮
/*
上面css代码中已经告诉你怎么显示高亮
.promoted a {
color: #F50;
}
高亮颜色为#F50
对属性class=promoted并且有后代标签a标签的标签进行高亮
*/
$("li:contains('佳能')").addClass("promoted");
$("li:contains('尼康')").addClass("promoted");
}
//不让a标签跳转
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>
009-jQuery事件操作
页面加载完成之后写法：
jQuery：$( function(){} );
javaScript：window.onload = function(){}
二者有什么区别？
（1）执行顺序不同
jQuery的先执行
原生的js的后执行
（2）为什么会是这个顺序？
jQuery的是 浏览器的内核解析完页面的标签，创建好 DOM 对象之后就会马上执行。
而原生的 js是，除了要等浏览器内核解析完标签，创建好 DOM 对象，还要等标签显示时需要的内容加载完成。
（3）他们执行的次数？
$( function(){alert("1");} );
$( function(){alert("2");} );
$( function(){alert("3");} );
window.onload = function(){alert("1");}
window.onload = function(){alert("2");}
window.onload = function(){alert("3");}
原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。//3
jQuery 的页面加载完成之后是把注册的 function 函数，全部依次执行。//1 2 3
010-jQuery中的事件相关方法
click() 它可以绑定单击事件，以及触发单击事件
绑定事件：对象.click(function(){});
触发事件：对象.click(); 在别的事件里去触发另一个事件
事件方法都可以绑定和触发
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。
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></title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("h5").click(function (){
alert("click绑定事件");//传function是绑定事件
});
$("button").click(function (){
$("h5").click();//不传function是触发事件
});
//鼠标移入事件
$("h5").mouseover(function (){
//输出到控制台
console.log("鼠标移入了");
});
//鼠标移出事件
$("h5").mouseout(function (){
console.log("鼠标移出了");
});
//bind事件
$("h5").bind("click",function (){
alert("这是bind绑定的click事件");
});
//bind可以一次绑定多个事件
$("h5").bind("click mouseover mouseout",function (){
alert("这是bind绑定的click事件");
});
//one事件跟bind事件用法一样，但是one事件只会响应一次
$("h5").one("click mouseover mouseout",function (){
alert("这是bind绑定的click事件");
});
//unbind事件 解除事件的绑定
//可以解除一个事件，也可以解除多个事件，
//对象.unbind()什么都不传，会解除所有事件
$("h5").unbind("click mouseover",function (){
alert("这是bind绑定的click事件");
});
//live事件看图 看文档
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
<button>按钮</button>
</div>
</body>
</html>
011-事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。
当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
如何阻止事件冒泡呢？
在子元素事件函数体内，写上 return false; 可以阻止事件的冒泡传递。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发
//span是div的子标签
//点击div会出现我是div
//点击span，首先会出现我是span，然后出现我是div
//解决方法：在子元素事件函数体最后写上：return false;
$("#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>
012-事件对象
事件对象，是封装有触发的事件信息的一个 javascript 对象。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
如何获取呢 javascript 事件对象呢？
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。
这个 event 就是 javascript 传递参事件处理函数的事件对象。
比如：
//1.原生 javascript 获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
//2.jQuery 代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
//3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
013-事件练习-图片跟随
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//鼠标移到小照片时，照片被放大，鼠标移出，变回原样
//给小照片绑定鼠标移入移出事件
//给小照片绑定鼠标移动事件，大照片跟着鼠标移动，使用offset设置大照片的坐标在鼠标上
$("#small").bind("mouseover mouseout mousemove",function (event){
//鼠标移入小照片时，照片被放大，即大照片出现
//鼠标移出小照片时，大照片消失
if (event.type == "mouseover"){
$("#showBig").show();
}else if (event.type == "mouseout"){
$("#showBig").hide();
}else if (event.type == "mousemove"){
//left--->横坐标
//top--->纵坐标
//event.pageX event.pageY--->鼠标移动时在页面的位置
//+10 是因为鼠标位置和大照片位置太近会导致照片闪烁，分开一些距离就好了
$("#showBig").offset({
left:event.pageX + 10,
top:event.pageY + 10
});
}
});
});
</script>
</head>
<body>
<img id="small" src="small.jpg" />
<div id="showBig">
<img src="big.jpg">
</div>
</body>
</html>
五、书城项目第一阶段(表单验证)
大部分都已经写好了，只需要实现登录和注册。
实现注册：
验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位
验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位
验证确认密码：和密码相同
邮箱验证：[email protected]
验证码：验证码是由服务器生成的，现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<style type="text/css">
.login_form{
height:420px;
margin-top: 25px;
}
</style>
<script type="text/javascript" src="../../static/jquery-3.6.0.js"></script>
<script type="text/javascript">
//表单验证-用户注册
/*
*/
$(function (){
//给注册按钮绑定点击事件
$("#sub_btn").click(function (){
//(1)验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位
//1 获取用户名输入框里的内容
var usernameText = $("#username").val();
//2 创建正则表达式对象
var usernamePatt = /^\w{5,12}$/;
//3 使用test方法验证输入的用户名是否正确
if (!usernamePatt.test(usernameText)){
//4 提示用户结果
//使用span提示用户输入的结果信息，即将结果信息写到<span>写到这里</span>
//<span class="errorMsg"></span> 就是这个span
//用户名输入错误(span.errorMsg--->span标签中class属性=errorMsg的标签 一种类选择器)
$("span.errorMsg").text("用户名不合法！");
//禁止标签的默认行为，防止输入错误时点击注册按钮页面跳转
//点击注册按钮之后，form表单会提交到action="regist_success.html"
return false;
}
//(2)验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位
var passwordText = $("#password").val();
var passwordPatt = /^\w{5,12}$/;
if(!passwordPatt.test(passwordText)){
$("span.errorMsg").text("密码不合法");
return false;
}
//(3)验证确认密码：和密码相同
//1 获取确认密码内容
var repwdText = $("#repwd").val();
//2 和密码比较
if (repwdText != passwordText){
//3 提示用户结果
$("span.errorMsg").text("确认密码和密码不一致!");
return false;
}
//(4)邮箱验证：[email protected]
//1 获取邮箱输入框的内容
var emailText = $("#email").val();
//2 创建正则表达式对象
var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
//3 使用test方法验证是否合法
if (!emailPatt.test(emailText)){
//4 提示用户结果
$("span.errorMsg").text("邮箱格式不合法!");
return false;
}
//(5)验证码：验证码是由服务器生成的，现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
//1 获取验证码输入框的内容
var codeText = $("#code").val();
//去掉用户输入的验证码中的前后的空格
codeText = $.trim(codeText);
//2 比较
if (codeText == null || codeText == ""){
//3 提示用户结果
$("span.errorMsg").text("验证码不能为空!");
return false;
}
//合法之后，要把上面的不合法提示信息去掉
$("span.errorMsg").text("");
});
});
</script>
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="" src="../../static/img/logo.gif" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">欢迎注册</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>注册尚硅谷会员</h1>
<span class="errorMsg"></span>
</div>
<div class="form">
<form action="regist_success.html">
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
<br>
<br>
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
<br>
<br>
<label>确认密码：</label>
<input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
<br>
<br>
<label>电子邮件：</label>
<input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" />
<br>
<br>
<label>验证码：</label>
<input class="itxt" type="text" style="width: 150px;" id="code"/>
<img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">
<br>
<br>
<input type="submit" value="注册" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</body>
</html>
六、XML
001-xml 简介
什么是 xml？
xml 是可扩展(可以自定义)的标记性语言。
XML的标签和属性都是自定义的
xml 的作用？
xml 的主要作用有：
1、用来保存数据，而且这些数据具有自我描述性
2、它还可以做为项目或者模块的配置文件
3、还可以做为网络传输数据的格式（现在以 JSON 为主）
002-xml 语法
（1）xml文件的声明
<?xml version="1.0" encoding="UTF-8" ?>
<?xml version="1.0" encoding="UTF-8" ?>
<!--
这个是xml文件的声明
version="1.0" 表示xml的版本
encoding="UTF-8" 表示xml文件本身的编码方式
-->
<books> <!--books表示多个图书信息-->
<book sn="SN1234"><!--book表示一个图书信息 sn属性表示图书序列号-->
<name>时间简史</name><!--name标签表示书名-->
<author>霍金</author><!--author表示作者-->
<price>75</price><!--price表示价格-->
</book>
<book sn="SN4567"><!--book表示一个图书信息 sn属性表示图书序列号-->
<name>红楼梦</name><!--name标签表示书名-->
<author>曹雪芹</author><!--author表示作者-->
<price>66</price><!--price表示价格-->
</book>
</books>
（2）注释
html 和 XML 注释 一样 : <!-- html 注释 -->
（3）元素（标签）
咱们先回忆一下:
html 标签：
格式：<标签名>封装的数据</标签名>
单标签: <标签名 /> <br /> 换行 <hr />水平线
双标签 <标签名>封装的数据</标签名>
标签名大小写不敏感
标签有属性，有基本属性和事件属性
标签要闭合（不闭合 ，html 中不报错。但我们要养成良好的书写习惯。闭合）
1）什么是 xml 元素
元素是指从开始标签到结束标签的内容。
例如：<title>java 编程思想</title>
元素 我们可以简单的理解为是 标签
2）xml 元素命名规则
2.1）名称可以含字母、数字以及其他的字符
例如：
<book id="SN213412341"> <!-- 描述一本书 -->
<author>班导</author> <!-- 描述书的作者信息 -->
<name>java 编程思想</name> <!-- 书名 -->
<price>9.9</price> <!-- 价格 -->
</book>
2.2）名称不能以数字或者标点符号开始
2.3）名称不能包含空格
3）xml 中的元素（标签）也 分成 单标签和双标签
单标签
格式： <标签名 属性=”值” 属性=”值” ...... />
双标签
格式：< 标签名 属性=”值” 属性=”值” ......>文本数据或子标签</标签名>
（4）属性
xml 的标签属性和 html 的标签属性是非常类似的，属性可以提供元素的额外信息
在标签上可以书写属性：
一个标签上可以书写多个属性。每个属性的值必须使用 引号 引起来。
的规则和标签的书写规则一致
（5）语法规则
1）所有 XML 元素都须有关闭标签（也就是闭合）
2）XML 标签对大小写敏感
3）XML 标签 必须正确地嵌套
4）XML 文档必须有根元素
根元素就是顶级元素，
没有父标签的元素，叫顶级元素。
根元素是没有父标签的顶级元素，而且是唯一一个才行
5）XML 的属性值须加引号
6）XML 中的特殊字符
> >
< <
7）文本区域（CDATA 区)
CDATA 语法可以告诉 xml 解析器，我 CDATA 里的文本内容，只是纯文本，不需要 xml 语法解析
CDATA 格式：
<![CDATA[ 这里可以把你输入的字符原样显示，不会解析 xml ]]
003-xml 解析技术介绍
xml 可扩展的标记语言。
不管是 html 文件还是 xml 文件它们都是标记型文档，都可以使用 w3c 组织制定的 dom 技术来解析
document 对象表示的是整个文档（可以是 html 文档，也可以是 xml 文档
早期 JDK 为我们提供了两种 xml 解析技术 DOM 和 Sax 简介（这两种技术已经过时，但我们需要知道这两种技术）
dom 解析技术是 W3C 组织制定的，而所有的编程语言都对这个解析技术使用了自己语言的特点进行实现。
Java 对 dom 技术解析标记也做了实现。
sun 公司在 JDK5 版本对 dom 解析技术进行升级：SAX（ Simple API for XML ）
SAX 解析，它跟 W3C 制定的解析不太一样。它是以类似事件机制通过回调告诉用户当前正在解析的内容。
它是一行一行的读取 xml 文件进行解析的。不会创建大量的 dom 对象。
所以它在解析 xml 的时候，在内存的使用上。和性能上。都优于 Dom 解析。
第三方提供的解析技术：
jdom 在 dom 基础上进行了封装 、
dom4j 又对 jdom 进行了封装。
pull 主要用在 Android 手机开发，是在跟 sax 非常类似都是事件机制解析 xml 文件。
这个 Dom4j 它是第三方的解析技术。我们需要使用第三方给我们提供好的类库才可以解析 xml
004-dom4j 解析技术
由于 dom4j 它不是 sun 公司的技术，而属于第三方公司的技术，我们需要使用 dom4j 就需要到 dom4j 官网下载 dom4j的 jar 包。
（1）Dom4j 类库的使用
（2）dom4j 目录的介绍
1）docs 是 文 档 目 录
如何查 Dom4j 的文档
Dom4j 快速入门
2）lib 目录
3）src 目录是第三方类库的源码目录
（3）使用dom4j解析一个xml文件
解析xml文件，即将xml文件中的标签变为dom对象
待解析的xml文件：books.xml：
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book sn="SN12341232">
<name>辟邪剑谱</name>
<price>9.9</price>
<author>班主任</author>
</book>
<book sn="SN12341231">
<name>葵花宝典</name>
<price>99.99</price>
<author>班长</author>
</book>
</books>
(java)生成一个Book类:
//每一个book标签要解析成为一个Book类
//写一个Book类对应book标签的内容
import java.math.BigDecimal;
//每一个book标签要解析成为一个Book类
//写一个Book类对应book标签的内容
public class Book {
private String sn;
private String name;
private BigDecimal price;
private String author;
public Book() {
}
public Book(String sn, String name, BigDecimal price, String author) {
this.sn = sn;
this.name = name;
this.price = price;
this.author = author;
}
public String getSn() {
return sn;
}
public void setSn(String sn) {
this.sn = sn;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public BigDecimal getPrice() {
return price;
}
public void setPrice(BigDecimal price) {
this.price = price;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
@Override
public String toString() {
return "Book{" +
"sn='" + sn + '\'' +
", name='" + name + '\'' +
", price=" + price +
", author='" + author + '\'' +
'}';
}
}
在解析前在模块下创建一个lib目录
存放jar包：
dom4j的jar包和
@Test 注解是TestNG的核心注解，被打上该注解的方法，表示为一个测试方法。所需要的hamcrest和junit jar包
然后创建一个java类Dom4jTest 进行解析
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.junit.Test;
import java.math.BigDecimal;
import java.util.List;
public class Dom4jTest {
@Test
public void test01() throws Exception {
//创建一个SaxReader输入流，去读取xml配置文件，生成Document对象
SAXReader saxReader = new SAXReader();
//读取xml文件，获得Document对象
Document document = saxReader.read("src/books.xml");
}
//读取books.xml文件生成Book类
@Test
public void test02() throws Exception {
//1 读取books.xml文件
SAXReader saxReader = new SAXReader();
//在Junit测试中，相对路径从模块名开始算
Document document = saxReader.read("src/books.xml");
//2 通过Document对象获取根元素
Element rootElement = document.getRootElement();
//3 通过根元素获取book标签对象
//element()和elements()都是通过标签名获得子元素
//element()获得一个，elements()获得多个
List<Element> books = rootElement.elements();
//4 遍历，处理每个book标签转换为Book类
for (Element book:books) {
//asXML() 把标签对象转换为标签字符串
//System.out.println(book.asXML());
Element nameElement = book.element("name");
//getText() 可以获得标签里的文本内容
String nameText = nameElement.getText();
//elementText()可以直接获取指定标签里的文本内容
String priceText = book.elementText("price");
String authorText = book.elementText("author");
//获得属性值
String snValue = book.attributeValue("sn");
//生成一个Book对象
System.out.println(new Book(snValue,nameText,new BigDecimal(priceText),authorText));
}
}
}
输出结果：
Book{
sn='SN12341232', name='辟邪剑谱', price=9.9, author='班主任'}
Book{
sn='SN12341231', name='葵花宝典', price=99.99, author='班长'}
总结：
需要分四步操作:
第一步，通过创建 SAXReader 对象。来读取 xml 文件，获取 Document 对象
第二步，通过 Document 对象。拿到 XML 的根元素对象
第三步，通过根元素对象。获取所有的 book 标签对象
第四步，遍历每个 book 标签对象。然后获取到 book 标签对象内的每一个元素，再通过 getText() 方法拿到起始标签和结束标签之间的文本内容
七、Tomcat
001-JavaWeb 的概念
a)什么是 JavaWeb
JavaWeb 是指，所有通过 Java 语言编写可以通过浏览器访问的程序的总称，叫 JavaWeb。
JavaWeb 是基于请求和响应来开发的。
b)什么是请求
请求是指客户端给服务器发送数据，叫请求 Request。
c)什么是响应
响应是指服务器给客户端回传数据，叫响应 Response。
d)请求和响应的关系
请求和响应是成对出现的，有请求就有响应。
002-Web 资源的分类
web 资源按实现的技术和呈现的效果的不同，又分为静态资源和动态资源两种。
静态资源： html、css、js、txt、mp4 视频 , jpg 图片
动态资源： jsp 页面、Servlet 程序
003-常用的 Web 服务器
Tomcat：由 Apache 组织提供的一种 Web 服务器，提供对 jsp 和 Servlet 的支持。
它是一种轻量级的 javaWeb 容器（服务器），也是当前应用最广的 JavaWeb 服务器（免费）。
Jboss：是一个遵从 JavaEE 规范的、开放源代码的、纯 Java 的 EJB 服务器，它支持所有的 JavaEE 规范（免费）。
GlassFish： 由 Oracle 公司开发的一款 JavaWeb 服务器，是一款强健的商业服务器，达到产品级质量（应用很少）。
Resin：是 CAUCHO 公司的产品，是一个非常流行的服务器，对 servlet 和 JSP 提供了良好的支持，
性能也比较优良，resin 自身采用 JAVA 语言开发（收费，应用比较多）。
WebLogic：是 Oracle 公司的产品，是目前应用最广泛的 Web 服务器，支持 JavaEE 规范，
而且不断的完善以适应新的开发要求，适合大型项目（收费，用的不多，适合大公司）。
004-Tomcat 服务器和 Servlet 版本的对应关系
Servlet 程序从 2.5 版本是现在世面使用最多的版本（xml 配置）
到了 Servlet3.0 之后。就是注解版本的 Servlet 使用。
以 2.5 版本为主线讲解 Servlet 程序。
005-Tomcat的使用
（1）安装
安装版本Tomcat8
找到你需要用的 Tomcat 版本对应的zip压缩包，解压到需要安装的目录即可。
（2）目录介绍
bin 专门用来存放 Tomcat 服务器的可执行程序
conf 专门用来存放 Tocmat 服务器的配置文件
lib 专门用来存放 Tomcat 服务器的 jar 包
logs 专门用来存放 Tomcat 服务器运行时输出的日记信息
temp 专门用来存放 Tomcdat 运行时产生的临时数据
webapps 专门用来存放部署的 Web 工程。
work 是 Tomcat 工作时的目录，用来存放 Tomcat 运行时 jsp 翻译为 Servlet 的源码，和 Session 钝化的目录。
（3）如何启动 Tomcat 服务器
第一种启动方式
找到 Tomcat 目录下的 bin 目录下的 startup.bat 文件，双击，就可以启动 Tomcat 服务器。
如何测试 Tomcat 服务器启动成功？？？
打开浏览器，在浏览器地址栏中输入以下地址测试：
1、http://localhost:8080
2、http://127.0.0.1:8080
3、http://真实 ip:8080
当出现如下界面，说明 Tomcat 服务器启动成功！！
启动失败原因
常见的启动失败的情况有，双击 startup.bat 文件，就会出现一个小黑窗口一闪而来。
这个时候，失败的原因基本上都是因为没有配置好 JAVA_HOME 环境变量。
常见的 JAVA_HOME 配置错误有以下几种情况：
一：JAVA_HOME 必须全大写。
二：JAVA_HOME 中间必须是下划线，不是减号-
三：JAVA_HOME 配置的路径只需要配置到 jdk 的安装目录即可。不需要带上 bin 目录
配置 JAVA_HOME 环境变量：
第二种启动方式
在DOS命令窗口启动，这种方式可以看到无法启动的错误信息
1、打开命令行
2、cd 到 你的 Tomcat 的 bin 目录下
3、敲入启动命令： catalina run
（4）如何关闭 Tomcat 服务器
1、点击 tomcat 服务器窗口的 x 关闭按钮
2、把 Tomcat 服务器窗口置为当前窗口，然后按快捷键 Ctrl+C
3、找到 Tomcat 的 bin 目录下的 shutdown.bat 双击，就可以停止 Tomcat 服务器
（5）启动或关闭Tomcat服务器最简单方式
直接右下角
右击Tomcat图标：
Start service 启动服务器
Stop service 关闭服务器
（6）如何修改 Tomcat 的端口号
Mysql 默认的端口号是：3306
Tomcat 默认的端口号是：8080
如果8080端口号用不了，可以修改Tomcat的端口号：
找到 Tomcat 目录下的 conf 目录，找到 server.xml 配置文件。
修改端口号为：1-65535 中随便选一个 （一般不要选1000以内）
修改完端口号后，重启Tomcat
http协议默认的端口号是80
80会省去看不到
平时上百度：http://www.baidu.com:80
（7）如何部署 web 工程到 Tomcat 中（不使用IDEA）
第一种部署方法
只需要把 web 工程的目录拷贝到 Tomcat 的 webapps 目录下即可。
1、在Tomcat文件下的 webapps 目录下创建一个 book工程(目录)
因为webapps目录专门存放web工程
2、在book目录中添加你写的web相关代码
3、如何访问 Tomcat 下的 web 工程
只需要在浏览器中输入访问地址格式如下：
http://ip:port/工程名/目录下/文件名
比如：http://localhost:8080/book/文件名(或目录名)
http://localhost:8080/ --->直接就是访问到了tomcat文件下的webapps目录
第二种部署方法
找到 Tomcat 下的 conf 目录\Catalina\localhost\ 下,创建一个文件abc.xml
使用这个方法，web工程放在哪个文件下都可以，加入把web工程放到E盘
abc.xml文件内容如下：
重新启动Tomcat
访问book工程：
比如：http://localhost:8080/abc/文件名(或目录名)
（8）手托 html 页面到浏览器和在浏览器中输入 http://ip:端口号/工程名/访问的区别
访问一个工程中的文件：
可以鼠标点击那个文件，拖到地址栏里面
也可以在地址栏里输入url
两种方式的区别：
手托：是从本地直接访问，不经过网络
（9）注意
当我们在浏览器地址栏中输入访问地址如下：
http://ip:port/ ====>>>> 没有工程名的时候，默认访问的是 Tomcat 文件下的 webapps 目录的 ROOT 工程。浏览器上显示是Tomcat官方网站
当我们在浏览器地址栏中输入的访问地址如下：
http://ip:port/工程名/ ====>>>> 没有资源名，默认访问 index.html 页面
index.html页面是Tomcat 文件下的 webapps 目录的 ROOT 工程中的一个文件。浏览器上显示的还是Tomcat官方网站