【JavaWeb】学习笔记（前端部分）

最新推荐文章于 2024-03-21 14:13:41 发布

南瓜仁

最新推荐文章于 2024-03-21 14:13:41 发布

阅读量555

点赞数 1

分类专栏： JAVA Web 文章标签： java tomcat

本文链接：https://blog.csdn.net/m0_53488817/article/details/119484762

版权

JAVA Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaWeb(前端部分)

写在前面

1.不知不觉发现服务器前端部分竟然有这么多内容，而且相信应该还都是比较常用的部分才被拿出来做成视频讲解。所以我道个歉，之前是我小看前端了，没想到东西这么多这么杂。

2.有很多读者可能不懂我写这么多干嘛，不是有w3c的技术文档么，真正开发的时候估计想不起来语法或者其他什么的也都会去查阅该文档，但是经过自己消化过一遍，才对前端真正有了自己的认知（虽然还未涉及到架构部分）

3.最后也是最重要的是，这部分内容推荐作为目录来查询，也就是CTRL+F，不建议浪费太多时间在这个上面。除非想和我一样，想要对前端有个属于自己的认知。关于服务器开始的内容将另外开个帖子。

前端界面

1.熟悉HTML

1.1 创建HTML文件

①创建一个Web工程（静态的Web工程）

②在工程下创建html页面

1.2 标签

①格式：<标签名>封装的数据</标签名>（标签名不区分大小写）

②标签拥有自己的属性：基本属性（如bgcolor=“red”）和事件属性（如οnclick=“alert(‘你好！’);”）

③分为单标签和双标签：单标签（
换行、

水平线）双标签（……）

1.2.1 字体标签（font）

color属性修改颜色
face属性修改字体
size属性修改文本大小

1.2.2 特殊字符（常用）

<           &lt;
>           &gt;
空格        &nbsp;

1.2.3 标题标签（h1-h6）

<h1>……</h1> h1标签最大，h6标签最小，类似于word中的多级标题
align="left"/"center"/"right"——>对齐属性，分别对应左对齐、居中、右对齐

1.2.4 超链接（……）

<a href="https://www.baidu.com">百度</a><br/> 默认为_self
<a href="https://www.baidu.com" target="_self">百度_self</a><br/> 刷新当前页为百度
<a href="https://www.baidu.com" target="_blank">百度_blank</a><br/> 打开空白页为百度

1.2.5 列表标签（无序列表、有序列表、定义列表）

无序列表：<ul> <li>赵四</li> <li>刘能</li> <li>小沈阳</li> <li>宋小宝</li> </ul>
有序列表：<ol> <li>赵四</li> <li>刘能</li> <li>小沈阳</li> <li>宋小宝</li> </ol>
二者区别在于列表前面有无序号
type="none" type属性可以修改列表项前面的符号

1.2.6 图片标签

src属性可以设置图片的路径，在web路径中分为相对路径和绝对路径两种
alt属性设置当指定路径找不到图片时，用来代替显示的文本内容

①相对路径：

.      表示当前文件所在的目录
..     表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件，相当于“./文件名”，“./”可以省略
如：<img src="../imgs/1.jpg" width="100" height="128" border="1" alt="图片找不到"/>

②绝对路径：

正确格式为：http://ip:port/工程名/资源路径
错误格式为：盘符：/目录/文件名

1.2.7 表格标签（table）

table标签 表格标签
tr          行标签
th          表头标签（效果和<td align="center"><b>1.1</b></td>一样）
td          是单元格标签
b           加粗标签
cellspacing 设置单元格间距，一般设置为0，不是重叠，是间距为零，有差别

colspan 属性设置跨列（<td colspan="2">1.1</td> 表示跨两列）
rawspan 属性设置跨行（<td rawspan="2">2.1</td> 表示跨两行）

<table align="center" border="1" width="300" height="300" cellspacing="0">(没有border属性的话什么都看不出来)
	<tr>
		<td align="center"><b>1.1</b></td>(单元格)(<b></b>为加粗)
		<td>1.2</td>
		<td>1.3</td>
	</tr>
	<tr>
		<td>2.1</td>(单元格)
		<td>2.2</td>
		<td>2.3</td>
	</tr>
	<tr>
		<td>3.1</td>(单元格)
		<td>3.2</td>
		<td>3.3</td>
	</tr>
</table>

1.2.8 iframe标签（子页面）

iframe标签可以在页面上开辟一个小区域显示一个单独的页面
<iframe src="xxx.html" width="500" height="400"></iframe>
注意：
①这里的iframe不要写单标签，不然会导致在写其他标签的时候会出问题！
②一般搭配列表使用，点击哪个的时候就在iframe中跳转对应的页面
③iframe和a标签配合使用时，要在iframe标签内定义name属性为"xxx"，再让a标签中的target="xxx"

