JavaWeb笔记
JavaWeb学习笔记
课程链接：尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版
参考博客：W3school
HTML和CSS-BS软件的结构
JavaSE：C/S——Client / Server
JavaEE：B/S——Browser / Server
Java项目开发流程
graph LR
A(("美术实现"))==>B(("前端工程师"))==>C(("Java程序员"));
A-->A1("网页设计师根据需求设计网页");
B-->B1("前端工程师将设计做成静态网页");
C-->C1("后端工程师将静态网页修改为动态网页");
前端学习内容结构
graph LR A["HTML"] B["CSS"]--美化-->A C["JavaScript"]--交互-->A D["JQuery"]--开发框架-->C
网页的组成部分
页面由三部分组成：内容（结构）、表现、行为
内容：是我们在网页中可以看到了的数据。一般使用html技术来呈现。
表现：指内容在页面上的展示形式，比如说布局、颜色、大小等等。一般使用css技术实现。
行为：指的是页面中元素与输入设备交互的响应。一般使用javascript技术实现。
HTML简介
Hyper Text Markup Language（超文本标记语言）
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
创建HTML页面
IDEA->File->New->Project…->New Project->Language: JavaScript
或者IDEA->File->New->Project…->New Project->Language: Java->删掉src文件夹
项目文件夹鼠标右键New->HTML File
HTML书写规范
- 简单示例
1 | <!--约束，声明--> |
- 书写规范
1 | <html> <!--表示整个html页面的开始--> |
HTML标签
-
标签格式
1
<标签名>...</标签名>
-
标签对大小写不敏感
1
<body>...</Body>
-
标签拥有自己的属性
- 基本属性——设置简单的样式效果
1
2<!--背景颜色-->
<body bgcolor="green">...</body>- 事件属性——设置事件响应后的代码
1
2
3<!--弹窗提醒-->
<body onclick="alert('你好')">...</body>
<!--需要点击...附近才会弹窗--> -
标签分为单标签和双标签
- 双标签
1
2<!--段落标签-->
<p>...</p>- 单标签
1
2
3
4
5
6<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--图片标签-->
<img src=".jpg"/>
HTML语法
- 标签可以嵌套，但不能交叉嵌套
1 | <!--标签可以嵌套，不能交叉嵌套--> |
- 标签必须正确地关闭
1 | <!--双标签--> |
- 属性必修有值，属性值必须加引号
1 | 正确：<font color="blue">...</font> |
- 注释不能嵌套
1 | 正确：<!--注释内容--> |
常用标签
font标签
font 标签是字体标签，它可以用来修改文本的字体，颜色，大小（字号）
color 属性修改颜色
face 属性修改字体
size 属性修改字号
1 | <font color="pink" face="宋体" size="6">一枚小屁孩</font> |
一枚小屁孩
特殊字符
1 | < < (less than) |
标题标签
h1-h6都是标题标签，没有h7
h1最大，h6最小
1 | <h1>标题1</h1> |
标题1
标题2
标题3
标题4
标题5
标题6
超链接标签
1 | <!-- a标签 |
百度一下
百度一下 (当前页面跳转)
百度一下 (新标签页跳转)
无序列表
1 | <!--无序列表 unordered list--> |
- 第一点
- 第二点
- 第三点
1 | <!--type属性可以设置列表项前无符号 |
- 第一点
- 第二点
- 第三点
1 | <!--style属性可以设置列表项前符号的样式--> |
- Circle
- Disc
- Square
有序列表
1 | <!--有序列表 ordered list--> |
- 第一点
- 第二点
- 第三点
img标签
1 | <!-- |
Note: 在JavaSE中路径也分为相对路径和绝对路径
相对路径：从工程目录开始算，相对工程目录的路径
.表示当前目录..表示上一级目录./文件名当前路径下的文件, 其中./可以省略绝对路径：从根目录开始算的路径
- 正确格式是：
http://ip:port/工程名/资源文件路径- 错误格式是：
盘符:/目录/文件名
演示插入图片
1 | <img src=".../img/picture.jpg" width="200" height="300" border="1" alt="alt文本"> |
表格
- 基本元素
1 | <!-- |
| 表头是加粗文本 | 表头是加粗文本 |
|---|---|
| 数据单元 | 数据单元 |
- 设置边框、宽度和高度
1 | <!-- |
| A | B |
| C | D |
- 设置对齐方式
1 | <!-- |
| 默认 | 居中对齐 |
| 左对齐 | 右对齐 |
- 加粗和斜体
1 | <!-- |
| 加粗文本 | 斜体文本 |
表格跨行跨列
1 | <!-- |
| 跨四列 | |||
| 跨三行 | 跨两行两列 | C4 | |
| C4 | |||
| A2 | B3 | C4 | |
内嵌窗口
1 | <!-- |
超链接和内嵌窗口组合使用
1 | <!--为iframe添加name属性用于标识--> |
- 演示
表单标签
-
form 标签就是表单
- type 属性可以设置输入框的类型
- text 文本输入框
- password 密码输入框
- radio 单选框
- checkbox 复选框
- type 属性可以设置输入框的类型
-
name 属性可以对选项框进行分组, name 属性值相同的归为一组
- 单选框同一组内只能选中一项, 多选框可以选择多个
-
checked=“checked” 表示默认为 “checked” (选中)
- 注意单选框只能设置一个 checked=“checked”，复选框可以设置多个
-
value 属性可以设置默认值, 默认用户名和默认密码之类
Note: Radio Button 单选按钮, CheckBox 多选框
1 | <form> |
演示
表单格式化
表单一般会放在表格中，这样会方便统一格式
1 | <form> |
表单的提交
- form 标签是表单标签
- action 属性用于设置提交的服务器地址
- method 属性用于设置提交的方式为get或post
1 | <form action="http://localhost:8080/" method="get"> |
-
填写表单点击提交后自动跳转到指定的服务器地址，其中地址栏的信息如下
1
http://localhost:8080/?sex=on&id_num=0001
这个地址栏的信息要分三个部分来看
1
2
3http://localhost:8080/ <!--服务器地址-->
? <!--分隔符-->
sex=on&id_num=0001 <!--请求参数(表单信息)--> -
但是其中请求参数中只显示了表单信息中的单选框和隐藏域的信息, 其它项的信息并没有被正确提交
这是因为在表单中只有单选框和隐藏域设置了
name属性值，即name=sex和name=id_num; 而其它项没有设置name属性值, 所以没有被正确提交1
2
3sex=on <!--单选框提交信息-->
& <!--连接符-->
id_num=0001 <!--隐藏域提交信息-->给表单其它项添加
name属性值1
2
3
4
5
6
7
8
9
10
11
12
13
14<!--
给表单项设置name属性值
-->
<!--文本输入框-->
<input type="text" name="username"/>
<!--密码输入框-->
<input type="password" name="password"/>
<!--单选框-->
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<!--隐藏域-->
<input type="hidden" name="id_num" value="0001">
<!--提交框-->
<input type="submit" value="提交"/>此时提交得到的地址栏信息中已经包含了表单中的全部提交信息
1
2
3
4
5
6
7
8
9http://localhost:8080/
?
username=xiaophai
&
password=123456
&
sex=on
&
id_num=0001 -
但是但选项性别对应的值为
sex=on，表示sex框被勾选上，但这并不能直观地分辨出性别通过给但选项添加
value属性可以解决这个问题1
2<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女修改后提交显示
1
http://localhost:8080/?username=xiaophai&password=123456&sex=male&id_num=0001
-
表单提交时，数据没有正确发送给服务器的三种情况
- 表单项没有name属性值
- 单选、复选项没有添加value属性值，参数中以
on表示选中 - 表单项不在调教的form标签中
-
get和post提交方式的区别
-
get请求的特点
-
浏览器地址栏中的地址是：action属性值[+?+请求参数]
请求参数的格式是：…name=value&name=value…
-
不安全：提交的信息（包括密码）全部显示在了地址栏中
-
它有数据长度的限制：表单值（包含非ASCII码字符）的长度不能超过100个字符（不同的浏览器的限制长度不同）
-
-
post请求的特点
- 浏览器地址栏只有action属性值
- 相对get请求要安全
- 理论上没有数据长度的限制
-
文本标签
- div标签、p标签、span标签
1 | <!--div（division分隔）标签默认独占一行--> |
CSS
层叠样式表(Cascading Style Sheets，CSS)，用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
CSS语法规则
1 | p{ |
-
选择器：浏览器根据选择器决定受 CSS 样式影响的 HTML 元素（标签）
-
属性：你要改变的样式名，并且每个属性都有一个值。属性和值被冒号
:分开，并且由花括号{}包围，这样就组成了一个完整的样式声明（declaration）
例如：1
p{color:blue}
-
多个声明：如果要定义的声明不止一个，则需要用分号
;将每个声明分开。最后一个声明可以不加分号，但建议加上。
例如:1
2
3
4p{
color:red;
font-size:30px;
}
自定义css样式的三种方式
示例目标
- 分别定义两个div、span标签;
- 分别修改每个div标签的样式为：边框1个像素，实线，红色.
1.直接在标签上通过style属性自定义css样式
直接在标签的style属性上设置, 格式为key:value value;, 修改标签样式
border属性详解：border | w3school
-
div 标签
1
2<div style="border: 1px solid red;">div标签1</div>
<div style="border: 1px solid red;">div标签2</div>div标签1div标签2 -
span 标签
1
2<span style="border: 1px solid red;">span标签1</span>
<span style="border: 1px solid red;">span标签2</span>span标签1
span标签2span标签2Note: 这里可以看到 span 标签根据
<span>...</span>中封装的内容改变长度 -
这种方式的缺点
- 标签多了，样式多了，代码量非常庞大
- 可读性差
- 代码没有复用性
2.在head标签中使用style标签来自定义css样式
- 使用语法
1 | <head> |
- 示例
1 | <head> |
- 缺陷
- 只能在同一页面内复用代码，不能在多个页面中复用css代码
- 维护起来不方便，实际的项目中会有成千上万个页面，要到每个页面中去修改，工作量太大
3.把css样式写成一个单独的文件
把css样式写成一个单独的文件，再通过link标签引入即可复用
1 | /*cssfile.css*/ |
1 | <!--htmlfile.html--> |
css选择器
标签选择器
标签选择器使用HTML标签名称作为选择器，按标签名对标签项进行分类，为页面中某一类标签指定统一的CSS样式。
比如为所有的div标签指定样式1，为所有的span标签指定样式2
- 语法
1 | 标签名{ |
- 示例
1 | /*1.css*/ |
id选择器
id选择器使用标签的id属性值作为选择器，按标签id值对标签项进行分类，为页面中同一id的标签指定统一的css样式
注意标签的id是唯一的，不能重复，所以id选择器只能针对某一个标签，对其进行css样式修改。所以id选择器不是很常用。
- 语法
1 | #id名{ |
- 示例
1 | /*cssfile.css*/ |
1 | <!--htmlfile.html--> |
class选择器
class选择器使用标签的class属性作为选择器，按标签class属性对标签项进行分类，为页面中指定class属性的标签设置统一的css样式
标签的class属性可以重复，不是唯一的，所以class选择器可以同时为多个标签进行css样式修改
- 语法
1 | .类名{ |
- 示例
1 | /*cssfile.css*/ |
1 | <!--htmlfile.html--> |
组合选择器
组合选择器可以让多个选择器公用同一个CSS样式代码
- 语法
1 | 选择器1, 选择器2, ..., 选择器n{ |
- 示例
1 | /*cssfile.css*/ |
1 | <!--htmlfile.html--> |
css常用样式
1 | div{ |
-
颜色有三种使用方式
- 颜色名：blue，red，green，yellow，black, …
- rgb值：rgb(255,0,0)
- 十六进制：#00F6DE
- 参考CSS支持的140种颜色名称
-
border有三个值
-
边框样式：border-style
-
边框宽度：border-width
-
边框颜色：border-color
-
Javascript
Javascript语言主要是完成页面的数据验证。因此它运行在客户端，需要允许浏览器来解析执行Javascript代码。Js是Netscape网景公司的产品，最早取名为LiveScript；为了吸引更多的Java程序员，更名为Javascript。
Js是弱类型语言，Java是强类型语言
强弱类型语言参考知乎-什么是强类型语言，什么是弱类型语言，为什么python也是强类型语言。
特点：
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要是可以阶是JS的浏览器都可以执行，和平台无关）
Js和html代码的结合方式
第一种方式
在 head 标签中或者 body 标签中，使用 script 标签嵌套 Js 代码
1 | <head> |
第二种方式
编写单独的Javascript代码文件，再使用script标签引入
1 | //jsfile.js |
1 | <head> |
- 注意事项
1 | <head> |
1 | <!--当需要同时引入和嵌套时，应再添加一个script标签--> |
Js的变量
-
Js的变量类型
- 数值类型：number
- 字符串类型：string
- 对象类型：objc
- 布尔类型：boolean
- 函数类型：function
-
Js里特殊的值
- undefined：未定义（所有js变量为赋于初始值时，默认都是undefined）
- null：空值
- NaN：Not a Number
-
Js中定义变量的格式
1
2var 变量名;
var 变量名 = 值; -
变量示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<script type="text/javascript">
//变量未初始化时，默认值为undefined
var i;
alert(i); //undefined
//typeof()时js语言提供的一个函数，可以输出变量的类型
i = 12;
alert(typeof(i)); //number
//Js是弱类型语言，变量类型可以自动转换
i = "ab"
alert(typeof(i)); //string
//数字和字符串相乘不报错但是NaN
alert(typeof(1*"a"));//NaN
</script>
关系（比较）运算
-
< 小于号,> 大于号,<= 小于等于号,>= 大于等于号,== 等于号. -
===全等于：除了做变量值的比较之外，还会比较两个变量的数据类型1
2
3
4
5
6
7<script type="text/javascript">
var a = "12"; //string
var b = 12; //numver
alert(a == b); //true
alert(a === b);//false
</script>
逻辑运算
-
&& 与,|| 或,! 非 -
在Js中 所有变量 都可以作为一个 boolean 类型的变量去使用
0, null, undefined, ""(空串), NaN都被认为是 false，其它的都被认为是 true -
因为所有变量都可以作为一个 boolean 类型的变量去进行逻辑运算，所以 Js 的逻辑运算与其它编程语言有所不同
&&且运算- 当 表达式全为真时，返回最后一个表达式的值；
- 当表达式有一个为假时，返回第一个为假的表达式的值。
||或运算- 当表达式全为假时，返回最后一个表达式的值；
- 当表达式有一个为真时，返回第一个为真的表达式的值。
&&和||有短路，即当&&遇到假，当||遇到真时，之后的表达式不再执行
Note: Js的 bool 运算返回的是表达式的值, 不像别的语言中返回 true 或 false
示例
1 | <script type="text/javascript"> |
数组
- 语法
1 | var 数组名 = []; //空数组 |
- Js中数组可以自动扩容，Js中的数组不存在数组越界问题
1 | var arr = []; |
- 遍历数组
1 | for (var i = 0; i < arr.length; i++){ |
函数
函数的第一种定义方式
- 使用
function关键字来定义函数
1 | // 定义函数 |
- 含参函数
1 | // 参数并不需要加var指定变量 |
Note: 函数声明中定义参数时并不需要加
var声明参数变量
- 当函数参数加
var, 运行时会报错
1 | function fun2(var a, var b){ |
在浏览器中按 F12，在 Console 中查看报错
- 函数返回值
1 | // 不用指定返回值类型，直接使用return进行返回 |
函数的第二种定义方式
- 语法
1 | var 函数名 = function(形参列表){ |
- 示例
1 | // 定义函数 |
Note: Js不允许函数重载，当重名函数被定义时，先前的函数会被覆盖
隐形参数
在 function 中不需要在参数列表中定义，但却可以直接用来获取所有参数的变量, 我们称之为 隐形参数。(隐形参数类似Java的可变长参数)
1 | // 定义函数, 参数列表中默认自带了一个隐形参数 argument，其用法类似数组 |
Js中定义对象
- Object的使用语法
1 | // 定义一个对象 |
- 示例
1 | // 定义一个对象 |
- 花括号形式定义对象
1 | var 对象名 = {}; //空对象 |
Js中的事件
事件是电脑输入设备与页面进行交互的响应
事件的注册
事件的注册（绑定）就是告诉浏览器，当事件响应后应该要执行哪些操作代码，叫做 事件注册 或者 事件绑定。
事件的注册又分为 静态注册 和 动态注册
-
静态注册
通过html标签的事件属性直接赋予事件响应后的代码，这种方式叫做 静态注册
-
动态注册
先通过 Js 代码得到标签的 dom 对象，然后再通过
dom对象.事件名 = function(){}这种形式赋予事件响应后的代码，叫做 动态注册动态注册的基本步骤
- 获取标签对象
标签对象.事件名 = function(){}
常用的事件
-
onload加载完成事件：页面加载完成后，常用于做页面 Js代码初始化 操作
-
onclick单击事件:常用于按钮的点击响应操作
-
onblur失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法
-
onchange内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作
-
onsubmit表单提交事件:常用于表单提交前，验证所有表单项是否合法
onload事件
-
静态注册 onload 事件
示例11
2
3
4<!--onload事件是浏览器解析完页面之后就会自动触发的事件-->
<body onload="alert('静态注册onload事件')">
...
</body>示例2
绑定自定义 Js 函数1
2
3
4
5
6
7
8
9
10
11<head>
...
<script type="text/javascript">
function onloadFun(){
alert('静态注册onload事件');
}
</script>
</head>
<body onload = "onloadFun();">
...
</body> -
动态注册 onload 事件
1
2
3
4
5
6
7
8
9
10
11<head>
...
<script type="text/javascript">
window.onload = function(){
alert('动态注册onload事件');
}
</script>
</head>
<body>
...
</body>
onclick事件
-
静态注册onclick事件
1
2
3
4
5
6
7
8
9
10
11<head>
...
<script type="text/javascript">
function onclickFun(){
alert('静态注册onclick事件');
}
</script>
</head>
<body>
<button onclick="onclickFun();">按钮</button>
</body> -
动态注册onload事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<head>
...
<script type="text/javascript">
window.onload = function(){
// document是Js语言提供的一个类（文档）
// getElementById是document类的方法
// getElementById可以通过id属性获取标签对象
var buttonObj = document.getElementById("button01");
// 通过标签对象.事件名 = function(){} 进行绑定事件
buttonObj.onclick = function(){
alert('动态注册onclick事件');
}
}
</script>
</head>
<body>
<button id="button01">按钮</button>
</body>
onblur事件
-
静态注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<head>
...
<script type="text/javascript">
function onblurFun(){
// console是控制台对象，是由Js语言提供
// 用来向浏览器的控制台打印输出，便于测试, 观察返回值
// log() 是打印的方法
// 在浏览器中按F12打开控制台，在console中查看输出
console.log("静态注册失去焦点事件");
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun();"><br/>
密码：<input type="password" onblur="onblurFun();"><br/>
</body> -
动态注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<head>
...
<script type="text/javascript">
window.onload = function(){
// 通过id属性获取标签对象
var pswObj = document.getElementById("password");
// 通过标签对象.事件名 = function(){}
pswObj.onclick = function(){
alert('动态注册失去焦点事件');
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username"><br/>
密码：<input type="password" id="password"><br/>
</body>
onchange事件
-
静态注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<head>
...
<script type="text/javascript">
function onchangeFun(){
alert("静态注册onchange事件");
}
</script>
</head>
<body>
<select onchange="onchangeFun();">
<option>--水果--</option>
<option>--苹果--</option>
<option>--香蕉--</option>
<option>--橘子--</option>
</select>
</body> -
动态注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<head>
...
<script type="text/javascript">
window.onload = function(){
var selObj = document.getElementById("select01");
selObj.onchange = function(){
alert("动态注册onchange事件");
}
}
</script>
</head>
<body>
<select id="select01">
<option>--水果--</option>
<option>--苹果--</option>
<option>--香蕉--</option>
<option>--橘子--</option>
</select>
</body>
onsubmit事件
-
静态注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<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> -
动态注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<head>
...
<script type="text/javascript">
window.onload = function(){
var formObj = document.getElementById("form01");
formObj.onsubmit = function(){
alert("动态注册onsubmit事件: 发现不合法");
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" id="form01">
<input type="submit" value="动态注册提交">
</form>
</body>
DOM模型
DOM（Document Object Model）文档对象模型，把文档中的标签、属性、文本，转换成对象来管理
Document对象
Document对象的理解
- Document它管理了所有的Html文档内容
- Document它是一种树结构的文档，有层级关系
- 它让我们把所有的标签都对象化
- 我们可以通过Document访问所有的标签对象
例如, 下面的简单的 html 代码可以对象化一个树状图
1 | <html> |
graph TD A["文档"]---B["根元素
html"] B---C1["元素
head"] B---C2["元素
body"] C1---D1["元素
title"]---E1["文本
h1"] C2---D2["元素
超链接a"]---E2["文本
我的超链接"] D2---E3["属性
href"] C2---D3["元素
h1"]---E4["文本
我的标题"]
什么是对象化
- 举例
有一个人有年龄、性别、姓名三个属性，如何将这些信息对象化？
1 | class Person{ |
那么对于html标签来说，应该如何对象化？
1 | <body> |
模拟对象化相当于
1 | class Dom{ |
验证有户名是否合法1.0
需求：当用户点击了校验按钮，要获取输出框中的内容，然后校验其是否合法
验证的规则是：必修有数字、字母、下划线组成，并且长度是5到12位
1 | <head> |
验证有户名是否合法2.0
用 alert 来显示用户名是否合法不是常见的方式, 通常都是直接在输入框后面进行提示, 下面的改进是对这一方式的实现.
1 | <head> |
Js中的正则表达式
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
创建正则表达式对象
- 使用
new RegExp()创建
1 | // 正则表达式，用于匹配小写字母e |
- 使用双斜杠
/reg_exp/创建
1 | var patt = /e/; |
getElementsByName
实现全选和全不选的功能
1 | <head> |
getElementsByTagName
通过标签名来获取标签对象
1 | <head> |
三个获取Dom对象的方法使用的注意事项
- 如果有id属性，优先使用getElementsById方法来进行查询
- 如果没有id属性，有name属性，优先使用getElementsByName
- 如果没有id属性也没有name属性，最后考虑使用getElementsByTagName
节点的常用属性和方法
节点就是标签对象(dom对象)
常用方法
-
getElementsByTagName()
获取当前节点的指定标签名的孩子节点
1
2// 例如获取document节点的标签名为"input"的孩子节点
document.getElementsByTagName("input") -
appendChild(oChildNode)
可以添加一个子节点，oChildNode是要添加的孩子节点
常用属性
-
childNodes
属性，获取当前节点的所有子节点 -
firstChild
属性，获取当前节点的第一个子节点 -
lastChild
属性，获取当前节点的最后一个子节点 -
parentNode
属性，获取当前节点的父节点 -
nextSibling
属性，获取当前节点的下一个节点 -
previousSibling
属性，获取当前节点的上一个节点 -
className
用于获取或设置标签的class属性值 -
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容 -
innerText
属性，表示获取/设置起始标签和结束标签中的文本
JQuery
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 文羊羽！