JavaWeb笔记（前端基础H+C+JS）
知识是网状的
初窥门径 认识
为了世界的大一统，浏览器之间有已经定义好的标准 Web标准，主要就是三点构成
HTML 负责网页的结构
CSS 负责网页的表现
JavaScript 负责网页的行为
个人理解来说，就是盖房子，首先要有设计图纸（HTML）用来设计好房子的大小，哪里是厨房，那里是卧室，哪里是客厅，而真正施工之后，才能看到房子较为完整的样子（CSS），是个可以住人，但是不能生活的房子，后面精装之后（JS）有了丰富的功能，可以在卧室放衣服，睡觉，在客厅看电视，招待客人等等……
略有小成 了解
HTML ： 超文本标记语言
是一种约定俗称的一种标记语言，<标签名>内容</标签名>
<h1>是一级标题，<img>用来展示图片 ，<video>展示视频，HTML 是 可由浏览器直接运行解析的
CSS : 层叠样式表
可以修饰HTML 比如 <h1 style="color:red> 稳重的灰 </h1> 在网页中显示的就是红色的一级标题
第一次与HTML见面
<html> 是必不可少的，他是HTML的开始标签 用</html> 表示结束
<head> 是头部，图片说的也很容易理解，就是给浏览器看的信息，是一些设定之类的东西
<body> 是网页的主题，就是给用户看的，实际内容的编写位置
（基本上所有的标签都对应着结束标签</原标签>表示结束，不加也可以，HTMl的格式要求松散，但是要自律，要规整，要有良好的编码习惯）
编码软件 vscode 下载视频（我是看的这个视频，如果有自己习惯的可以用自己的）
常用样式和标签（可以不用记住，了解一下就行）
<title> 标题 
<h+数字> n级标题（粗俗的理解就是字的大小，n越小字越大n=[1-6]）
<br>特殊使用，单独换行的意思
<img>图片（可以接受GIF，但是相对来说不如视频使用观感更好）
--src：地址（路径，大家应该都懂绝对地址和相对地址吧，推荐用相对地址，记得在同一级菜单下）
--width,height:视频宽度高度
--px：像素，一般只设置高度宽度其中一个，另一个属性会等比例缩放
--%： 百分比 相对于父元素的百分比（就比如你是<body>下使用<video>，两者中间没有其他的元素，此时video的父元素就是body，通俗来说，就是<body>和<video>的段前间距就差一个tab，此时相对于video来说，大小就是body的百分之八十的大小）
<video>视频
--src:视频地址
--controls:显示播放控件，播放案件，进度条，音量控制等
--autoplay：自动播放
--width,height:视频宽度高度 同上
<audio>音频，与视频类似
<p>段落标签，一个内容占一段
<header>页眉标签
<footer>页脚标签
<b>/<strong>加粗展示 两个效果一样，可以放在<p>段落中，用来加粗需要的文字内容，一般使用strong，strong是有强调语义的
<u>/<ins>下划线 ins 具有强调语义
<i>/<em>倾斜 em 具有强调语义
<s>/<del>删除线 del 具有强调语义
<a> 超链接
--href:超链接地址
--target：打开方式：_blank(新窗口打开） _self(本窗口打开，默认）
<span>没有语义的标签，一般直接输入文本可以放在span中
（其实要仔细的分HTML和CSS也不好，两者有种相辅相成的效果）
<style>CSS中的标签，用来设置样式的，一般存在于<head>中
--选择器:(你是否想过自定义名字用来区分不同的h1或者span呢，那么选择器他来了,可以先看一眼了解一下，食用规定有说）
（一下的内容都是要写在各种选择器中的，具体选择器怎么使用文下面有写）
--color：（rgb中的具体效果，需要具体去学习，但是一般使用中，可以从菜鸟教程中找出像是浅灰色这些颜色的具体RGB配比的）食用方法一般就是在选择器中直接 color：颜色
--text-decoration:文本装饰，当text-decoration：none的时候可以去除超链接下划线，更具体的可以去查菜鸟教程或者MDN
--line-height:行高为n倍的行间距（也可以设置px，跟word中有异曲同工之处）
--text-indent:首行缩进（n个字符）em， 可以写在标签内，代表一个空格，可以直接在<p>中使用<p     >同样有首行缩进的效果，至于为什么不直接按空格，因为浏览器不会识别，同样的，大于号> 和 小于号< 会错误的识别可以用 <代表“<” >代表“>”
--margin:外边距
--margin-left:auto居中显示，左边距
--margin-right:auto居中显示，右边距，两者同时使用auto就是整体的居中
--display：控制渲染方式（就是布局）
--display:block 独占一行，可以设置宽度、高度。
--display:inline 不独占一行，不能设置宽高，只占据内容大小。
--display: flex 启用弹性盒子模型，适合一维布局，常用于导航栏，按钮组，表单排布
（这个还有更详细的弹性布局分配，可以了自行解）
设置完弹性布局之后 可以使用flex-start设置行布局（row）列布局（col）
justify-content:设置跟详细的排列方式，靠左（flex-start），靠右，或者水平居中等
登堂入室 CSS食用规定
CSS的引入方法：
方法一：行内样式<h1 style="color:red> 稳重的灰 </h1>前面提到过，仅对这一个h1生效
方法二：内部样式 写在head中 改动是整体，所有叫h1的都会有这个样式
<head>
<style>
h1{
color:red
}
</style>
</head>方法三:外部样式，为了代码的复用性，新建CSS文件，把style格式中的所有放入CSS文件夹中的css文件，此时只需要在HTML文件中引用一句话（使用link标签）
<head>
<link rel="stylesheet" href="css/style.css"></link>
</head>(rel属性,代表引入的层叠样式表 就是stylesheet，href就是引用的地址）
CSS的选择器:
1.元素选择器，直接选择HTML中已经规定好的关键字，优先级最低
<head>
<style>
p{
color:gary;
}
</style>
</head>
<body>
<p>稳重的网页测试</p>
</body>
2.类选择器，在上一种的基础上归类，优先级次之
<head>
<style>
.cls{
color:red;
}
</style>
</head>
<body>
<p class="cls">稳重的网页测试</p>
</body>
3.id选择器,优先级最高，当同时存在的时候，生效优先级相对较高的
<head>
<style>
#name{
color:blue;
}
</style>
</head>
<body>
<p id="name">稳重的网页测试</p>
</body>
结果：
剩下的选择器可以看一下了解一下，对于现在的我来说，还没有学那么深
得心应手之盒子模型：
盒子模型，顾名思义，就是一个盒子，这个盒子指的是长得像
盒子的实际意义呢，可以理解为在网页上划出一块区域专供使用
（也可以理解是用一个盒子来分门别类盛放一种东西，怎么感觉像是箱子了呢）
--<div>无语义标签（一般有这个标签，就对应着盒子模型做）
独占一行内容，若不设置宽高宽度与父元素相同，高度取决于内容（以下是CSS样式）
--width/height:设置宽高，默认是内容展示区域content
--background-color:背景色
--border:边框 三个值，边框线宽度，类型，颜色
--padding:内边距 concent内容区域与盒子之间的间距就是内边距,四个值，代表上右下左,还有更详细的分类，可以自行了解
--margin:外边距 盒子与父元素之间的间距就是外边距,同样四个值
--auto:我愿成为神中神，见名知意，自动，可以记为居中，
margin: 30px auto,左右居中，也类似于word
--box-size:默认concent-box,此时设置高度宽度只设置concent区域的
border-box 此时设置高度宽度就是整个box了，就是padding区域
<head>
<style>
#hezi{
width: 500px;/* 设置宽度 */
height: 500px; /* 设置高度，如果没有设置，默认跟输入的内容保持一致 */
background-color: yellow;/* 背景色 */
border: 5px solid red;/*边框*/
padding: 100px;/*内边距*/
margin: 100px;/*外边距*/
/* box-sizing: content-box;使用默认格式 */
}
</style>
<body>
<div id="hezi">盒子模型 盒子模型 盒子模型 盒子模型 盒子模型 盒子模型 盒子模型</div>
</body>
</head>（在网页中右键点检查，可以看到盒子效果图，左图为理论范围，右图为实际盒子样式）
（注意，盒子模型是一种设计的思路，概念，其中的有些css样式可以应用在很多很多地方）
得心应手之表单标签
表单就像是一个一个组件的集合，比如文本框，下拉式文本框，按钮，单选按钮组，多选按钮，这些都是表单中的东西，不难发现，这些东西都跟用户有交互性（从浏览器发送数据，到服务端接受数据）
（虽然图片里有，但是我还是要写！！！）
属性：（就是在表单中设置的比如<form action="/wenzhong">）
--action:就是发送数据的位置，向服务端发送数据
--method:（以何种方式发送数据，dialog是弹窗，感兴趣自行了解）
--get:在URL之后直接发送数据
涉及了一点网络的知识，其实就是在网址的后面直接增加了你发送的数据
很显然，这种方法接受数据肯定是不安全的，并且接受数据不能太长
--post:会在消息体/请求体中提交数据
（在edge中右键->检查然后找到这个界面）
这个方法就完美的解决了get不够安全和接受数据不能过长的缺点
上面的代码已经用到了表单项input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单学习</title>
</head>
/*我把细一点的东西写在注释中了*/
<body>
<form action="/save" /*method="get"*/ method="post">
用户：/*这种是直接显示在网页中的，一般来说是用label标签包起来的，因为没有学到就没写*/
<input type="text" id="username" name="username" placeholder="请输入用户名"></input>
<br>
密码：
<input type="password" id="password" name="password" placeholder="请输入密码"></input>
<br>
性别：
<label><input type="radio" id="sex" name="sex" value="1">男</input></label>
<label><input type="radio" id="sex" name="sex" value="2">女</input></label>
/*value中的值代表选中对应按钮之后，要提交的值*/
/*同时也不建议直接使用label包裹input，建议使用name，让label字段中neme指定对应的input*/
<br>
爱好：
<label><input type="checkbox" id="hobby" name="hobby" value="1">唱</input></label>
<label><input type="checkbox" id="hobby" name="hobby" value="2">跳</input></label>
<label><input type="checkbox" id="hobby" name="hobby" value="3">rap</input></label>
<label><input type="checkbox" id="hobby" name="hobby" value="4">篮球</input></label>
</br>
/*在性别和爱好这里我使用了标签，这个标签就是上面说的，不直接使用文字在浏览器中显示
**而是使用label包起来，这里可以使得不只有单选和复选按钮可以被点，整个文字也可以被点击选
**一定程度上进行了优化，label的意思就是：标签
*/
头像：
<input type="file" id="avatar" name="avatar"></input>
<br>
生日：
<input type="date" id="birthday" name="birthday"></input>
<br>
学历：
<select name="education">
<option value="1">小学</option>
<option value="2">中学</option>
<option value="3">大学及以上</option>
</select>
/*这种下拉列表，一般默认排序后值最小的默认显示*/
</br>
补充：
<textarea cols="30" rows="10"></textarea>
/*textare是文本域，cols是每一行可以写三十个字符，rows是可以有十列*/
/*这个设置的是初始的大小，并不是固定的，可以在网页中更改文本域的大小*/
<br>
<input type="submit" value="提交"></input>
<input type="reset" value="重置"></input>
<input type="hidden" name="id" value="1"></input>
/*还有一种是 <button type="里面的值是一样的">*/
</br>
<!-- <input type="hidden" name="flag" value="1"></input> -->
</br>
</form>
</body>
</html> 
（以上就差不多是表单的全部了）
得心应手之表格标签
表格嘛，一把就分成两个大的主题，一个是表头，一个是内容，表头一般是编号，姓名，年龄这些
，而具体的内容则是1001 稳重的灰 18 这些，内容可以有多行，1002 在浪的灰 16 等等……。搞清楚了就可以明白了，用<table></table>大的包裹起来，里面两个大类，<thead>表头，<tbody>主体，只需要记住，<tr>是行,<th>是定义单元格的表头区域写的，<td>是单元格的内容区域写的，剩下的就跟画图一样，画个表格就行。
<!-- 声明是HTML文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习网页1</title>
</head>
<body>
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>1001</td>
<td>稳重的灰</td>
<td>18</td>
<td>吃</td>
</tr>
<tr>
<td>1002</td>
<td>在浪的灰</td>
<td>16</td>
<td>学习</td>
</tr>
<tr>
<td>1003</td>
<td>成熟的灰</td>
<td>28</td>
<td>发呆</td>
</tr>
<tr>
<td>1004</td>
<td>成功的灰</td>
<td>38</td>
<td>我不喜欢钱，我对钱没有兴趣</td>
</tr>
</table>
</body>
</html>
融会贯通 上实战辣
黑马——tlias智能学习辅助系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能学习系统</title>
<style>
/* 顶部导航栏 */
header {
/* width: 100%; */
background-color: #808080; /*背景色*/
color: white; /* 字体颜色*/
padding: 10px; /* 内边距 */
}
header button {
/* 左边距 */
margin-left: 850px;
background-color: #f2f2f2; /*背景色*/
color: black; /* 字体颜色*/
padding: 5px 10px; /* 内边距 */
border: 1px solid #ccc; /*边框*/
cursor: pointer; /* 鼠标样式 */
}
/* 搜索表单 */
form {
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center; /* 表单整体居中 */
width: 80%;
}
form label {
margin-right: 5px;
font-size: 14px;
color: #333;
}
form input[type="text"],
form select {
width: 200px; /* 统一输入框和选择框的宽度 */
height: 30px;
padding: 0 10px;
border: 1px solid #ccc;
margin: 0 10px;
font-size: 14px;
}
form input[type="submit"],
form input[type="reset"] {
padding: 5px 15px;
border: 1px solid #ccc;
background-color: #f2f2f2;
cursor: pointer;
font-size: 14px;
margin-left: 10px;
}
form input[type="submit"]:hover,
form input[type="reset"]:hover {
background-color: #e6e6e6;
}
/* 表格 */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
table td button {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 3px 8px;
cursor: pointer;
margin: 0 2px;
}
/* 底部版权 */
footer {
padding: 20px;
text-align: center;
margin-top: 20px;
background-color: #808080;
}
footer a {
color:blue;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
div{
width: 80%;
margin: 0 auto;
}
/* 让图片大小和单元格一样大 */
img{
width: 100%;
}
</style>
</head>
<body>
<div>
<!-- 顶部导航栏 -->
<header name="top">
稳重智能学习模仿系统
<button>退出登录</button>
</header>
<!-- 搜索表单 -->
<form action="">
<label>姓名：</label><input type="text">
<label>性别：</label><select name="sex">
<option value="">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<label>职位：</label><select name="job">
<option value="">请选择</option>
<option value="1">特级教师</option>
<option value="2">一级教师</option>
<option value="3">二级教师</option>
<option value="4">教导主任</option>
<option value="5">班主任</option>
</select>
<input type="submit" value="搜索">
<input type="reset" value="清空" ">
</form>
<!-- 表格 -->
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>操作</th>
</tr>
<tr>
<td>稳重的灰</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>教导主任</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>特级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>特级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>一级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>芳六</td>
<td>女</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>一级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>贝利亚</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>二级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>奶龙</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>二级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>方一</td>
<td>女</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>班主任</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>是你依然</td>
<td>女</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>班主任 </td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
<footer>
稳重的灰的博客：
<a href="https://blog.csdn.net/wenzhongdehui?spm=1000.2115.3001.5343">https://blog.csdn.net/wenzhongdehui?spm=1000.2115.3001.5343</a>
</footer>
</div>
</body>
</html>（经过AI编写，然后认识其中的作用，理解一遍就过了）
（因为图片太大我就去掉了图像，这样看的比较全）
常用标签和常用样式
常用标签
常用样式
再窥门径 JavaScript
JavaScript 是 一门脚本语言(不用编译，可以直接运行的语言），js中只有部分基础语法和java类似，js是弱类型语言
js 的引入方式
内部脚本：在<body>的最后，用<script>来写JavaScript，要注意的是，使用内部脚本，script可以放在任意地方，但是推荐放在<body>的最下面，在所有HTML的标签都渲染完成之后，再执行<script>
外部脚本：同CSS相差不大，在<script 中 增加src路径的引用>
初识js
js中可以定义常亮变量
-- let 定义变量，弱类型（即任何类型都可以） 比如：let a = 10; a = 'wenzhong';当定义a之后赋值 类型是 number 当 a= 'wenzhong'之后，类型就变成了string，甚至数组都可以（var也可以，但是老师说不好）
-- const 定义常量，没什么好说的，就是你理解中的常量
-- alert(); 完整的是 window.alert(); 弹出框
--console.log(); 控制台打印（是网页的检查页面中的控制台）
--document.write();在网页上直接显示（不常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js学习</title>
</head>
<body>
<script>
let a = 10;
a = "wenzhongdehui"
const PI = 3.14;
window.alert(PI);// 弹出框
alert(a);
console.log(PI); // 控制台打印
console.log(a);
document.write("<h1>稳重的灰的网页实战</h1>"); // 网页打印 不常用
</script>
</body>
</html>
（这个是弹出框）
（左边是网页直接显示的，右边是网页检查页面的控制台）
js中的数据类型
挺好记的，可以分类记，number boolean string 特殊的 null 新的 undefined 可以使用typeof检查变量类型 ，要特殊注意，使用typeof测试null的类型时，会显示object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js学习</title>
</head>
<body>
<script>
// 五种数据类型
let a = 1;
let b = "1";
let c = true;
let d = null;
let e;
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
</script>
</body>
</html>
特殊：反引号字符串（``）叫模版字符串
一般的 字符串拼接 "我的名字是："+name+"，我今年"+age+"岁了！"；
而格式字符串则是 "我的名字是${name}，我今年${age}岁了！"
js的函数方法
因为js是弱类型语言，所以返回值不需要指定类型，参数也不需要
具名函数
匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js学习</title>
</head>
<body>
<script>
// 具名函数定义和使用
function add(a, b){
return a+b;
}
let s = add(10,20);
console.log(s);
//也可以简单粗暴一些
function show(){
console.log("我是具名函数");
}
show();// 没有返回值就不需要接收
// 匿名函数定义和使用
let show1 = function(){
console.log("我是匿名函数");
}
show1();
// 函数表达式
let show2 = function show2(){
console.log("我是函数表达式");
}
show2();
// 箭头函数
let show3 = () => {
console.log("我是箭头函数");
}
show3();
</script>
</body>
</html>
自定义对象（就是对象）
跟java中对象的定义像不，但是要特别注意的是，最后的","是特殊的，如果不写","那么后面就不能有新的属性或者方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js学习</title>
</head>
<body>
<script>
// 自定义对象
let person = {
name:"张三",
age:18,
show:function(){
console.log(this.name+" "+this.age);
},
sing(){
console.log("I am singing");
}
}
person.show();
person.sing();
//完全可以记作java中的对象
</script>
</body>
</html> （还有一种是箭头函数，不推荐使用，因为有坑）
特殊格式（json）
可以先简单的理解json文件，json文件就是一个格式工整的txt文件，通过图片可以看到json文本的严格格式 {"key":value, "key":value……}key是要严格使用双引号包起来，如果是string对象也必须使用双引号包起来
因为json的特殊性，网页和服务端传输数据的时候，就可以用json文件格式传输
那么相应的，在网页中也有特殊的对象，js对象 js对象可以直接供浏览器使用，因为需要进行数据的传输，js对象需要一种方法把js对象变成对应的json文件，同时也需要一种方法把json文件变成可以解析的js对象，就是JSON.parse （把json文件变成对象）和 JSON.stringify（反过来），注意两个都是大写JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js学习</title>
</head>
<body>
<script>
// js对象
let person = '{"name":"张三","age":18}';
// 这就是一个js对象，但是实际此时仍然是字符串
let personjson = JSON.parse(person);
console.log(personjson.name);// 只有对象才能直接使用.调用
// 同样的也需要将json转换为对象才能使用
person = JSON.stringify(personjson);
console.log(person);
</script>
</body>
</html>
js中的核心 DOM
（DOM把整个HTML的所有部分都进行了封装）
首先：将整个HTML封装成了一个对象
然后：在整个文档中，对元素（也就是一个一个标签）进行了封装成对象，其中根据层级进行了树状的划分
再然后：深入对其中的属性（也就是style样式这种）进行封装
最后：分别对文字和注意进行了封装
这样的一级一级的封装，就构成了一个树形图
DOM操作的核心思想：把页面中的所有一切都当做对象
那么问题来了，DOM是怎么操作的呢？
我感觉DOM就有种反射的感觉，这里的第一步操作就是获取DOM元素对象，就是根据选择器来获取元素（还记得选择器吗，标签名，类名，id），当我们通过选择器获取了相对应的对象，就可以动态的操作这个对象了，比如拿到了一个元素对象<h1>一级标题，可以再通过元素对象拿取文本对象，就可以实现在js中修改<h1>中写的文本了，这本来是只能在HTML中做的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js学习</title>
</head>
<body>
<h1> 稳重的灰 </h1>
<h1 class="cls"> 爱你 </h1>
<h1 id="name"> 但不说 </h1>
<script>
// js中的DOM操作
let a = document.querySelector('h1')
let b = document.querySelector('.cls')
let c = document.querySelector('#name')
let d = document.querySelectorAll('h1')
// 具体的操作可以查询MDN或者其他什么的
a.innerHTML = 'green';
b.innerHTML = 'red';
c.innerHTML = 'blue';
</script>
</body>
</html>（老师上课说有早期写法，我就不写出来混淆视听了）
（对比可以看到，不同于CSS的只能修改样式，而且是固定修改样式，JS通过DOM可以实现动态的修改，比如当鼠标点击文字，文字就会改变，就像家里的电视，HTML规划了电视的拜访位置，CSS买了具体的电视型号，而JS则打开了电视，根据你的行为播放对应的内容，但是更具体的你点的哪个频道，就用到了事件监听）
js的事件监听
（这个就写了早期的方法，是因为早期的方法有特殊的情况）
事件的监听，顾名思义，就是监听是否做出了某种情况，比如鼠标单击，双击，右击这种都是实践，当js监听到你触发了某种时间，就会做出相应的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js学习</title>
</head>
<body>
<button id="name1">点我试试</button>
<button id="name2">不要点我</button>
<script>
// 事件的监听
// 这里使用了流式的做法，java中的stream流
document.querySelector('#name1').addEventListener('click', function () {
alert('点了能咋地？');
})
/*
document.querySelector('#name1').addEventListener('click', function () {
alert('我又点了一下');
})
*/
document.querySelector('#name2').onclick = function () {
alert('我就要点！');
}
/*
document.querySelector('#name1').addEventListener('click', function () {
alert('我又点了一下');
})
*/
</script>
</body>
</html>
（快问快答，我点了哪个按钮？？！！）
第二种方法用的就是老方法，那么问题来了，老的和新的有什么区别呢？
很简单，如果用新的addEventListener，当botton1按钮写了多个单击事件，那么就会按顺序执行所有的单击事件
如果是用旧的on+选择器，写了多个事件的话，后面的就会覆盖前面的（感兴趣的可以自己试试）
js中常用事件
再得心手 实战代码升级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能学习系统</title>
<style>
/* 顶部导航栏 */
header {
/* width: 100%; */
background-color: #808080; /*背景色*/
color: white; /* 字体颜色*/
padding: 10px; /* 内边距 */
}
header button {
/* 左边距 */
margin-left: 850px;
background-color: #f2f2f2; /*背景色*/
color: black; /* 字体颜色*/
padding: 5px 10px; /* 内边距 */
border: 1px solid #ccc; /*边框*/
cursor: pointer; /* 鼠标样式 */
}
/* 搜索表单 */
form {
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center; /* 表单整体居中 */
width: 80%;
}
form label {
margin-right: 5px;
font-size: 14px;
color: #333;
}
form input[type="text"],
form select {
width: 200px; /* 统一输入框和选择框的宽度 */
height: 30px;
padding: 0 10px;
border: 1px solid #ccc;
margin: 0 10px;
font-size: 14px;
}
form input[type="submit"],
form input[type="reset"] {
padding: 5px 15px;
border: 1px solid #ccc;
background-color: #f2f2f2;
cursor: pointer;
font-size: 14px;
margin-left: 10px;
}
form input[type="submit"]:hover,
form input[type="reset"]:hover {
background-color: #e6e6e6;
}
/* 表格 */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
table td button {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 3px 8px;
cursor: pointer;
margin: 0 2px;
}
/* 底部版权 */
footer {
padding: 20px;
text-align: center;
margin-top: 20px;
background-color: #808080;
}
footer a {
color:blue;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
div{
width: 80%;
margin: 0 auto;
}
/* 让图片大小和单元格一样大 */
img{
width: 100%;
}
</style>
</head>
<body>
<div>
<!-- 顶部导航栏 -->
<header name="top">
稳重智能学习模仿系统
<button>退出登录</button>
</header>
<!-- 搜索表单 -->
<form action="">
<label>姓名：</label><input type="text">
<label>性别：</label><select name="sex">
<option value="">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<label>职位：</label><select name="job">
<option value="">请选择</option>
<option value="1">特级教师</option>
<option value="2">一级教师</option>
<option value="3">二级教师</option>
<option value="4">教导主任</option>
<option value="5">班主任</option>
</select>
<input type="submit" value="搜索">
<input type="reset" value="清空" ">
</form>
<!-- 表格 -->
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>操作</th>
</tr>
<tr>
<td>稳重的灰</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>教导主任</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>特级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>特级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>一级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
<tr>
<td>芳六</td>
<td>女</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>一级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
<tr>
<td>贝利亚</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>二级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
<tr>
<td>奶龙</td>
<td>男</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>二级教师</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
<tr>
<td>方一</td>
<td>女</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>班主任</td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
<tr>
<td>是你依然</td>
<td>女</td>
<td><img src="https://s1.chu0.com/src/img/gif/52/5214e79dbd124c8e884ecb70ad604afa.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:zdbfIs-jPERjpM5hBBo2eWkvrC0=" alt=""></td>
<td>班主任 </td>
<td>2025-06-08</td>
<td>
<button>编辑</button>
<button id="bot">删除</button>
</td>
</tr>
</table>
<footer>
稳重的灰的博客：
<a href="https://blog.csdn.net/wenzhongdehui?spm=1000.2115.3001.5343">https://blog.csdn.net/wenzhongdehui?spm=1000.2115.3001.5343</a>
</footer>
</div>、
<script>
// 增加监听事件，当点击按钮时，删除对应的行
document.querySelectorAll('button').forEach(function (item) {
item.addEventListener('click', function () {
item.parentElement.parentElement.remove();
})
})
// 当鼠标移动到表格的块时，表格背景变色,移动到时变成深灰色，移动走之后还原
document.querySelectorAll('tr').forEach(function (item) {
item.addEventListener('mouseover', function () {
item.style.backgroundColor = 'gray';
})
item.addEventListener('mouseout', function () {
item.style.backgroundColor = 'white';
})
})
</script>
</body>
</html> 
可以看到 稳重的灰和李四中间的张三已经被删除了，同时鼠标移动到对应行会变色
感谢阅读
欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。
更多推荐
23
0- 0
已为社区贡献1条内容
所有评论(0)