1.2.9 表单标签（form）

表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发给服务器
input type=text       文本输入框
input type=password   密码输入框
input type=radio      单选框（配合name属性分组，实现单选限定;checked设置默认选项）
input type="checkbox" 多选框
select                下拉列表框（option是选项 selected="selected"设置默认选项 multiple="multiple"设置多选）
textarea              多行文本输入框（rows属性设置多少行，cols设置每行多少字宽度 默认值是起始标签和结束标签中的内容）
input type="reset"    重置（刷新网页默认值，value修改按钮上的文本）
input type="submit"   提交（value修改按钮上的文本）
input type="button"   按钮（value修改按钮上的文本）
input type="file"     选择文件（随“提交”一起上传）
input type="hidden"   隐藏域（当需要发送某些不需要用户参与的数据，使用隐藏域）

<form>
	用户名称：<input type="text" value="默认值"/></br>
	用户密码：<input type="password" value="abc"></br>
	确认密码：<input type="password" value="abc"></br>
	性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女/br>
	兴趣爱好：<input type="checkbox" checked="checked"/>Java<input type="checkbox"/>JavaScipt<input type="checkbox"/>C++/br>
	国籍：<select> <option>--请选择国籍--</option> <option selected="selected">中国</option> <option>美国</option> <option>日本</option> </select>
	自我评价：<textarea rows="10" cols="20"></textarea>
	<input type="reset" value="重置">
	<input type="submit" value="提交">
</form>

注意：网页中的表单一般是对齐的，方法为：
<form>
	<table align="center">
		<tr>
			<td>标题内容</td>
			<td>代码（多的话可以换行）</td>
		</tr>
	</table>
</form>

表单提交相关：
action属性设置交的服务器地址
method属性设置提交的方式GET（默认值）或POST
需要设置隐藏域！隐藏着提交时候的一些参数，如下：
<form action="http://localhost:8080" method="get">
	<input type="hidden" name="action" value="login"/>
</form>
提交之后的网页链接变为：(三个部分)
http://localhost：8080/ (服务器地址)
?                      （分隔符）
action=login&sex=on    （请求参数、表单的信息）

表单提交的时候，数据没有发送给服务器的三种情况：
1.表单项没有name属性值（也就是说想要提交的数据，都需要有“name”属性才行）
2.单选、复选（下拉列表中的option标签）都需要添加value属性，否则只会显示on/off状态，没有提交有效数据
3.表单项不在提交的form标签中（input隐藏域如果在form表单外的情况）

GET请求的特点：
1.浏览器地址栏中的地址是：action属性[+?+请求参数]
	请求参数的格式是：name=value&name=value
2.不安全（提交的时候如密码等敏感参数会一清二楚）
3.有数据长度限制（当请求的内容中包含非ASCII码或者发送的数据超过100位时必须用post）

POST请求的特点：
1.浏览器地址栏中只有action属性值（http://localhost:8080）
2.相对于GET请求要安全（不会显式显示敏感信息）
3.理论上没有数据长度的限制

1.2.10 其他标签（div、span、p标签）

div标签    独占一行
span标签内 内容有多长就占多长
p标签      默认会在段落的上方或下方各空出一行（如果已有就不再空）

2.熟悉CSS

2.1 CSS语法

1.格式：p{color:blue} ——>选择器{属性:值}
2.多个属性之间要加“;”间隔
3.一般一行只描述一个属性
4.注释格式为：/*注释内容*/

2.2 与HTML的结合方式

1.在标签的style属性上设置“key:value value;”，修改标签样式
如：<div style="border: 1px solid red;">标签</div>
缺点：①如果标签多了，样式多了，代码量非常大；②可读性非常差；③Css代码欠缺可用性；
2.在head标签中以style的形式写 选择器+大括号+键值对 如：
<head>
	<style type="text/css">
		div{
			border:1px solid red;
		}
		span{
			border:1px solid red;
		}
	</style>
</head>
注意：style内部的注释应该是css的注释格式，注意不要用html的格式
3.把css样式写成一个单独的css文件，再通过link标签引入即可复用 如：
①工程名右键——>new——>Stylesheet——>xxx.css
②写的代码内容和在head标签中的style标签中的内容一样，都是选择器+大括号+键值对的形式
③<link rel="stylesheet" type="text/css" href="xxx.css"/>

①标签名选择器：标签名{属性：值;}
②ID选择器：
#idxxx{属性：值;}
配合<div id="id001">div标签1</div>
当网页中标签名都用统一样式时用第一种即可，反之需要添加id属性

2.3 class类型选择器

格式为“.class属性值{属性:值;}”，通过class="xxx"调用

2.4 组合选择器

