Web、Js知识归纳一
目录
- Web、Js知识整理
- 8.14
- HTML简介
- HTML介绍
- HTML标签
- HTML元素
- Web浏览器
- HTML网页结构
- 声明
- 中文编码(mate)
- HTML基础
- HTML元素
- 嵌套的 HTML元素
- HTML 空元素
- HTML提示：推荐小写标签
- HTML属性
- HTML属性常用引用属性值
- HTML提示：推荐小写属性
- HTML常用属性
- HTML标题 h
- HTML分隔线[水平线] hr
- HTML注解< !-- 内容 -->
- HTML段落 p
- HTML换行 br
- HTML 输出- 使用提醒
- HTML文本格式化
- 字符实体(特殊字符)
- div与span
- HTML链接 a
- HTML 链接语法
- HTML链接- target 属性
- HTML链接-锚点#+id
- HTML头部
- HTML < head> 元素
- HTML < title> 元素
- HTML < link> 元素
- HTML < style > 元素
- HTML< meta>元素
- HTML < script> 元素
- HTML < base> 元素
- HTML样式CSS
- HTML样式常用属性
- 字体相关样式
- 边框相关样式
- 颜色的三种写法
- 内联样式(标签style属性)
- 内部样式(head,style标签)
- id选择器：以#开头，后面紧跟id的值
- class选择器：以.开头，后面紧跟class的名字即值
- 标签名选择器：用标签名作为选择器
- 外部引用(外部 CSS 文件)
- 三种样式优先顺序
- HTML图像
- HTML列表
- 无序列表ul-li
- ul自定义序号图标list-style-image
- 有序列表ol-li
- 列表嵌套
- 无序套无序，有序套有序
- 无序套有序，有序套无序
- 8.15
- 表格table
- 子标签
- 行列合并
- rowspan 行合并
- 列合并colspan
- 行列合并练习
- 表单form
- 基本表单
- form 标签
- 表达标签的公共的属性
- 常用类型
- input type="text"，文本框
- input type="password"，输入的内容以星号显示
- input type="number"，只能输数字
- input type="radio"，单选框
- input type="checkbox"，复选框
- select option 选项，下拉框
- input type="checkbox"，文本域
- input type="file"，上传照片
- input type="submit"，按钮
- input type="button"， 按钮
- CSS
- 选择器分组和class组合
- 其他选择器
- 后代选择器：两个选择器之间存在空格符号(' ')；
- 子元素选择器：两个选择器之间存在大于符号('>')
- 相邻兄弟选择器：两个选择器之间存在加号符号('+')
- 后续兄弟选择器：两个选择器之间存在波浪号符号('~')
- 伪类选择器
- 标签的显示和隐藏
- 标签页切换-其他选择器运用
- 背景-图片
- 边框
- 用div边框实现三角形
- box-shadow 阴影效果
- 盒子模型
- 盒子包括的元素
- 元素总宽高度计算
- 8.16
- display样式
- 流式布局(默认)
- inline-block实现横向布局
- inline-block横向布局中间有间隙问题
- 定位布局
- 相对定位
- 绝对定位
- z-index，重叠时显示顺序
- z-index 设置重叠时显示顺序
- 浮动布局float
- 弹性布局
- flex-direction：排列方向
- justify-content：对齐方式
- align-items：跟排列方向垂直的方向上的对齐方式
- flex-wrap：换行方式
- 弹性布局实现上下左右居中显示
- 布局练习
- 练习一
- margin问题
- overflow属性
- 标签固定宽高
- padding和border的值就不会在影响元素的宽高
- 练习二
- 8.17
- JS书写位置
- 注释
- 输出信息
- 变量和函数定义
- 六种数据类型
- 三种对象类型
- 变量定义
- var与let的区别
- 函数定义
- 事件
- onclick 点击事件
- onchange 内容改变事件
- onmouseover 鼠标滑过事件
- onload 页面加载事件
- onfocus 获得焦点事件
- DOM操作
- 首先，获取标签对象
- 改变标签的样式、内容、属性
- style.xxx、innerText、innerHTML
- value 读取或设置输入框的内容
- 加法器
- 改变标签的属性
- setInterval()与clearInterval()
- setInterval()与setTimeout()
- setTimeout()
- setInterval()
- setInterval()与setTimeout()区别
- 广告轮播图
- 8.18
- 增加和删除标签
- document.createElement(标签名)
- document.createTextNode(文字内容)
- 父标签对象.appendChild(child)
- 父标签对象.insertBefore(新标签，子标签[插入位置])
- 父标签对象.removeChild(子标签)、标签.remove()
- 代码用法
- 标签的遍历
- 代码用法
- 事件
- 在标签中用onXXXX事件名上写一个方法
- 用标签对象的οnclick=function(){}
- 标签对象的οnclick=()=>{}
- 用addEventListener()方法绑定事件
- 事件的冒泡机制
- 代码用法
- 动态表格增删修
- 标签对象的οnclick=()=>{}
- 用addEventListener()方法绑定事件
Web、Js知识整理
8.14
HTML简介
HTML介绍
HTML(HyperText Markup Language) ，超文本标记语言，用于描述网页的一种语言
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫web 页面
HTML标签
HTML标记标签通常被称为HTML标签(HTML tag)
HTML标签是由尖括号包围的关键词，比如 < html >
HTML 标签通常是成对出现的，比如 < b > 和 < /b >
标签对中的，第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
标签中间可放文本内容，例如：<标签>内容
HTML元素
严格来讲, 一个 HTML 元素包含了开始标签与结束标签以及内容
例，HTML元素：< p >这是个HTML元素< /p >
Web浏览器
Web浏览器，是用于读取HTML文件，并将其作为网页显示
Web浏览器：谷歌浏览器，Internet Explorer，Firefox，Safari
浏览器，并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户
HTML网页结构
只有 < body > 区域 才会在浏览器中显示
声明
< !DOCTYPE >文档类型声明(Document Type Declaration)，用于告知 Web 浏览器页面当前页面使用的HTML文档版本是哪个
即使网络上有很多不同的软件，若能够正确声明HTML版本，浏览器就能正确显示出来
doctype声明不区分大小写
以下声明均可，
< !DOCTYPE HTML > 声明的版本是，HTML5文档，通用声明
DOCTYPE HTML>
doctype HTML>
doctype html>
Doctype html>
声明位于文档中的最前面的位置，处于 < htm l> 标签之前
< !DOCTYPE > 声明不是一个 HTML 标签，因此不需要关闭标签
< !DOCTYPE > 声明一个HTML文档的版本。添加声明确，保浏览器能够预先知道文档类型
中文编码(mate)
< meta > 元素来描述HTML文档的描述，关键词，作者，字符集
目前在大部分浏览器中，直接输出中文会出现中文乱码，需要在头部将字符声明为 UTF-8
< meta charset=“UTF-8” >
HTML基础
HTML元素
HTML 文档由 HTML 元素定义
HTML元素=<开始标签>元素内容
嵌套的 HTML元素
HTML文档，由相互嵌套的HTML元素构成
大多数HTML元素可以嵌套
即，HTML 元素可以包含其他 HTML 元素
HTML 空元素
没有内容的 HTML 元素被称为空元素
空元素是在开始标签中关闭，在开始标签中添加斜杠
< br />，是关闭空元素的正确方法
< br > 在所有浏览器中都是有效的
但使用 < br / > 其实是更长远的保障
HTML提示：推荐小写标签
HTML 标签对大小写不敏感，< P > 等同于 < p >
万维网联盟(W3C)，在 HTML 4 中推荐使用小写
HTML属性
HTML属性，是 HTML 元素提供的附加信息
HTML属性常用引用属性值
属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题
在某些个别的情况下，若属性值本身就含有双引号，那么就必须使用单引号
例如：
name=‘John “ShotGun” Nelson’
HTML提示：推荐小写属性
属性和属性值对大小写不敏感
万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值
HTML常用属性
HTML标题 h
标题（Heading）是通过 < h1> - < h6> 标签进行定义的
< h1> 定义最大的标题， < h6> 定义最小的标题
浏览器会自动地在标题的前后添加空行
HTML 标题 标签只用于标题
不要仅仅是为了生成粗体或大号的文本而使用标题
搜索引擎使用标题，为该网页的结构和内容编制索引
标题来呈现文档结构,用户通过标题来快速浏览该网页
HTML分隔线[水平线] hr
< hr> 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容
![HTML分隔线[水平线]](https://img-blog.csdnimg.cn/img_convert/80663f959636c7af776b60eb0a7eff21.png)
HTML注解< !-- 内容 -->
< !–…–>注释标签，用来在源文档中插入注释，且注释不会在浏览器中显示
快捷键：ctrl+/
HTML段落 p
HTML可以将文档分割为若干段落， < p> …< /p>标签定义段落
HTML换行 br
在不产生一个新段落的情况下进行换行（新行），请使用 < br> 标签
< br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签
HTML 输出- 使用提醒
对于 HTML，不能在 HTML 代码中添加额外的空格或换行来改变输出的效果
当显示页面时，浏览器会移除源代码中多余的空格和空行
所有连续的空格或空行都会被算作一个空格
HTML 代码中的所有连续的空行或换行，被显示为一个空格
HTML文本格式化
标签 < strong> 替换加粗标签 < b> 来使用, < em> 替换 < i>标签使用
标签的含义是不同的：
< b> 与< i> 定义粗体或斜体文本
< strong> 或者 < em>意味着呈现的文本是重要的，要突出显示
字符实体(特殊字符)
例空格、大于、小于、and等
格式：&+英文+；
nbsp 空格：& nbsp
lt 小于号：<
gt 大于号：>
amp 与：&
yen 人民币：¥
copy 版权：©
reg 注册商权：®
div与span
容器div：控制内容块的标签,用于布局< div>内容块< /div>
span文字标签，设置文字样式< span>内容块< /span>
HTML链接 a
超链接可以是一个字，一个词，或一组词，或一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分
标签< a> 中使用了href属性来描述链接的地址
一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示
HTML 链接语法
< a href=“url”>链接文本
超链接a 点击标签体进行页面跳转[href中写跳转至哪]
<a href="http://www.baidu.com">百度[标签体]a>
HTML链接- target 属性
target属性指定打开页面方式，默认在当前窗口创建
_self：当前窗口
_blank：打开一个新窗口
_parent：父窗口
_top：最顶层窗口
<a href="http://www.hqyj.com" target="_blank">华清软件a>
HTML链接-锚点#+id
锚点， href属性用**#开头，后面跟上id的值**，点击这个连接，则网页显示第一行就会调转到id标签位置
<h1 id="num1">首页，锚点h1>
<a href="#num1">连接到本页的锚点a>
HTML头部
HTML < head> 元素
< head> 元素包含了所有的头部标签元素
在 < head>元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息
添加在头部区域的元素标签: < title >， < style >， < meta >，< link >， < script >
HTML < title> 元素
< title> 标签定义了不同文档的标题
< title> 在 HTML/XHTML 文档中是必需的
< title> 元素
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
HTML < link> 元素
< link> 标签定义了文档与外部资源之间的关系
< link> 标签通常用于链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
head>
HTML < style > 元素
< style> 标签定义了HTML文档的样式文件引用地址
在< style> 元素中，可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue
}
style>
head>
HTML< meta>元素
meta标签描述了一些基本的元数据。
< meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析
charset=UTF-8，中文编码
<meta charset="UTF-8">
name=“keywords”，为搜索引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
name=“description”，为网页定义描述内容
<meta name="description" content="免费Web&编程教程">
http-equiv=“refresh” 每隔定时时间刷新当前页面
<meta http-equiv="refresh" content="30">
HTML < script> 元素
< script>标签用于加载脚本文件，如： JavaScript
HTML < base> 元素
< base> 标签描述了基本的链接地址/链接目标
该标签作为HTML文档中所有的链接标签的默认链接
HTML样式CSS
CSS (Cascading Style Sheets)， 用于渲染HTML元素标签的样式
内联样式，直接写在标签；在HTML元素中使用"style" 属性
内部样式：写在head里，用style标签；在HTML文档头部 < head> 区域使用< style> 元素 来包含CSS
外部引用，使用外部 CSS 文件；单独写为一个css文件
HTML样式常用属性
字体相关样式
color，字体颜色
background-color，背景颜色
font-size，字体大小
font-family，字体类型
text-align，文字对齐方式 [center居中对齐]
边框相关样式
span无高宽
width，宽度
height，高度border，边框线[组合样式 ]
border: 3px solid red;
3px：边框粗细，
solid：边框类型：实线solid，虚线dotted，
red：线条颜色border-radius，边框圆角 单位px，控制弧度
若是正方形，设为高宽像素的一半即为圆，或百分比可以百分比：50%表示一个圆；
若是正方形，设为高宽像素的一半即为椭圆，可以百分比：50%表示一个椭圆；
颜色的三种写法
- 颜色名字[英文名]
- rgb(红,绿,蓝)
每颜色的数值是0~255，[0是无,255最深]
rgb(0,0,0) 黑色,rgb(225,225,225) 白色
- 十六进制表示方式
每两位表示一种颜色[依次为：红绿蓝]
0：00；255：FF
<style type="text/css">/*id选择器*/#sp1{/*颜色名字 */color: red; }/* class选择器*/.b{color: rgb(0 155, 0);/*rgb(红,绿,蓝),每颜色的数值是0~255,[0是无,255最深]rgb(0,0,0) 黑色,rgb(225,225,225) 白色*/}/* 标签名选择器 */p{color: #0000FF;/* 十六进制表示方式，每两位表示一种颜色[依次为：红绿蓝]0：00；255：FF*/}style>
内联样式(标签style属性)
当特殊的样式需要应用到个别元素时，就可以使用内联样式
使用内联样式的方法是在相关的标签中使用样式属性
样式属性可以包含任何 CSS 属性
内部样式(head,style标签)
当单个文件需要特别样式时，就可以使用内部样式表;在< head> 部分通过 < style>标签定义内部样式表
id选择器：以#开头，后面紧跟id的值
以#开头，后面紧跟id的值，一般用于单个标签设置样式，因为id不能重复
class选择器：以.开头，后面紧跟class的名字即值
以.开头，后面紧跟class的名字即值；class选择器可重复使用，只要标签加上该class名字，就会受影响
标签名选择器：用标签名作为选择器
标签名选择器，用标签名作为选择器,对该页面上所有的同名标签起作用
外部引用(外部 CSS 文件)
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
使用外部样式表，通过更改一个文件来改变整个站点的外观
三种样式优先顺序
三种样式优先顺序：内联样式，内部样式、外部样式
当三个同时存在三个时，以就近原则为准
HTML图像
HTML 中，图像由< img> 标签定义
< img> 是空标签，意思是说，它只包含属性，并且没有闭合标签
需要使用源属性src(source)，其的值是图片资源的路径，即是网上的图片，也可以是工程中的一个文件图片(本地图片)
HTML中的路径两种方式：相对路径、绝对路径
相对路径：./img/boy.jpg 或 img/boy.jpg
绝对路径：根目录(/)开始，通常根目录(/)代表ulr到端口的位置；即一个项目的开始
[.]是当前目录、[. .]是上级目录
<img src="./img/boy.jpg" alt="男孩1相对路径" height="200px"/>相对路径
<img src="/day1/img/boy.jpg" alt="男孩2绝对路径" width="200px"/>绝对路径<img src="http://i2.chinanews.com.cn/simg/hnhd/2023/08/14/1/3894139818873583181.jpg" width="800px" alt="风景秀美的安吉余村"/>网上的图片
alt属性
若图片显示有问题，则在图片位置会显示alt内容
width,height属性
指定图片的宽高，默认图片大小为本身大小
建议只设置一个属性，另一个属性等比例缩放
HTML列表
无序列表ul-li
无序列表是一个项目列表，默认小黑圆圈进行标记
无序列表始于< ul> 标签,每个列表项始于 < li> 标签
无序列表的几种序号，在ul类 type：
square：方形图标
circle：空心圆点
disc：实心圆点，默认值
ist-style-image：自定义图行
ul自定义序号图标list-style-image
list-style-image：url(‘图片路径’)
DOCTYPE html>
<html><head><meta charset="utf-8"><title>评分组件title><style type="text/css">.star{width: 200px;list-style-image: url(img/star1.png);display: flex;justify-content: space-evenly;}style>head><body><ul class="star"><li>li><li>li><li>li><li>li><li>li>ul><script type="text/javascript">let star = document.querySelector('.star')let lis = star.childrenlet index for(let i=0;i<lis.length;i++){// mouseover时把鼠标位置之前的星点亮lis[i].addEventListener('mouseover',()=>{noLight()for(let j=0;j<=i;j++){lis[j].style.listStyleImage = "url(img/star3.png)"}})// mouseout时评分的星点亮lis[i].addEventListener('mouseout',()=>{noLight()for(let j=0;j<=index;j++){lis[j].style.listStyleImage = "url(img/star3.png)"}}) // click事件设置评分lis[i].addEventListener('click',()=>{index = i})}function noLight(){for(let i=0;i<lis.length;i++){lis[i].style.listStyleImage = "url(img/star1.png)"}}script>body>
html>
有序列表ol-li
序列表也是一列项目，列表项目使用数字进行标记
有序列表始于 < ol > 标签,每个列表项始于 < li> 标签，列表项使用数字来标记
有序列表的几种序号，在ol类type：
1:阿拉伯数字,默认值
A:大写的英文字母
a:小写的英文字母
I:大写的罗马数字
i:小写的罗马数字
列表嵌套
列表的嵌套,有序无序均可嵌套
无序套无序，有序套有序
无序套有序，有序套无序
8.15
表格table
HTML 表格，是一种用于展示结构化数据的标记语言元素；由 < table> 标签来定义
border：边框线，0-无边框；
cellspacing：单元格之间的间距
cellpadding：单元格的内边距，边框与文字的距离
style属性：border-collapse样式，让边框双线重叠在一起变单线
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
子标签
caption：表格名称，显示在表格上面； < caption>内容< /caption>
tr (table row) ：行，表示表格的一行；< tr>行< /tr>
th ( table header)：列，表示表格一个数据单元格；< th>列< /th>
td (table data)：列，表示表格的表头单元格；< td>列< /td>
[th：表头的列，文字粗体；td：数据行的列]
< table>元素表示整个表格，主要包含< thead> 与< tbody>
当有thead和tbody时，标签的顺序无关；
不管thead放在什么位置，都会把thead显示在第一行
行列合并
同行上的，为列合并；不同行的，为行合并
对此代码进行行列合并:
rowspan 行合并
在第一行的列加上rowspan属性 ，值是要合并行数；其次把后面行对应重复的列都删掉
行合并，列与后面行均要变
列合并colspan
在第一行的列加上rowspan属性，值是要合并行数；其次把后面行对应重复的列都删掉
只会影响一行，不会影响后面行
行列合并练习
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">td,th{border: 1px solid orangered;}th{height: 30px;text-align: left;background-color: coral;}td{width: 120px;height: 25px;text-align: center;}table{height: 30px;border-collapse: collapse;}style>head><body><table style="margin: auto;"><caption style="font-size: 24px;"><b>个人简历b>caption><tr><th colspan="7">求职意向th>tr><tr><td>姓名td><td>td><td>性别td><td>td><td>出生日期td><td>td><td rowspan="5">td>tr><tr><td>民族td><td>td><td>籍贯td><td>td><td>婚姻状况td><td>td>tr><tr><td>政治面貌td><td>td><td>现所在地td><td>td><td>健康状况td><td>td>tr><tr><td>外语水平td><td colspan="2">td><td>计算机水平td><td colspan="2">td>tr><tr><td>外语水平td><td colspan="2">td><td>计算机水平td><td colspan="2">td>tr><tr><th colspan="7">工作经历th>tr><tr><td>工作时间td>工作单位td><td>职务td><td colspan="2">主要职责td><td>离职原因td>tr><tr><td>td> td><td>td><td colspan="2">td><td>td>tr><tr><td>td> td><td>td><td colspan="2">td><td>td>tr><tr><td>td> td><td>td><td colspan="2">td><td>td>tr><tr><td>td> td><td>td><td colspan="2">td><td>td>tr><tr><th colspan="7">主要职业培训经历th>tr><tr><td>培训时间td> 培训机构名称td><td>培训地点td><td colspan="3">培训内容td>tr><tr><td>td> td><td>td><td colspan="3">td>tr><tr><td>td> td><td>td><td colspan="3">td>tr><tr><th colspan="7">获得证书及职称情况th>tr><tr><td colspan="2">获得证书/职称名称td> 评定专业td><td>获得/注册时间td><td colspan="2">颁发/注册时间td>tr><tr><td colspan="2">td> td><td>td><td colspan="2">td>tr><tr><td colspan="2">td> td><td>td><td colspan="2">td>tr><tr><td>个人爱好td><td colspan="6">td>tr><tr><td>个人特长td><td colspan="6">td>tr><tr><td>自我评价td><td colspan="6">td>tr>table>body>
html>
表单form
表单，是在网页上填表格，在数据的修改，新增等时候用到表单
表单类型的输入框，包含文本，单选，复选，下拉框，提交按钮
表单提交后，会把输入的数据发送给服务器
基本表单
action属性：后台接受数据的接口URL
method属性：提交方式，get与post
-
post：数据隐藏提交，长度无限制；
-
get-把数据附加在url上提交，长度有限制;
http : // 127.0.0.1:8848/add?userName=aaa&userPwd=123
url之间是?分割；参数名与值之间是=分割；多个参数之间用&分割
enctype=“multipart/for-data”， 若上传文件，form标签需要添加这个属性
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><form action="/add" method="get">用户名：<input type="text",name="userName">密码：<input type="password" name="userPwd" ><input type="submit" value="提交" />form>body>
html>
form 标签
表达标签的公共的属性
id: 标签唯一识别码，每个页面上不能有重复的id
name: 标签名，后台根据name来获取输入值
value: 输入的值
autocomplete: 是否显示历史记录, 设为off就不显示
常用类型
- input type=“text”，文本框
- input type=“password”，以星号显示
- input type=“number”，只能输入数字
- input type=“radio”，单选框
- input type=“checkbox”，复选框
- select option 选项，下拉框
- input type=“checkbox”，文本域
- input type=“file”，上传照片
- input type=“submit”，提交按钮，全页更新
- input type=“button”， 按钮，局部更新
input type=“text”，文本框
input type=“text”，文本框，输入字符文字数字均可
学生姓名：<input type="text" name="setName" value="三",autocomplete="off">
input type=“password”，输入的内容以星号显示
密码：<input type="password" name="userPwd" >
input type=“number”，只能输数字
学生年龄：<input type="number" name="setAge">
input type=“radio”，单选框
同一组单选框name要一样，value值是后台获取数据需要必写；checked：默认选择中，
学生性别：<input type="radio" name="stuSex" value="男">男
<input type="radio" name="stuSex" value="女" checked>女
input type=“checkbox”，复选框
可多选或不选，同一组复选框name要一样、value值是后台获取数据需要必写；checked：默认选择中
学生爱好：<input type="checkbox" name="stuHobby" value="唱歌">唱歌
<input type="checkbox" name="stuHobby" value="跳舞">跳舞
<input type="checkbox" name="stuHobby" value="运动"checked>运动
<input type="checkbox" name="stuHobby" value="旅游" checked>旅游
select option 选项，下拉框
value值是后台获取数据需要必写；默认选中第一个，设置selected：默认选中
option标签的value是提交到后台的值；标签体是显示的内容
selected属性，当前选项被选中
select标签上添加：multiple属性，则下拉框可多选值
学生籍贯： <select name="stuBirthplace" multiple>
<option value="">请输入...option>
<option value="重庆">重庆option>
<option value="四川">四川option>
<option value="贵州">贵州option>
<option value="云南">云南option>
select>
input type=“checkbox”，文本域
input type=“checkbox”，文本域，可写入一大段文字
cols：宽度(列)；rows：高度(行)
自我评价：<textarea name="stuDescript" cols="30" rows="10">textarea>
input type=“file”，上传照片
input type=“file”，上传文件标签，会打开文件浏览器让你选择文件
上传照片：<input type="file" name="stuPhoto">
input type=“submit”，按钮
input type=“submit”，提交按钮，点击时form提交到后台服务
<input type="submit" value="提交"/>
input type=“button”， 按钮
input type=“button”， 按钮，与submit类似
<input type="button" value="按钮">
CSS
选择器分组和class组合
class组合：标签的class可以写多个，用空格分割
选择器分组：写样式时，常把公共的样式抽出来单独写，特有的样式另外再写一个，设置class属性用多个样式
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">.p1,.p2,.p3{color: red;}.font20{font-size: 20px;}.font30{font-size: 30px;}.font40{font-size: 40px;}style>head><body><p class="p1 font20">第一个p标签p><p class="p2 font30">第二个p标签p><p class="p3 font40">第三个p标签p>body>html>
其他选择器
-
后代选择器：两个选择器之间存在空格符号(’ ')；
-
子元素选择器：两个选择器之间存在大于符号(‘>’)
-
相邻兄弟选择器：两个选择器之间存在加号符号(‘+’)
-
后续兄弟选择器：两个选择器之间存在波浪号符号(‘~’)
-
伪类选择器：link、visited、hover、active
link：未访问之前的样式
visited：已访问的样式
hover：鼠标移到链接上的样式；hover必须要放在link和visited之后才生效
active：鼠标键按下时的样式；active必须要放在hover之后
后代选择器：两个选择器之间存在空格符号(’ ')；
在标签box1下的，p标签文本文字全文红色
.box1(class选择器)+空格+p(标签选择器)
第一个选择器限定范围
第二个选择器在第一个选择器中的所有后代(子子孙孙)标签中再次筛选
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">/* 在box1下的标签，p标签文本文字红色 .box1(class选择器)+空格+p(标签选择器)两个选择器之间存在空格 表示后代选择器第一个选择器限定范围 第二个选择器在第一个选择器中的所有后代(子子孙孙)标签中再次筛选*/.box1 p{ color: red;}style>head><body><div class="box1"><p>box1下的p标签p><div class="box2"><p>box2下的p标签p><div class="box3"><p>box3下的p标签p><span>box3下的span标签span><p>box2下的p2标签p>div>div>div>body>
html>
子元素选择器：两个选择器之间存在大于符号(‘>’)
子元素选择器 .box1(class选择器)+>+p(标签选择器)
只能在下一层的标签受到影响[儿子会受到影响，孙不会]
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">/* 子元素选择器 .box1(class选择器)+>+p(标签选择器)只能在下一层的标签受到影响[儿子会受到影响，孙不会]*/.box2>p{font-size: 30px;color: blue;}style>head><body><div class="box1"><p>box1下的p标签p><div class="box2"><p>box2下的p标签p><div class="box3"><p>box3下的p标签p><span>box3下的span标签span><p>box2下的p2标签p>div>div>div><div class="box2"><p>外部，box2下的p标签1p><p>外部，box2下的p标签2p>div>body>
html>
相邻兄弟选择器：两个选择器之间存在加号符号(‘+’)
相邻兄弟，用+分隔
紧挨它的后续的第一个兄弟标签
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">/* 相邻兄弟，用+分隔紧挨它的后续的第一个兄弟标签*/.first-p+p{color: green;font-size: 30px;}style>head><body><div class="boxb"><p class="first-p">boxb下的第一个p标签p><p >boxb下的第二个p标签p><p >boxb下的第三个p标签p>div>body>
html>
后续兄弟选择器：两个选择器之间存在波浪号符号(‘~’)
后续兄弟，用~分隔
它后面的所有兄弟标签
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">/* 后续兄弟，用~分隔 它后面的所有兄弟标签*/.first-p~p{font-size: 28px;color: rebeccapurple;}style>head><body> <div class="boxb"><p class="first-p">boxb下的第一个p标签p><p >boxb下的第二个p标签p><p >boxb下的第三个p标签p>div>body>
html>
伪类选择器
DOCTYPE html>
<html><head><meta charset="utf-8"><title>a标签的伪类选择器title><style type="text/css">/* hover必须放在link与visited后面才生效active必须放在hover之后才生效*//*link 未访问之前的样式 */a:link{color: orange;}/* visited已访问的样式 */a:visited{color: gainsboro;}/* hover鼠标移动到链接上的样式 */a:hover{color: green;}/* active鼠标按下去且不放的样式 */a:active{color: red;}style>head><body><a href="index.html">首页a>body>
html>
标签的显示和隐藏
display:none，隐藏标签
display:block，显示标签
cursor: pointer，光标为手形
hover：悬停
DOCTYPE html>
<html><head><meta charset="utf-8"><title>通过hover让标签显示出来title><style type="text/css">.box1{height: 100px;width: 100px;/* 隐藏标签 */background-color: red;/* 隐藏标签：none隐藏 ；block显示 */display: none;}/* hover 悬停 *//* .show:hover+.box1 兄弟选择器 */.show:hover+.box1{/* 显示标签 */display: block;}/* cursor 设置光标变成手形状pointer默认为：文本输入形状*/.show{cursor: pointer;}style>head><body><span class="show">显示span><div class="box1">div>body>
html>
标签页切换-其他选择器运用
当光标移动到第一页上，显示div1, 以此类推
DOCTYPE html>
<html><head><meta charset="utf-8"><title>标签页切换title><style type="text/css">.box1,.box2,.box3{height: 400px;width: 400px;border: 1px solid red;display: none;}/* 空格 影响子子孙孙 第一个限制范围，第二个在第一个范围里筛选影响 *//* > 影响儿子 第一个限制范围，第二个在第一个范围里中只影响下一层 *//* ~后续所有该兄弟，+相邻的一个该兄弟*/.f1:hover~.box1,.f2:hover~.box2,.f3:hover~.box3{display: block;}style>head><body><span class="f1">第一页span><span class="f2">第二页span><span class="f3">第三页span><div class="box1"><p>第一页内容p>div><div class="box2"><p>第二页内容p>div><div class="box3"><p>第三页内容p>div>body>
html>
背景-图片
background-image：url(‘图片路径’)，背景图片
background-size：cover、contain，背景图片大小
cover：直接把图片拉伸与容器高宽一致(填满整个容器)，图片可能会变形
contain：等比例放大图片，直到高或宽一边跟容器相等
background-repeat：no-repeat，背景图片不会重复(平铺)
background-position：center，背景图片位置居中
opactity：0~1，背景图片透明度；0：不透明、1：透明
DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景图片title><style type="text/css">.box1{background-image: url("img/彭于晏.jpg");width: 400px;height: 500px;/*contain：图片放大[宽度或长度热任意一边一致] 等比例方法cover：图片放大，直接把图片拉伸跟容器的高宽一致(填满整个容器),图片可能变形*/background-size: contain;/* 背景图片不会重复 */background-repeat: no-repeat;/*背景图片居中显示 */background-position: center;/* 透明度，0~1 1为不透明 0为完全透明 */opacity:0.5;}style>head><body><div class="box1">div>body>
html>
边框
border
boder：1px solid red ；[三个属性值]
第一个属性值：border-width，单位px
第二个属性值：border-style，边框线的虚实：solid实线、
第三个属性值：border-color，边框线的颜色；transparent 透明
一个div有四条边，可以通过border-width、border-style、border-color，单独对四条边设置；[四条边的顺序：上、右、下、左 、顺时针方向]
DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框title><style type="text/css">.box1{height: 100px;width: 100px;/* border: 1px solid darkgoldenrod; *//* 可以对border四条边进行设置 上、右、下、左[顺时针]设置一个值：代表上右下左设置两个值：代表上下、左右设置四个值：代表上、右、下、左[顺时针]*/border-width: 1px 3px 5px 7px;border-style: dashed dotted solid ridge;border-color: red green blue palevioletred;/*border-radius：设置四个角的弧度*/}style>head><body><div class="box1">div>body>
html>
用div边框实现三角形
DOCTYPE html>
<html><head><meta charset="utf-8"><title>实现标注框title><style type="text/css">.box1{height: 400px;width: 400px;margin: auto;border: 1px solid red;}.box2{height: 100px;width: 200px;border-radius: 12%;margin: auto;background-color: blue;}.box3{height: 0px;width: 0px;border-width:20px;border-style: solid;border-color: blue transparent transparent transparent;margin: auto;}style>head><body><div class="box1"><div class="box2">div><div class="box3">div>div>body>
html>
box-shadow 阴影效果
DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框title><style type="text/css">.box3{width: 200px;height: 60px;background-color: red;/* 阴影 第一个参数是长，第二个参数是宽 第三个参数颜色 */box-shadow: 10px 3px dodgerblue;}style>head><body><div class="box3">div>body>
html>
盒子模型
盒子包括的元素
- Margin(外边距)，边框的外边空白部分
- Border(边框)，边框的宽度
- Padding(内边距)，成内容的部分和外边框之间的框
- Content(内容)
元素总宽高度计算
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
8.16
display样式
- none，隐藏
- inline，行内元素(不换行，高宽无效)
- inline-block，不换行的块元素
- block，块元素(独占一行，可设宽高) / 显示
- flex，弹性布局
DOCTYPE html>
<html><head><meta charset="utf-8"><title>块元素和行内元素title><style type="text/css">.box1{width: 100px;height: 100px;background-color: aqua;}.span1{width: 100px;height: 100px;border: 1px solid red;/* 行内元素display: block，就会转换为块标签；可调宽高等，且自动换行display: inline-block，不换行的块标签；可调宽高等，但不换行display: inline，行内标签*/display: inline-block;}style>head><body><a href="">首页a><img src="./img/boy.jpg" alt=""><span >scan标签span><span class="span1">scan标签2span><input type="text"><p>p标签p><div class="box1">div>body>
html>
流式布局(默认)
inline-block实现横向布局
DOCTYPE html>
<html><head><meta charset="utf-8"><title>流式布局、横向布局title><style type="text/css">.box1,.box2,.box3{width: 100px;height: 100px;/* 横向布局，一个接一个从左往右排 */display: inline-block;}.box1{background-color: red;}.box2{background-color: green;}.box3{background-color: blue;}style>head><body><div class="box1">div><div class="box2">div><div class="box3">div><div class="box1">div><div class="box2">div><div class="box3">div>body>
html>
inline-block横向布局中间有间隙问题
定位布局
相对定位
参考点是标签默认所在的位置，标签移走之后，原来的位置不会释放（其它标签不能占用这个位置）
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">.box1,.box2,.box3{width: 100px;height: 100px;/* 相对定位 position: relative相对位置[参考点]为：标签原本所在位置*/position: relative;}.box1{background-color: red;}.box2{background-color: green;/* 相对位置[参考点-容器的左上点]为：标签原本所在位置 点向上移、右移为负；点向下移、右移为正；*/left: 100px;top: -100px;}.box3{background-color: blue;left: 200px;top: -200px;}style>head><body><div class="box1">div><div class="box2">div><div class="box3">div>sdcfwsfbody>
html>
绝对定位
参考点统一为父容器的左上角顶点，标签移走之后，它原来所占的位置可以被其它标签补位
定位坐标可以用： left + top、left + bottom 、top + right、right + bottom
绝对定位：
首先必须要放在一个容器中[父类]，且需要将父类的地位方式为相对定位(即添加属性position:relative)
在子类容器中加入，即：position:absolute;
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">#outer{width: 500px;height: 500px;margin: auto;border:1px solid black;/* 绝对定位，要求把父类容器的定位方式设为relative参考点为父类的左上角*/position: relative;}.box1,.box2,.box3{width: 100px;height: 100px; }.box1{background-color: red;}.box2{background-color: green;/* 子类容器的定位方式设为absolute */position:absolute;left:100px;top:0px;}.box3{background-color: blue;/* 子类容器的定位方式设为absolute */position:absolute;left:200px;top:0px;}style>head><body><div id="outer"><div class="box1">div><div class="box2">div><div class="box3">div>aaaaadiv>body>
html>
z-index，重叠时显示顺序
当两个div位置重叠时，默认谁后放谁显示
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">.out{height: 300px;width: 300px;border:1px solid red;position:relative}.box1,.box2{width: 100px;height: 100px;position:absolute;left:0px;top:0px;}.box1{background-color: red;}.box2{background-color: blue;}style> head><body><div class="out"><div class="box1">div><div class="box2">div>div>body>
html>
z-index 设置重叠时显示顺序
z-index 重叠时显示顺序，值大的显示在最前面 ，值小的会被覆盖；若未设置值，则默认0，相等选择最后一个
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">.out{height: 300px;width: 300px;border:1px solid red;position:relative}.box1,.box2{width: 100px;height: 100px;position:absolute;left:0px;top:0px;}.box1{background-color: red;z-index:1;}.box2{background-color: blue;z-index:0;/* z-index 重叠时显示顺序，值大的显示在最前面 ，值小的会被覆盖若未设置值，则默认0，相等选择最后一个*/}style> head><body><div class="out"><div class="box1">div><div class="box2">div>div>body>
html>
浮动布局float
float：left 左浮动、right 右浮动，第一个标签排最右边
clear: 清除浮动
标签设置浮动之后，后续标签也会跟着浮动
为了避免对后续标签的影响，要对后续第一个标签设置清除浮动
DOCTYPE html>
<html><head><meta charset="utf-8"><title>浮点布局title><style type="text/css">#outer{width: 500px;height: 500px;margin: auto;border:1px solid black;}.box1,.box2,.box3{width: 100px;height: 100px;text-align: center;line-height:100px;color:white;float:left;/* 浮动 floatleft:左浮动right:右浮动,第一个标签在最右边*/}.box1{background-color: red;}.box2{background-color: green;}.box3{background-color: blue;}/* 清除浮点：标签设置浮动之后，后续标签也会跟着浮点为了避免对后续标签的影响，对后续第一个标签设置清除浮动对浮点后面紧挨的标签进行clear清除浮动 */p{clear:both;}style>head><body><div id="outer"><div class="box1">1div><div class="box2">2div><div class="box3">3div><p>fsdfegsfdp>div>body>
html>
弹性布局
所有的样式都在父容器里面设置
display：flex
flex-direction：排列方向
justify-content：对齐方式
align-items：跟排列方向垂直的方向上的对齐方式
flex-wrap：换行方式
flex-direction：排列方向
row，横向排列，默认值
row-reverse， 横向排列，右对齐，顺序反转
column，竖向排列
column-reverse 竖排，底边对齐，顺序反转
justify-content：对齐方式
在排列方向对齐方式。横排时，水平方向对齐方式；竖排，垂直方向的对齐方式
以下说明都是按row方向排列:
center，水平居中
flex-start，左对齐
flex-end，右对齐
space-around ，中间等距间隔，两边的间距时中间间距的一半
space-between，中间间隔等距，两边靠边
space-evenly，完全等距间隔排列(两边和中间都等距)
align-items：跟排列方向垂直的方向上的对齐方式
如果时横向排列，这个样式就是垂直对齐方式； 如果纵向排列，这个样式就是水平 方向的对齐方式
以下说明都是按row方向排列:
center，居中
flex-start，顶对齐，默认
flex-end，底边对齐
flex-wrap：换行方式
nowrap，不换行， 压缩标签的宽度，在一行显示完所有标签
wrap，换行
wrap-reverse，换行，顺序反转 （
注意： 换行之后的行距由align-content样式决定
弹性布局实现上下左右居中显示
display:flex;
justify-content:center
align-items:center
DOCTYPE html>
<html><head><meta charset="utf-8"><title>flex实现上下左右居中title><style type="text/css">.box{width: 100px;height: 100px;background-color: red;}.outer{/* vm视口宽度单位，全屏宽度100vm，等价于width 100%*/width: 100vm;/* vh视口高度，全屏宽度100vm*/height: 100vh;/* 高度无100%，宽度有限制可100% */display: flex;justify-content: center;align-items: center;}style>head><body><div class="outer"><div class="box">div>div>body>
html>
布局练习
练习一
DOCTYPE html>
<html><head><meta charset="utf-8"><title>布局练习title><style type="text/css">.out{width: 450px;height: 280px;margin: auto;background-color: darkgray;display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;}.box1,.box2,.box3,.box4{width: 210px;height: 130px;background-color: rgb(108, 198, 162);display: flex;}.box2{background-color: rgb(227, 215, 141);}.box3{background-color: rgb(69, 158, 162);}.box4{background-color: rgb(159, 116, 100);}.prd-left{width:80px;height:130px;overflow: hidden;}.prd-right img{width:130px;height:128px;}.prd-right:hover{border: 1px solid black;}.line{width: 60px;height: 40px;margin: auto;border-width: 4px 4px 1px 4px;border-style: solid;border-color: white transparent white transparent; margin: auto;font-size: 14px;text-align: center;line-height: 40px;color: white;}.prd-left span{display: inline-block;margin-top: 30%;font-size:10px;color: white;}style>head><body><div class="out"><div class="box1"><div class="prd-left"><div class="line">新品发布div><span>小米发新机,手法享好礼span>div><div class="prd-right"><img src="img/new1.jpg" alt="">div>div><div class="box2"><div class="prd-left"><div class="line">新品发布div><span>小米发新机,手法享好礼span>div><div class="prd-right"><img src="img/new2.jpg" alt="">div>div><div class="box3"><div class="prd-left"><div class="line">新品发布div><span>小米发新机,手法享好礼span>div><div class="prd-right"><img src="img/new3.jpg" alt="">div>div><div class="box4"><div class="prd-left"><div class="line">新品发布div><span>小米发新机,手法享好礼span>div><div class="prd-right"><img src="img/new4.jpg" alt="">div>div>div>body>
html>
margin问题
子标签设置margin后，父容器也会存在margin，可能会导致布局出错：方案一，父容器设置边框；方案二：父容器设置overflow:hidden，超出部分隐藏
overflow属性
overflow:visible ：默认值，超出容器的内容也会展示出来
overflow:hidden ：超出容器部分的内容会被隐藏
overflow:scroll ：设置滚动条，对于超出部分使用滚动条查看
overflow:auto ：如果超出，则超出部分设置为滚动条查看剩余内容
overflow:inherit：从父元素继承overflow属性值
标签固定宽高
padding：设置边框与边距
box-sizing:border-box
标签固定宽高，设置边框边距，压缩内容区域
padding和border的值就不会在影响元素的宽高
box-sizing:border-box
padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里
盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
标准盒子模型，一般浏览器均默认标准盒子模型，即：box-sizing:content-box
怪异盒子模型，一般根据实际项目需要自行设置，即：box-sizing:border-box
练习二
DOCTYPE html>
<html><head><meta charset="utf-8"><title>布局练习title><style type="text/css">.out{height: 400px;width: 1100px;background-color: antiquewhite;display: flex;justify-content: space-around;align-items:center;}.left img{width:200px ;height: 380px;}.mid{height: 380px;width: 650px;background-color: white;}.right{height:380px;width: 240px;background-color: white;}.mid-top{height: 50px;width: 95%;display:flex;justify-content:space-between;border-width: 0,0,1px,0;border-style: solid;border-color: transparent transparent black transparent;} .mid-top span{display: block;}.mid-bottom{width: 95%;height: 300px;display: flex;justify-content: space-around;flex-wrap: wrap;}.prd{width: 300px;height: 150px;/* background-color: blue; */display: flex;}.prd-left{height: 150px;width: 150px;position: relative;}.prd-left img{height: 150px;width: 150px;background-color: rgb(251, 249, 246);}.prd-left .disc{width: 50px;height: 50px;border-radius: 50%;background-color: sandybrown;color: white;line-height: 50px;text-align: center;position: absolute;right: 10px;bottom: 10px;}.prd-right{height: 150px;width: 180px;}.subox2p1{font-size:16px;}.subox2p2{color: red;}.subox2p3{font-size: 13px;color: grey;}.subox2p4{height: 25;color: white;background-color: red;line-height: 25px;text-align: center;}.subox2p2 span{font-size: 25px;}.list{height: 160px;width: 240px;margin-top: 20px;}.title{width: 240px;height: 50px;display: flex;justify-content: space-between;}.item{width: 240px;height: 80px;display: flex;}.item-left img{width: 60px;height: 60px;}.item-right{width:160px ;height: 80px;}.item-right .item-right-bottom{width: 100px;height: 80px;display: flex;justify-content: space-between;}style>head><body><div class="out"><div class="left"><img src="img/3551973afb9d667529a2b0ff1d10485b.jpg" alt="">div><div class="mid"><div class="mid-top"><span>今日特价span><span class="span1">查看全部>span>div><div class="mid-bottom"><div class="prd"><div class="prd-left"><img src="img/6d07d4a90abe065daf453beb37534cd7.png" alt="" class="subox1i1"><div class="disc">8.8折div>div><div class="prd-right"><p class="subox2p1">女士精梳全棉T恤p><p class="subox2p2">限时价 ¥<span>43.1span>p><p class="subox2p3"><del>¥49del>p><p class="subox2p4">立即抢购p>div>div><div class="prd"><div class="prd-left"><img src="img/ed7ddda3c952401a747eb5ea9e7eef58.png" alt="" class="subox1i1"><div class="disc">8.8折div>div><div class="prd-right"><p class="subox2p1">男士清凉牛仔裤p><p class="subox2p2">限时价 ¥<span>169span>p><p class="subox2p3"><del>¥199del>p><p class="subox2p4">立即抢购p>div>div><div class="prd"><div class="prd-left"><img src="img/ed7ddda3c952401a747eb5ea9e7eef58.png" alt="" class="subox1i1"><div class="disc">8.8折div>div><div class="prd-right"><p class="subox2p1">男士清凉牛仔裤p><p class="subox2p2">限时价 ¥<span>169span>p><p class="subox2p3"><del>¥199del>p><p class="subox2p4">立即抢购p>div>div><div class="prd"><div class="prd-left"><img src="img/6d07d4a90abe065daf453beb37534cd7.png" alt="" class="subox1i1"><div class="disc">8.8折div>div><div class="prd-right"><p class="subox2p1">女士精梳全棉T恤p><p class="subox2p2">限时价 ¥<span>43.1span>p><p class="subox2p3"><del>¥49del>p><p class="subox2p4">立即抢购p>div>div> div>div><div class="right"><div class="list"><div class="title"><span>量贩囤货span><span class="p2">全部>span>div><div class="item"><div class="item-left"><img src="img/c518ce0acbb71dba6e186e1e2d845ef8.png" alt="">div><div class="item-right"><span style="font-size: 14px;">3盒装 韩国制造span><div class="item-right-bottom"><span style="font-size: 18px;color: red;"><b>¥55b>span><img src="./img/love.jpg" alt="" style="height:30px;">div>div>div><div class="item"><div class="item-left"><img src="img/0c5b29ebae99dabe4c1036c83a99ecdc.png" alt="">div><div class="item-right"><span style="font-size: 14px;">严选.颐和园组合茶span><div class="item-right-bottom"><span style="font-size: 18px;color: red;"><b>¥55b>span><img src="./img/love.jpg" alt="" style="height:30px;">div>div>div>div><div class="list"><div class="title"><span>今日特价span><span class="p2">全部>span>div><div class="item"><div class="item-left"><img src="img/f8fcc85a87e1bcb9d3bcf77cf06ef796.png" alt="">div><div class="item-right"><span style="font-size: 14px;">超薄婴儿拉拉裤学span><div class="item-right-bottom"><span style="font-size: 18px;color: red;"><b>¥55b>span><img src="./img/love.jpg" alt="" style="height:30px;">div>div>div><div class="item"><div class="item-left"><img src="img/cf86ce7b36cc90f5c9b1cbbc5eafd737.png" alt="">div><div class="item-right"><span style="font-size: 14px;">网易智造蒸沐足span><div class="item-right-bottom"><span style="font-size: 18px;color: red;"><b>¥55b>span><img src="./img/love.jpg" alt="" style="height:30px;">div>div>div>div>div>div>body>
html>
8.17
JS(JavaScript)，解释型脚本语言，运行在浏览器、处理网页上行为(动作)
JS书写位置
标签的事件、script标签、外部文件
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><script src="./js/my.js">script>head><body><input type="button" value="点我" onclick="alert()"><script type="text/javascript">// 模态对话框，会堵塞程序；只有结束该对话框后，程序才会继续往下执行//alert()script>body>
html>
注释
//单行、/* 多行 */
输出信息
alert()，弹出警告框
console.log()，控制台输出；浏览器调试窗口的控制台输出
document.write()，浏览器窗口输出；浏览器文档输出，即输出任意html的内容
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><script type="text/javascript">alert()console.log("hello js")//控制台输出document.write("啦啦啦啦
")//浏览器文档输出，即输出任意html的内容// 单引号、双引号均可用；但不能混用script>body>
html>
变量和函数定义
六种数据类型
string、number、boolean、object、function、symbol
三种对象类型
object、data、array
变量定义
js是弱类型语言，不必指定类型，通用var或let
var i=10;
var s=‘abc’
var arr=[]，数组
var obj={}，对象；一个对象由一个或多个属性和值组成，根据键获取值
let a=5;
const pi=3.14; //常量 不可修改
组合使用变量
var b1={属性：[] }
var b2=[值,{对象}，值]
var与let的区别
var只有全局变量和函数变量，let还支持代码块局部变量
var可被重复定义，let不可以被重复定义
函数定义
参数无数据类型，函数返回值可无，需返回值就return
function 方法名(参数可有可无){…返回值可有可无}
事件
onclick ，点击事件
onchange ，内容改变事件，一般用于输入框；当离开框后，事件函数就被触发
onmouseover， 鼠标滑过事件，类似于hover
onload， 页面加载事件
onfocus ，获得焦点事件，一般用于输入框
onclick 点击事件
function代码在页面初始化时，不会被执行；只是会预处理，在被调用是执行
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">.box{width: 100px;height: 100px;background-color: red;display: none;}style>head><body><input type="button" value="显示" onclick="show()"><input type="button" value="隐藏" onclick="dishow()"><div class="box" id="b">div><script type="text/javascript">let box=document.getElementById('b')// function代码在页面初始化时，不会被执行；只是会预处理，在被调用是执行// 让div标签显示function show(){// 获取标签对象 document.getElementById // 通过id获取标签对象//let box=document.getElementById('b')//具有返回值，需要接收//访问标签属性与样式并设置样式box.style.display='block'}function dishow(){//let box=document.getElementById('b')box.style.display='none'}script>body>
html>
onchange 内容改变事件
DOCTYPE html>
<html><head><meta charset="utf-8"><title>点击添加title>head><body><input type="text" id="in" onchange="add()"><ul id='list' type="circle"><li>Javali><li>HTML li>ul><script type="text/javascript">function add(){let text=document.getElementById("in")if(text.value==""){alert("添加不能为空")}else{let list=document.getElementById('list')text.value="";//加入后清空输入框里的内容}}script>body>
html>
onmouseover 鼠标滑过事件
DOCTYPE html>
<html><head><meta charset="utf-8"><title>猜图游戏title><style type="text/css">#outer{background-image: url(./img/animal4.jpg);width: 600px;height: 600px;background-repeat: no-repeat;background-position: center;background-size: cover;}.box{width: 30px;height: 30px;float: left;}.box_color{background-color: cornflowerblue;}style>head><body><div id="outer">div><script type="text/javascript">let outer=document.getElementById('outer')let i=400while(i>0){let box=document.createElement('div')box.className='box box_color'outer.appendChild(box)i--;}outer.addEventListener('mouseover',(e)=>{debuggerlet box=e.targetconsole.log(box)//box.style.opacity=0;box.className='box'})script>body>
html>
onload 页面加载事件
onload属性，在文档对象加载完成后触发
onload通常使用于 < body> 元素中，用于在页面完全载入后执行指定的脚本(包括图片，脚本，css文件等)
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loadtitle>
<script>
function load()
{alert("页面已经载入！");
}
script>
head><body onload="load()">
<h1>Hello World!h1>
body>html>
onfocus 获得焦点事件
onfocus属性，在元素获得焦点时触发
onfocus 通常用于 < input>, < select>, 和 < a> 元素
onfocus 属性相反的属性事件为 onblur
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onfocustitle>
<script>
function setStyle(x)
{document.getElementById(x).style.background="yellow";
}
script>
head><body>
<p>当输入域获得焦点时setStyle函数被触发。该函数改变输入域的背景色p>
第一个名字: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
最后一个名字: <input type="text" id="lname" onfocus="setStyle(this.id)">
body>
html>
DOM操作
首先，获取标签对象
document.getElementById()，根据id获取标签，id是唯一的
document.getElementsByTagName()，根据标签名获取标签
document.getElementsByClassName()，根据class获取标签
document.querySelector()，根据选择器获取标签
getElements返回的是一个标签对象集合
DOCTYPE html>
<html><head><meta charset="utf-8"><title>获取对象标签title>head><body><div id="box1">div><div class="box">div><div class="box">div><script type="text/javascript">//document.getElementById()，根据id获取标签let box1=document.getElementById('box1')console.log("根据id获取标签对象")console.log(box1)//document.querySelector()，根据选择器获取标签let box2=document.querySelector('#box1')console.log("根据选择器获取标签对象")console.log(box2)//document.getElementsByTagName()，根据标签名获取标签let boxs=document.getElementsByTagName('div')console.log("根据标签名获取标签对象")console.log(boxs)// getElements返回的是一个标签对象集合//可取其中的某一个、也可遍历console.log("取标签对象集合其中一个");console.log(boxs[0]);console.log("遍历标签对象集合");for(let i=0;i<boxs.length;i++){console.log(boxs[i])}// document.getElementsByClassName()，根据class获取标签let boxs2=document.getElementsByClassName('box')console.log("根据class获取标签对象")console.log(boxs2);script>body>
html>
改变标签的样式、内容、属性
style.xxx，设置或读取样式
innerText，设置或读取标签的文本内容
innerHTML，设置或读取标签的所有子标签
value，读取或设置输入框的内容(input)
style.xxx、innerText、innerHTML
标签的样式名称在css中用-连接多个单词，如background-color
在js中用驼峰命名，如backgroundColor
innerText改标签的文字内容，改标签的文字内容，将原来标签有的文字内容给覆盖掉
innerHTML改变标签的子标签，也会将原来标签有的值给覆盖掉
若向保留原有的标签属性值：对象.innerText+=新内容、对象.innerHTML+=新内容
DOCTYPE html>
<html><head><meta charset="utf-8"><title>改变标签的样式或内容title><style type="text/css">#box{width: 100px;height: 100px;background-color: red;position: relative;}style>head><body><input type="button" value="修改标签的样式与内容" onclick="change()"><div id="box">fsdgdxfghdiv><script type="text/javascript">function change(){// style.xxx设置或读取样式// innerText 设置或读取文本内容//innerHTML 设置或读取子标签内容//value 设置或读取输入框的内容let box=document.getElementById('box')//标签的样式名称在css中用-连接多个单词，如background-color//在js中用驼峰命名，如backgroundColor//改属性box.style.backgroundColor='blue'box.style.width='200px';box.style.height='200px';box.style.left='500px';box.style.top='200px';//innerText 改标签的文字内容//改标签的文字内容，将原来标签有的文字内容给覆盖掉//box.innerText="JS改变内容"//box.innerText+="JS改变内容" 追加内容，确保之前的未被覆盖box.innerText+="JS改变内容"box.style.color='white'// 改变标签的子标签 会将原来标签有的值给覆盖掉//box.innerHTML='p1
p2
'//box.innerHTML+='p1
p2
' 追加内容box.innerHTML+='p1
p2
'}script>body>
html>
value 读取或设置输入框的内容
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><input type="button" value="读取输入框的值" onclick="read()"><input type="button" value="输入框赋值" onclick="setValue()"><br><input type="text" id="txt1" /><script type="text/javascript">let txt1=document.getElementById('txt1')function read(){console.log(txt1.value)}function setValue(){//new Date() 创建日期对象txt1.value=new Date;}script>body>
html>
加法器
NaN，Not a Number， 有时数字运算方法不能返回数字时，就可能返回NaN
isNaN()方法，可以判断一个变量是否是数字
undefined，当一个变量未定义，它就是undefined
debugger，断点调试
DOCTYPE html>
<html><head><meta charset="utf-8"><title>加法器title><style type="text/css">span{cursor:pointer;font-size: 25px;}style>head><body><input type="text" id="op1"> + <input type="text" id="op2"> <span onclick="sum()">=span><input type="text" id="sum"><script type="text/javascript">function sum(){//断点 debugger//debugger//parseInt() 把字符串转换为int，默认转成10进制//+ 对字符串为拼接、对数字为相加let op1=document.getElementById("op1");let op2=document.getElementById("op2");let valuesum=document.getElementById("sum")//valuesum.value=parseInt(op1.value)+parseInt(op2.value)valuesum.value=add(parseInt(op1.value),parseInt(op2.value))//isNaN(value) 返回值：true、false//isNaN 判断是否是个数字 'abc123'返回true；'123'返回falseif(isNaN(valuesum.value)){valuesum.value="输入有误"}// 若什么都不写，返回 NaN(undefined 未定义)}function add(v1,v2){return v1+v2}script>body>
html>
改变标签的属性
obj.xxx
DOCTYPE html>
<html><head><meta charset="utf-8"><title>修改标签的属性title><style type="text/css">#pic{width: 200px;}style>head><body><input type="button" value="修改图片" onclick="chaPic()"><img src="./img/boy.jpg" alt="" id="pic"><script type="text/javascript">let i=0;let imgs=['img/animal1.jpeg','img/animal2.jpg','img/animal3.gif','img/animal4.jpg']function chaPic(){let pic=document.getElementById('pic');//修改标签属性pic.src=imgs[(i++)%4];}//setInterval() 定时器函数，单位毫秒// 第一个参数是要执行的方法//第二个参数是定时时间，单位毫秒setInterval(()=>{chaPic()},2000)script>body>
html>
setInterval() 定时器函数，单位毫秒，第一个参数是要执行的方法，第二个参数是定时时间，单位毫秒
setInterval回调函数
setInterval(function(){},500) 等价 setInterval(()=>{},500)，返回一个定时器对象 clearInterval(定时器对象) 参数是定时器的返回值
clearInterval(定时器对象)，清理定时器对象，参数是定时器的返回值
setInterval()与clearInterval()
DOCTYPE html>
<html><head><meta charset="utf-8"><title> 动画效果title><style type="text/css">#box{width: 100px;height: 100px;background-color: red;position: relative;}style>head><body><div id="box">div><script type="text/javascript">let i=0let box=document.getElementById("box")// setInterval回调函数setInterval(function(){},500)// setInterval(()=>{},500) 返回一个定时器对象//清理定时器对象 clearInterval(定时器对象) 参数是定时器的返回值let b=setInterval(()=>{i+=50//box.style.left 读取不到因此需要自己计数，自己赋值box.style.left=i+"px";if(i>=500){clearInterval(b)//到500px结束}},1000)script>body>
html>
setInterval()与setTimeout()
setTimeout()
setTimeout()，是一个全局函数。在浏览器的window对象和Node.js中都可以直接使用，它的作用是在指定的延迟后执行一次回调函数
setInterval()
setInterval，也是一个全局函数。同样在浏览器的window对象和Node.js中都可以直接使用，它的作用是每隔指定的时间间隔就执行一次回调函数，直到使用clearInterval函数取消
setInterval()与setTimeout()区别
执行次数不同
setTimeout的本质是延迟执行，只执行一次，一般用于延迟指定的时间后执行一次回调函数；
setInterval的本质是定时执行，会不断重复执行，直到取消
执行频率不同
setTimeout是在指定的延迟后执行回调函数，只执行一次
setInterval则是每隔指定的时间间隔就执行一次回调函数，直到取消
实际应用不同
setTimeout一般用于需要延迟执行的场合，例如动画效果的延迟、按钮的防抖等setInterval一般用于需要定时执行的场合，例如轮播图的切换、时钟的更新等
广告轮播图
DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>广告轮播图title><style type="text/css">#box{width: 600px;height: 600px;margin: auto;position: relative;}#pic{width: 600px;height: 600px;}#list li{float: left;margin: 20px;cursor: pointer;font-size: 30px;}#point{position: absolute;right: 0;bottom:0;}span{display: block;width: 40px;height: 40px;text-align: center;line-height: 40px;font-size: 25px;color: white;background-color: coral;border-radius: 50%;cursor: pointer;}#left{position: absolute;left: 0;top: 50%;}#right{position: absolute;right:0;top: 50%;}.active{color: red;}style>head><body><div id="box"><img src="./img/boy.jpg" alt="" id="pic"><div id="point"><ul id="list" ><li>li><li>li><li>li><li>li>ul>div><span id="left" onclick="page(-2)"><span><span id='right' onclick="page(0)">>span>div><script type="text/javascript">let i=0;let imgs=['img/animal1.jpeg','img/animal2.jpg','img/animal3.gif','img/animal4.jpg']let lis=document.getElementsByTagName('li')let pic=document.getElementById('pic')//setInterval() 定时器函数，单位毫秒// 第一个参数是要执行的方法//第二个参数是定时时间，单位毫秒//清除之前变化的点，为再次变化点做铺垫function clearPionter(){for(let j=0;j<lis.length;j++){lis[j].className=""}}function chaPic(){//修改标签属性let index=(i++)%4pic.src=imgs[index];lis[index].className="active"//为该对象添加一个class属性值}setInterval(()=>{clearPionter()chaPic()},3000)// 监听每一个li,若放在某个li上则触发事件for(let a=0;a<lis.length;a++){//事件需要赋值函数//事件可传入可获取当前值//给标签添加自定义属性n,用来记录标签序号//onmouseover这是个事件，只有在触发的时候才会执行lis[a].n=alis[a].onmouseover=()=>{//清除之前变化的点，为再次变化点做铺垫clearPionter()pic.src=imgs[i=a]lis[i].className="active" //停留轮翻图时间的*2}}function page(b){clearPionter()i=i+bconsole.log(i)if(i<0){i=imgs.length-1;}let index=(i++)%4pic.src=imgs[index];lis[index].className="active" //为该对象添加一个class属性值}script>body>
html>
8.18
增加和删除标签
-
document.createElement(标签名)， 创建标签对象，参数是标签名
-
document.createTextNode(文字内容) ，创建标签的文字内容，参数是文字内容
-
父标签对象.appendChild(child) ，添加子标签，child要添加标签对象、文本内容对象
-
父标签对象.insertBefore(新标签，子标签[插入位置])
第一个元素是插入的新标签，第二个元素是父类已存在的子标签，即将新元素插入该子标签位置之前
-
父标签对象.removeChild(子标签)，删除父标签中的子标签
-
标签.remove()，删除标签自己
document.createElement(标签名)
<script type="text/javascript">
//创建标签对象 document.createElement(标签名)
let box1=document.createElement('div')//返回一个空的新的div标签对象
script>
document.createTextNode(文字内容)
<script type="text/javascript">
//创建标签的文本对象document.createTextNode(文本内容)
let txtNode=document.createTextNode('int')//文本内容可以是，数字、字符串等
script>
父标签对象.appendChild(child)
<script type="text/javascript">
//把文本对象对象添加到容器中对象.appendChild(文本对象/标签对象)，即在innerHTML后面追加
//txtNode是一个文本对象、box1是一个div标签对象、outer是一个div标签对象
box1.appendChild(txtNode) //把文本对象放入box1的div标签对象中
outer.appendChild(box1)//把box1的div标签对象放入outer的div标签对象
script>
父标签对象.insertBefore(新标签，子标签[插入位置])
<script type="text/javascript">
//父对象.insertBefore(新标签,插入的位置[子对象，在它之前加])
//outer是一个div标签对象、box1是一个div标签对象、p2是outer中一个p子标签对象
outer.insertBefore(box1,p2)//将box1标签插入到outer标签的p2子标签之前
script>
父标签对象.removeChild(子标签)、标签.remove()
<script type="text/javascript">
//删除容器的子标签，父对象.removeChild(子标签对象)
//outer是一个div标签对象、p1是outer中一个p子标签对象、p2也是一个p标签对象
outer.removeChild(p1) //删除outer标签中的p1子标签
//删除标签对象自身，标签对象.remove()
p2.remove() //删除p2标签
script>
代码用法
存在两个触发事件
新增标签：在容器第二个p标签之前，插入一个创建属性class=box的div，该div中添加了一个文本标签
删除标签：删除两个p标签
DOCTYPE html>
<html><head><meta charset="utf-8"><title>增加、删除标签title><style type="text/css">#outer{width: 500px;height: 500px;border: 1px solid red;overflow: scroll;/* 超出范围之后的处理方式hidden:不显示scroll: 超出后滚动条*/}.box{width: 100px;height:100px;border: 1px solid red;/* float: left;margin: 10px; */}style>head><body><input type="button" value="新增标签" onclick="add()"><input type="button" value="删除标签" onclick="del()"><div id="outer"><p id="one">第一个p标签p><p id="two">第二个p标签p>div><script type="text/javascript">let i=1;//设置全局变量let outer=document.getElementById("outer")let p1=document.getElementById("one")let p2=document.getElementById("two")function add(){//创建对象[标签与文本]// 创建标签对象document.createElement(标签名)let box1=document.createElement('div')box1.className='box'//给创建div标签,添加一个class:对象.className赋值//创建标签的文本对象document.createTextNode(文本内容)let txtNode=document.createTextNode(i++)//将对象添加至容器(标签)，即在innerHTML后面追加对象//把文本对象、标签对象添加到容器中，对象.appendChild(文本对象/标签对象)box1.appendChild(txtNode)//将对象插入至容器指定位置//父对象.insertBefore(新标签,插入的位置[子对象，在它之前加])outer.insertBefore(box1,p2) //在第二个p标签前面插入}function del(){//删除容器的子标签，父对象.removeChild(子标签对象)outer.removeChild(p1)//删除标签对象自身，标签对象.remove()p2.remove()}script>body>
html>
标签的遍历
在页面上，只要能得到任意一个标签，就可以通过兄弟、父子关系去访问到页面的所有标签
对象.parentElement ，获取该对象的父标签
对象.childNodes[] 子标签，获取该对象的子标签，且返回值是一个对象数组，需要用序号访问，数组[index]
对象.firstElementChild， 获取该对象的第一个子标签
对象.lastElementChild，获取该对象的最后一个子标签
对象.nextElementSibling，获取该对象的下一个兄弟标签(弟弟，同级标签)
对象.previousElementSibling，获取该对象的上一个兄弟标签(哥哥，同级标签)
包含文本对象
children[] 子标签，子标签是数组，需要用序号访问
firstChild
lastChild
nextSibling
previousSibling
代码用法
DOCTYPE html>
<html><head><meta charset="utf-8"><title>遍历标签title><style type="text/css">.outer{width: 300px;height: 300px;border: 1px solid red;margin: auto;}.mid{width: 200px;height: 200px;border: 1px solid green;margin: auto;}.inner1,.inner2{width: 50px;height: 50px;border: 1px solid blue;margin: auto;}style>head><body><div class="outer">outer<div class="mid" id="mid">mid<div class="inner1">inner1div><div class="inner2">inner2div>div>div><script type="text/javascript">let mid=document.getElementById("mid")//获取父标签：对象.parentElementlet outer1=mid.parentElementconsole.log("获取mid父标签parentElement")console.log(outer1)//获取子标签： 对象.childrenlet inner=mid.childrenconsole.log("获取mid子标签children")console.log(inner)let inner2=mid.children[1]console.log("获取mid子标签第二个元素mid.children[1]")console.log(inner2)//获取第一个子标签： firstElementChildinner1=mid.firstElementChildconsole.log("获取mid第一个子标签firstElementChild")console.log(inner1)//获取最后个子标签： lastElementChildinner2=mid.lastElementChildconsole.log("获取mid最后个子标签astElementChild")console.log(inner2)//获取兄弟姐妹//获取下一个nextElementSiblinginner2=inner1.nextElementSiblingconsole.log("获取inner1下一个nextElementSibling")console.log(inner2)//获取上一个previousElementSiblinginner1=inner2.previousElementSiblingconsole.log("获取inner1上一个previousElementSibling")console.log(inner1)script>body>
html>
事件
在事件方法中用event对象获取事件对象，它的target属性就是触发事件的标签
事件的写法：
- 在标签中用onXXXX事件名上写一个方法
- 用标签对象的οnclick=function(){}，或者标签对象的οnclick=()=>{}
- 用addEventListener()方法绑定事件
当对一个button按钮添加onclick()事件
在标签中用onXXXX事件名上写一个方法
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><input type="button" value="按钮事件" onclick="print()"><script type="text/javascript">function print(){//event.target，直接获取触发事件的对象console.log(event.target)}script>body>
html>
用标签对象的οnclick=function(){}
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><input type="button" value="按钮事件" id='btn'><script type="text/javascript">let btn=document.getElementById('btn')btn.onclick=function(e){//e就是事件对象console.log(e.target)//绑定事件用function，可以通过this获取触发事件的对象对象console.log(this)}script>body>
html>
标签对象的οnclick=()=>{}
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><input type="button" value="按钮事件" id='btn'><script type="text/javascript">btn.onclick=((e)=>{//e就是事件对象console.log(e.target)})script>body>
html>
用addEventListener()方法绑定事件
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><input type="button" value="按钮事件" id='btn'><script type="text/javascript">let btn=document.getElementById('btn')btn.addEventListener('click',(e)=>{console.log(e.target)})script>body>
html>
使用对象.事件=函数：同一个对象只能绑定一个事件，若同一个对象多次绑定同一事件，则后面会把前面覆盖
使用对象.addEventListener(事件，函数)方法可以同个对象绑定多个
事件的冒泡机制
当一个标签触发某个事件时，它的所有的父标签也会以此触发这个事件，实际代码中有时候绑定事件时会绑在父标签上
代码用法
点击”编辑“按钮， 获取此行的文字内容， 并控制台打印；
点击”删除“按钮，删除当前行；
对行上的按钮添加对应的触发事件
这样不利于批量触发事件，且后续新增的行无法被事件触发；
因此一般采用事件冒泡机制，将触发事件绑在不变的父标签上，
修改和删除按钮事件，利用事件冒泡机制把事件绑定在table标签上
动态表格增删修
DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态表格增删修title><style type="text/css">table{border-collapse: collapse;margin-top: 10px;}th,td{width: 150px;height:30px;text-align: center;line-height: 30px;border: 1px solid black;}style>head><body><input type="text" id="name" placeholder="姓名"><input type="text" id="sex" placeholder="性别"><input type="number" id="age" placeholder="年龄"><input type="button" value="新增" id='add'><table id='tbl'><tr><th>姓名th><th>性别th><th>年龄th><th>选项th>tr>table><script type="text/javascript">let addBtn=document.getElementById("add")let tbl=document.getElementById("tbl")//新增按钮事件addBtn.addEventListener("click",()=>{//获取input框的valuelet name=document.getElementById("name").valuelet sex=document.getElementById("sex").valuelet age=document.getElementById("age").value//table追加一行内容tbl.innerHTML+=""+""+name+" "+""+sex+" "+""+age+" "+""+""+"" +" "+" "})//修改和删除按钮事件，利用事件冒泡机制把事件绑定在table标签上tbl.addEventListener('click',(e)=>{let btn=e.target//=== 全等 类型与值均相等；//== 相等 值相等就可if(btn.value=='修改'){let tdAge=btn.parentElement.previousElementSiblinglet tdSex=tdAge.previousElementSiblinglet tdName=tdSex.previousElementSiblingconsole.log(tdName.innerText+','+tdSex.innerText+','+tdAge.innerText)//修改代码}else if(btn.value=='删除'){//删除按钮btn.parentElement.parentElement.remove()}})script>body>
html>
function(){}
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><input type="button" value="按钮事件" id='btn'><script type="text/javascript">let btn=document.getElementById('btn')btn.onclick=function(e){//e就是事件对象console.log(e.target)//绑定事件用function，可以通过this获取触发事件的对象对象console.log(this)}script>body>
html>
[外链图片转存中…(img-7NUlBLgO-1692940449972)]
标签对象的οnclick=()=>{}
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><input type="button" value="按钮事件" id='btn'><script type="text/javascript">btn.onclick=((e)=>{//e就是事件对象console.log(e.target)})script>body>
html>
用addEventListener()方法绑定事件
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><input type="button" value="按钮事件" id='btn'><script type="text/javascript">let btn=document.getElementById('btn')btn.addEventListener('click',(e)=>{console.log(e.target)})script>body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