选择器1，选择器2，选择器n{属性:值;}，如：
.class01,#id01{属性:值;}

2.5 常用样式

①颜色：color:red;
②宽度：width:xxpx;(在设置宽高之前需要先设置边框border)
③高度：height:xxpx;
④背景颜色：background-color:#0f2d4c
⑤字体样式：color:#ff0000(红色);font-size:20px;
⑥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;}

3.熟悉JavaScript

3.1 JavaScript介绍

弱类型语言，定义变量后变量类型可变，如：var
特点：
①交互性（可以实现信息的动态交互）
②安全性（不允许直接访问本地硬盘）
③跨平台性（只要是可以解释JS的浏览器就可以执行）

3.2 JS与html代码的结合方式

①在head标签中，或者在body标签中使用Script标签来书写JS代码
<script type="text/javascript"> alert("hello javaScript!") </script>(该代码只要运行该页面就会自动弹出警告框)
②使用script标签引入单独的JS文件(需要借助src)
<script type="text/javascript" src="1.js"></script>

3.3 变量

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

undefined   JS中所有的变量在未赋初值之前的值都是undefined
null        空值
NAN         全称是Not a Number，非数字，非数值（非法运算时会出现，如字符乘以数字）

3.4 关系(比较)运算

==  等于
=== 全等于 在数值比较的基础上同时比较数据类型

3.5 逻辑运算

0、null、undefined、""(空串)被认为是false，其他默认为true

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

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

注意：与运算和或运算有短路，当这两种运算有了结果之后，后面的表达式不再执行

3.6 数组

格式：var 数组名 = [可以赋初值];
JS中只要通过数组下标进行赋值，最大的下标值会自动给数组做扩容操作，如：
var arr = [];arr[0] = 12;arr[2] = "abc"那么数组长度为3，arr[1]的值为undefined

3.7 函数

可以使用function关键字来定义函数，格式：
①function 函数名(形参列表(只需要写哪些参数即可，不需要写类型，因为不能限定类型)){函数体;}+函数调用（调用了才会执行）
②var 函数名 = function(形参列表){函数体;}

1.如果需要函数有返回值，直接在函数体内使用return即可
2.注意JS中的函数没有重载，如果重写了同样的函数名，会覆盖之前定义的函数体。

3.8 隐形参数

在function函数中国不需要定义，但却可以直接用来获取所有参数的变量，我们管它叫做隐形参数
类似JAVA中的可变个数形参，操作类似数组，具体如下：
function sum(num1,num2){
	var result = 0;
	for (var i = 0;i < arguments.lenth;i++){
		if(typeof(arguments[i]) == "number"){
			result += arguments[i];
		}
	}
	return result;
}

3.9 自定义对象

3.9.1 Object形式的自定义对象
对象的定义：
	var 变量名 = new Object();//对象实例(空对象)
	变量名.属性名 = 值;//定义一个属性
	变量名.函数名 = function(){}//定义一个函数
对象的访问：
	变量名.属性 / 函数名();
3.9.2 {}花括号形式的自定义对象
对象的定义：
	var 变量名 ={//空对象
		属性名：值，
		属性名：值，
		函数名：function(){}
	};
对象的访问：
	变量名.属性 / 函数名();

3.10 JS中的事件

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

静态注册事件：直接通过html标签的事件属性
动态注册事件：①先通过js代码得到标签的dom对象，②再通过dom对象.事件名 = function(){}

3.10.1 onload事件

静态注册：
<head>	
	<script type="text/javascript">
		function onloadFun(){
			alert('静态注册onload事件');
		}
	</script>
</head>

动态注册：
<head>
	<script type="text/javascript">
		window.onload = function(){
			alert('动态注册onload事件');
		}
	</script>
</head>

3.10.2 onclick事件

静态注册：
<head>
	<script type="text/javascript">
		function onclickFun(){
			alert('静态注册onclick事件');
		}
	</script>
</head>

<body>
	<button onclick="onclickFun();">按钮1</button>
</body>

动态注册：
<head>
	<script type="text/javascript">
		window.onload = function(){
			//1.获取标签对象
			var btnObj = document.getElementById("btn01");
			//2.标签对象.事件名 = function(){}
			btnObj.onclick = function(){
				alert('动态注册onclick事件');
			}
		}
	</script>
</head>

<body>
	<button id="btn01">按钮2</button>
</body>

3.10.3 onblur事件

静态注册：
<head>
	<script type="text/javascript">
		function onblurFun(){
			console.log('静态注册onblur事件');
		}
	</script>
</head>

<body>
	用户名：<input type="text" onblur="onblurFun();"><br/>
</body>

动态注册：
<head>
	<script type="text/javascript">
		window.onload = function(){
			//1.获取标签对象
			var passwordObj = document.getElementById("password");
			//2.标签对象.事件名 = function(){}
			passwordObj.onclick = function(){
				console.log('动态注册onblur事件');
			}
		}
	</script>
</head>

<body>
	密码：<input type="text" id="password"><br/>
</body>

3.10.4 onchange事件

静态注册：
<head>
	<script type="text/javascript">
		function onchangeFun(){
			alert('静态注册onchange事件');
		}
	</script>
</head>

<body>
	<select onchange="onchangeFun();">
		<option>--女神--</option>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
</body>

动态注册：
<head>
	<script type="text/javascript">
		window.onload = function(){
			//1.获取标签对象
			var selObj = document.getElementById("sel01");
			//2.标签对象.事件名 = function(){}
			selObj.onclick = function(){
				alert('动态注册onchange事件');
			}
		}
	</script>
</head>

<body>
	<select id="sel01">
		<option>--女神--</option>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
</body>

3.10.5 onsubmit事件

静态注册：
<head>
	<script type="text/javascript">
		function onsubmitFun(){
			alert('静态注册onsubmit事件');
			return false;
		}
	</script>
</head>

<body>
	<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
		<input type="submit" value="静态注册">
	</form>
</body>

动态注册：
<head>
	<script type="text/javascript">
		window.onload = function(){
			//1.获取标签对象
			var selObj = document.getElementById("form01");
			//2.标签对象.事件名 = function(){}
			selObj.onclick = function(){
				alert('动态注册onsubmit事件');
			}
		}
	</script>
</head>

<body>
	<form action="http://localhost:8080" id="form01">
		<input type="submit" value="动态注册">
	</form>
</body>

注意这里的return onsubmitFun和return false是在表单数据不合法时阻止表单提交

3.11 DOM模型(Document Object Model)

即将文档中的标签属性，文本，转换成为对象来管理
document.getElementById(elementId)
document.getElementsByName(elementName)
document.getElementsByTagName(tagName)
document.createElement(tagName)

在有id属性的情况下，优先使用document.getElementById(elementId);没有id，有name属性的情况下，优先document.getElementsByName(elementName);都没有的情况下再使用document.getElementsByTagName(tagName)
此外，对象的查找绑定必须在页面加载完成之后才可以实现，否则会查询不到对象

3.11.1 两种常见的验证提示效果(document.getElementById(elementId))

<head>
	<script type="text/javascript">
		function onclickFun(){
			//当我们要操作一个标签的时候，一定要先获取这个标签对象
			var usernameObj = document.getElementById("username");
			//[object HTMLInputElement] 它就是dom对象
			var usernameText = usernameObj.value;
			//正则表达式（5到12位包含字母、数字、下划线）
			var patt = /^w{5,12}$/;

			var usernameSpanObj = document.getElementById("usernameSpan")
			//innerHTML表示起始标签和结束标签之间的内容，可读，可写
			//alert(usernameObj.innerHTML)//会显示span标签的内容
			//usernameObj.innerHTML = "用户名格式错误";
			if (patt.test(usernameText)){
				usernameObj.innerHTML = "<img src="xxx.png" width="16" height="16">";
			}else{
				usernameObj.innerHTML = "<img src="xxx.png" width="16" height="16">";
			}
		}
	</script>
</head>

<body>
	<span id="usernameSpan" style="color:red;">
	</span>
</body>

注：上面的xxx.png一个表示√，另一个为×，图片存放于工程document目录下

3.11.2 全选、全不选、反选问题(document.getElementsByName(elementName))

<head>
	<script type="text/javascript">
		function checkALL(){
			//这里的hobbies是对象集合
			var hobbies = document.getElementsByName("hobby");
			for(var i = 0;i < hobbies.length;i++){
				hobbies[i].checked = true;
			}
		}
		function checkNo(){
			var hobbies = document.getElementsByName("hobby");
			for(var i = 0;i < hobbies.length;i++){
				hobbies[i].checked = false;
			}
		}
		function checkReverse(){
			var hobbies = document.getElementsByName("hobby");
			for(var i = 0;i < hobbies.length;i++){
				hobbies[i].checked = !hobbies[i].checked;
				//if(hobbies[i].checked){
				//	hobbies[i].checked = flase;
				//}else{
				//	hobbies[i].checked = true;
				//}
			}
		}
	</script>
</head>

<body>
	兴趣爱好
	<input type="checkbox" name="hobby" value="cpp">C++
	<input type="checkbox" name="hobby" value="cpp">Java
	<input type="checkbox" name="hobby" value="cpp">JavaScript
	<br/>
	<button onclick="checkALL()">全选</button>
	<button onclick="checkNo()">全不选</button>
	<button onclick="checkReverse()">反选</button>
</body>

3.11.3 全选问题(document.getElementsByTagName(tagName))

在没有给定Id，没有给定name属性时，可以直接用tagName进行对象绑定
<head>
	<script type="text/javascript">
		function checkALL(){
			var inputs = document.getElementsByTagName("input");
			for(var i = 0;i < inputs.length;i++){
				inputs[i].checked = true;
			}
		}
	</script>
</head>

<body>
	兴趣爱好
	<input type="checkbox" value="cpp">C++
	<input type="checkbox" value="cpp">Java
	<input type="checkbox" value="cpp">JavaScript
	<br/>
	<button onclick="checkALL()">全选</button>
</body>

3.12 正则表达式

<head>
	<script>
		function onclickFun(){
			//当我们要操作一个标签的时候，一定要先获取这个标签对象
			var usernameObj = document.getElementById("username");
			//[object HTMLInputElement] 它就是dom对象
			var usernameText = usernameObj.value;
			//正则表达式（5到12位包含字母、数字、下划线）
			var patt = /^w{5,12}$/;
			if (patt.test(usernameText)){
				alert("用户名合法！");
			}else{
				alert("用户名不合法！");
			}
		}
	</script>
</head>

<body>
	用户名：<input type="text" id="username" value="drt">
	<button onclick="onclickFun()">校验</button>
</body>

注意：需要格外注意"^"和"$"的限制，在两者同时使用时，"不多于xxx"的限制条件会起作用
具体正则表达式可参考菜鸟教程（JavaScript RegExp 对象）：https://www.runoob.com/jsref/jsref-obj-regexp.html

常用如下：
在这里插入图片描述 3.13 节点的常用属性和方法

节点就是标签对象
childNodes  获得当前节点的所有子节点
firstChild  获取当前节点的第一个子节点
lastChild   获取当前节点的对后一个节点
ParentNode  获取当前节点的父节点
nextSibling 获取当前节点的下一个节点
className   获取或设置标签的属性名
innerHTML   获取/设置标签中的内容
innerText   获取/设置标签中的文本
document.getElementById("xxx").getElementsByTagName("xxx");

//使用js代码来创建html标签，并显示在页面上
//标签的内容是：<div>xxx</div>
<script type="text/javasript">
	window.onload = function(){
		var divObj = document.createElement("div");//在内存中创建<div></div>
		div.innerHTML = "xxx";//但还是只在内存中修改，显示不出来
	
		document.body.appendChild("divObj");//这一步就是在Body中添加子节点，这样才能在界面运行后显示出来。
	}
</script>
//注意：1.如果不加上window.onload的话系统会识别不出dom对象，报null错误
//2.var divObj = document.createElement("div");
	div.innerHTML = "xxx";可以换一种方式写：
	
	var textNodeObj = document.createTextNode("xxx");
	divObj.appendChild(textNodeObj);

4.熟悉JQuery(是javascript语言开发的工具，与java无关)

4.1 JQuery引入

<script type="text/javascript" src="../xxx/xxx.js"></script>
通过上述语句引入JQuery文件

<script typr="text/javasrcipt">
	alert($);
</script>
//通过上述语句，用美元符号测试是否引入成功，若成功则不为空

<script typr="text/javasrcipt">
	$(function(){//表示页面加载完成之后的onload事件，相当于window.onload = function(){}
		var $btnObj = $("#btnId");//表示按id查询对象
		$btnObj.click(function(){//表示绑定单击事件
			alert("JQuery单击事件");
		});
	});
</script>

注：1.必须要先引入JQuery库
	2.$实质上是一个函数
	3.jquery库有源码和压缩后的版本，压缩后的名称为jquery版本号.min.js，一般开发的时候用原库，部署到网站上用min版本会快一些。

4.2 JQuery核心函数（$）

①传入的参数为函数时：$(function);
	表示页面加载完成之后，相当于window.onload = function(){}
②传入的参数为HTML字符串时：$("<div>" + "<span>div_span1</span>" + "</div>").appendTo("body");
	根据字符串内容创建节点对象
	如果不使用JQuery库的话，需要三步：
	var divObj = document.createElement("div");//创建外部节点
	var textNodeObj = document.createTextNode("xxx");//创建内部节点
	divObj.appendChild(textNodeObj);//绑定节点
③传入的参数为选择器字符串时：
	$("#id属性值");————>id选择器，根据标签id查询标签对象
	$("标签名");————>标签名选择器，根据标签名查询标签对象
	$(".class属性值");————>类型选择器，根据class属性查询标签对象
④传入的参数为DOM对象时：
	会将DOM对象转化为JQuery对象

4.3 JQuery对象

通过JQuery提供的API创建的对象是JQuery对象：$("<h1></h1>");
通过JQuery包装的DOM对象是JQuery对象：$(xxxObj);
通过alert查询出来的【object Object】形式的为JQuery对象
JQuery对象的本质是DOM对象的数组 + JQuery提供的一系列功能函数

4.4 JQuery对象与DOM对象转化

$(DOM对象);————>JQuery对象
JQuery对象[下标];————>DOM对象

4.5 基本选择器

$("#id属性值");————>id选择器，根据标签id查询标签对象
$("标签名");————>标签名选择器，根据标签名查询标签对象
$(".class属性值");————>类型选择器，根据class属性查询标签对象
$("标签名、id属性值、类名等");————>组合选择器，依次查询后一起显示

4.6 层级选择器

$("父元素 后代元素");————>查询父元素下的所有后代元素(子+孙+……)
$("父元素 > 子元素");————>查询父元素下的子元素(只有“子”)
$("前一个元素 + 后一个元素");————>查询紧邻前一个元素的后一个元素
$("元素A ~ 元素B");————>查询“元素A后”与元素A“同辈”的元素B

4.7 基本过滤选择器

$("xxx:first")————>第一个
$("xxx:last")————>最后一个
$("xxx:not()")————>非
$("xxx:gt(index)")————>大于
$("xxx:eq(index)")————>等与
$("xxx:lt(index)")————>小于
$("xxx:animated")————>正在播放动画
$("xxx:not(:animated):last")————>组合样式

4.8 内容过滤选择器

$("xxx:contains('xx')").css("……");————>包含文本"xx"的xxx
$("xxx:empty")————>不包含子元素的xxx
$("xxx:parent")————>包含子元素的xxx
$("xxx:has(.xx)")————>含有class为xx的xxx

4.9 属性过滤选择器

$("xxx[属性]")————>含有指定属性的xxx
$("xxx[属性='xx']")————>含有指定属性且属性等于xx的xxx
$("xxx[属性!='xx']")————>含有指定属性且属性不等于xx或不含有该属性的xxx
$("xxx[属性*='xx']")————>含有指定属性且属性包含xx的xxx
$("xxx[属性^='xx']")————>含有指定属性且属性以xx开头的xxx
$("xxx[属性$='xx']")————>含有指定属性且属性以xx结尾的xxx
$("xxx[属性][属性='xx']")————>组合过滤样式

4.10 表单过滤选择器

:input————>表单内的输入项input
:text————>表单内的type="text"
:password————>表单内的type="password"
:radio————>表单内的type="radio"，单选框
:checkbox————>表单内的type="checkbox"，复选框
:submit————>表单内的type="submit"
:image————>表单内的type="image"，不常用
:reset————>表单内的type="reset"，重置
:button————>表单内的type="button"，按钮
:file————>表单内的type="file"，文件域
:hidden————>表单内的不可项，包括type="hiden"和style="display:none;"

表单对象属性
:enabled————>可编辑内容
:disabled————>灰色的不可编辑部分(disabled="disabled")
:checked————>匹配选中的元素，一般指单选、复选框等
:selected————>匹配所有选中的option元素
在对表单项进行遍历操作的时候，如果使用老式的遍历方法，需要先获取DOM对象数组为JQuery对象，然后使用for循环进行遍历，想要取出其中的值，需要使用$xxx[i].value；使用JQuery提供的遍历方法的话，首先仍然要获取JQuery对象，之后可以通过：$xxx.each(function(){执行语句})方式进行遍历，执行语句中可以用this来便捷替代$xxx[i]

4.11 元素筛选

eq()————>获取给定索引的元素，与:eq()相似
first()————>获取第一个元素，与:first()相似
last()————>获取最后一个元素，与:last()相似
filter()————>获取满足指定条件过滤后的结果
is()————>判断是否符合给定的选择器，只要有一个匹配就返回true
has()————>返回包含有匹配选择器的元素的元素，与:has()相似
not()————>删除匹配选择器的元素，与:not()相似（尚硅谷教程原话为删除，可是并没有涉及到内存删除，只是单纯的显示剔除后的结果）
children()————>返回匹配给定选择器的子元素，与parent > child相似
find()————>返回指定祖先元素后的后代元素，与祖先 后代元素相似
next()————>返回当前元素的下一个兄弟元素，与prev + next相似
nextAll()————>返回当前元素后面所有的兄弟元素，与prev ~ siblings相似  
nextUntil()————>返回当前元素到指定匹配的元素为止的后面元素
parent()————>返回父元素
prev()————>返回当前元素的上一个兄弟元素
prevAll()————>返回当前元素前面所有的兄弟元素
prevUnit()————>返回当前元素到指定匹配的元素为止的前面元素
siblings()————>返回所有兄弟元素(前面和后面的)
add()————>把add匹配到的元素添加到当前jquery对象中

4.12 属性操作(JQuery)

html()  可以设置和获取起始标签和结束标签中的内容，类似DOM中的innerHTML
text()  可以设置和获取起始标签和结束标签中的文本，类似DOM中的innerText
val()   可以设置和获取表单项的value属性值，类似DOM中的value
单独使用样式类似于————>$(":radio").val(["radio1"])
组合样式为————>$(":radio,:checkbox").val(["radio1","checkbox1","checkbox3"])，注意val里面值的位置，顺序可以任意变化，会自动适配

注意：html()和text()的最大的区别在于如果在括号内填"<h1>xxx</h1>"，html()会在原来的基础上将起始标签和结束标签中的内容替换为一级标题，而text()则是替换为文本

attr()可以设置和获取属性值
prop()可以设置和获取属性值
attr("xxx")传一个参数就是获取指定属性值，attr("xxx","xxx")传两个参数就是设置,prop()方法类似
attr()方法可以设置自定义属性，如attr("abc","abcValue")

$(":checkbox").attr("checked")，如果body中不写checked属性的话，这里会返回Undefined，官方认为这是个错误，因此推出了prop()方法，在未编辑checked属性时会返回false，编辑了checked="checked"属性时会返回true，因此，在部分attr()方法返回undefined状态下推荐使用prop方法：
checked、readOnly、selected、disabled

全选、全不选、反选(JQuery)
$("#checkedAllBtn").click(function(){xxx})，xxx部分内容如下：
$(":checkbox").prop("checked",true)————>全选
$(":checkbox").prop("checked",false)————>全不选
this.checked = !this.checked————>反选，each方法遍历完后注意检查是否是满选($(":checkbox[name="xxx"]").length与$(":checkbox[name="xxx"]:checked").length比较)
$(":checkbox[name='items']").prop("checked",this.checked)————>全选/全不选
最后需要将所有复选框绑定单击事件，当全选的时候，对应的全选/全不选状态也会更新

4.13 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();   删除a标签里的内容，但是标签还在

4.13.1 “从左到右、从右到左”

$("sel01 option:selected").appendTo($("sel02"));————>将选中的添加到右边
$("sel01 option").appendTo($("sel02"));————>将左边的全部添加到右边
左边JQuery对象与右边的交换位置就可以实现“从右到左”

4.13.2 动态添加、删除表格记录

添加记录：
①首先创建一个行标签对象，结构与原表相同但内容为空，如下：
var $trObj = $("<tr>" + "<td>" + "</td>" + "<td>" + "</td>" + "<td>" + "</td>" + "<td>" + "</td>" + "</tr>");————>这边就是创建一个一行四列的“模板”
②获取每一列内的内容并添加到之前创建的对象中，如下：
var name = $("#xxx").val();
"<td>" + name + "</td>"

删除记录：
①给a标签绑定单击事件：
通过return false;阻止a标签的默认行为————>网页跳转
通过confirm()方法提示用户是否确认删除，返回值为true或false————>if(confirm("你确定要删除xxx吗？"))(通过a标签.parent().parent()方法找到对应的行对象)
通过行对象.remove方法删除指定行，如下：
$(function(){
	$("a").click(function(){
		var $trObj = $("a").parent().parent();
		
		var name = $trObj.find("td:first")
		
		if(confirm("你确定要删除[" + name + "]吗？")){
			$trObj.remove;
		}

		return false;
	});
});
②给新增的行记录中的a标签补绑一个单击事件：
$trObj.find("a").click(function(){
	中间代码与上面①中步骤相同，这里主要是有一个补绑的过程，之前的绑定是在页面加载完成之后绑定的，因此添加记录之后的a标签是没有进行绑定过的。
});
③如果需要简化代码，减少冗余，可以将重复代码段封装为函数，但是需要注意“this”问题，this具有“就近”属性：如果放在$("a").click(function(){封装函数})会导致this获取到的并不是鼠标点击的对象，经过函数调用后变为当前窗口对象了，因此需要改为$("a").click(xxx)，且不需要加括号！

4.14 JQuery的CSS样式操作

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

设置坐标的格式为：$xxx.offset({
	top:xx;
	left:xx;
});设置的坐标是根据当前屏幕大小设置的！

4.15 JQuery动画

show();    将隐藏的元素显示
hide();    将可见的元素隐藏
toggle();  可见就隐藏，隐藏就可见
以上动画方法都可以添加参数：
①第一个参数是动画执行的时长，以毫秒为单位
②第二个参数时动画的回调函数(动画完成后自动调用的函数function(){xxx})
③toggle()方法在回调函数中调用自身即可实现动画循环播放

fadeIn();      淡入
fadeOut();     淡出
fadeTo();      在指定时长内慢慢的将透明度修改到指定的值(0透明，1完全可见，0.5半透明)，这个参数写在动画执行时间和回调函数中间，如：$xxx.fadeTo(2000,0.5,function(){xxx});
fadeToggle();  淡入/淡出切换

4.15.1 品牌展示(点击展开xxx)

①通过对a标签绑定单击事件实现菜单的展开和合上-toggle()
②通过is(":hidden")判断状态从而修改"按钮"的内容
③通过removeClass()方法清除原来的箭头角标，通过addClass()添加指定的角标图案
④通过class方法设置推荐样式，尽量不要直接使用style属性设置样式，通过$(":contain('xxx')").addClass("xxx")设置高亮

4.16 JQuery与原生JS对比

①$(function(){});和window.onload = function(){}的区别
	(1)JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
	(2)原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
②他们触发的顺序？
	(1)JQuery页面加载完成之后先执行
	(2)原生js的页面加载完成之后
③他们执行的次数？
	(1)原生js的页面加载完成之后，只会执行最后一次赋值函数，会覆盖之前的操作
	(2)JQuery的页面加载完成之后，会依照注册的顺序，全部执行

4.17 JQuery中其他的事件处理方法：

click()      他可以绑定单击事件，以及触发单击事件
mouseover()  鼠标移入事件
mouseout()   鼠标移出事件
bing()       可以给元素一次性绑定一个或多个事件$("xx").bind("事件1 事件2",function(){xxx})
one()        使用上和bind()一样，但是响应一次之后就结束了
unbind()     和bind方法相反的操作，解除事件的绑定，不传任何参数时默认解除所有绑定事件
live()       可以用来绑定事件，它可以用来绑定选择器匹配的所有元素的时间。哪怕这个元素是后面动态创建出来的也有效

4.18 事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应：如父子元素同样绑定了单击事件，由于子元素在父元素内部，当点击了子元素会触发子元素绑定的单击事件，同时也会触发父元素的单击事件，即事件的冒泡，更重要的是要掌握事件冒泡的阻止方法：在子元素事件函数体内，return false;

4.19 JavaScript事件对象

事件对象，是封装有触发的事件信息的一个javaScript对象。我们重点关心的是怎么拿到这个javaScript的事件对象。

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

①原生js获取事件对象
window.onload = function(){
	document.getElementById("areaDiv").onclick = function(event){
		console.log(event);
	}
}

②JQuery代码获取事件对象
$(function(){
	$("#areaDiv").click(function(event){
		console.log(event);
	})
})

③举例应用：当bind同时对多个事件进行绑定时，可以通过event.type获取绑定事件的具体类型从而具体问题具体分析

4.19.1 图像跟随

①给图片绑定mouseover、mouseout事件
②根据event.type设置鼠标移入时显示show()大图片，移出时隐藏hide()
③通过想要让其跟随的图片.offset()方法设置图片跟随，其中left和top分别设置为event.pageX + 10和event.pageY + 10,

注意：需要设置点裕量，不然鼠标从左上往右下滑动时图片鼠标会离开原图进入跟随图片区域，函数会判定离开图片区域，执行mouseout逻辑，隐藏跟随图片后，鼠标又进入图片区域，执行mouseover及跟随逻辑，现象为跟随图片一直闪烁

5.了解XML(可扩展的标记性语言)

①用来保存数据，而且这些数据具有自我描述性
②可以作为项目或模块的配置文件
③可以作为网络传输数据的格式(现在主要都用JSON)

<?xml version="1.0" encoding="utf-8">————>xml文件的声明，版本号和文件编码
<books>
	<book sn="SNxxxxxxxx">
		<name>xxx</name>
		<anthor>xxx</anthor>
		<price>xxx</price>
	</book>	
</books>
用以上方式来存储数据

5.1 XML命名规则

①名称可以含字母、数字以及其他的字符(中文也可以)
②名称不能以数字或者标点符号开始
③名称不能包含空格
④必须包含根元素，即没有父标签的唯一一个顶级元素
⑤XML属性值必须用引号引起来
⑥特殊字符："<"————>"lt;"  ">"————>"gt;"
⑦文本区域(CDATA区)
	<![CDATA[这里可以把输入的字符原样显示，不会解析XML]]>

5.2 XML解析技术

DOM(w3c组织制定)
SAX(Simple API for XML;sun公司;读一行解析一行，不会产生大量的DOM对象)
第三方：
	①jdom对dom进行了封装
	②dom4j对jdom又进行了封装
	③pull主要用于android手机开发，跟sax类似

dom4j是第三方技术，需要去dom4j官网下载jar包，解压后的dom4j-x.x.x.jar即是目标
多参考docs文件夹下的index.xml里面的Quick start

主要作用就是将XML文件中的标签语言通过dom4j这个API转化为Java类、对象