html+css
1.html基础
1.2 标签类别【面试题目】
块级元素 一个独占一行
div p 文本标签 h1-h6 标题 form 表单标签 header 头部 nav 导航栏 aside 侧边栏 footer 底部 body 生体行内元素 多个标签放一行
a 跳转标签 span 文本标签 img 图片标签 strong 加粗 i 斜体文字标签 input 输入框类型 button 按钮
2.css基础
css：修饰html，美化默认标签。
2.1 盒模型
盒模型: 页面中的所有盒子，每个盒子都是一个独立模型
组成部分：定位+外边距+边框+内边距+内容宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型</title>
<style>
* {
margin: 0;
padding: 0;
box-shadow: none;
}
div {
width: 300px;
height: 300px;
/* 定位浏览器左上角 向右200px 向下150px */
/* margin-left: 200px;
margin-top: 150px; */
position: relative;
left: 200px;
top: 150px;
/* 盒子外边距 50px */
margin: 50px;
padding: 3.6px 12px;
/* 盒子边框实线 圆角*/
border: 2px solid blue;
border-radius: 10px;
/* 浅蓝色背景 */
background-color: #1d82fe;
/* 文字深蓝色 */
color: blue;
/* 文字居中 */
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div>登录</div>
</body>
</html>2.2 定位 浮动
子绝父相
居中
减去自己盒子一半
left: calc(50% - 648px);浮动：父盒子确定宽高，所有的子盒子都可以浮动，浮动后的盒子会变为行内盒子（现在利用flex)
浏览器默认字体16px----最小12px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东</title>
<style>
/* 重置浏览器默认样式 */
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 36px;
background-color: #fff;
position: relative;
}
.center-header{
width: 1296px;
height: 36px;
position: absolute;
top:0;
/* 1.css中计算 calc(xxx - xxx) */
/* left:calc(50% - 776px); */
/* 绝对定位 先移动 50% */
left:50%;
/* 外边距调整 向相反方向减掉一半 */
/* margin: 0 0 0 -776px; */
margin-left: -648px;
}
/* 子盒子相对父盒子定位 子绝父相 relative absloute fixed */
/* 子盒子 绝对定位 父盒子 相对定位 */
.left{
width: 385px;
height: 36px;
float: left;
}
.right{
float: right;
width: 724px;
height: 36px;
}
.menu{
float: left;
width: 33%;
height: 36px;
text-align: center;
line-height: 36px;
color: #505259;
font-size: 10px;
}
.login{
color: #f44;
}
ul {
margin: 0;
width: 724px;
height: 36px;
}
ul li {
height: 36px;
margin-right: 20px;
list-style: none;
display: inline-block;
text-align: center;
line-height: 36px;
font-size: 12px;
color: #505259;
}
.spacer {
display: inline-block;
width: 1px;
height: 10px;
background-color: black;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="header">
<!-- 居中的大盒子 -->
<div class="center-header">
<!-- 左菜单 -->
<div class="left">
<div class="menu">中国大陆版 - 重庆</div>
<div class="menu">您好，<span class="login">请登录</span> ，免费注册</div>
<div class="menu">切换至企业版</div>
</div>
<!-- 右菜单 -->
<div class="right">
<ul>
<li>购物车
<span class="spacer"></span>
</li>
<li>我的订单
<span class="spacer"></span>
</li>
<li>我的京东
<span class="spacer"></span>
</li>
<li>企业采购
<span class="spacer"></span>
</li>
<li>商家服务
<span class="spacer"></span>
</li>
<li>网站导航
<span class="spacer"></span>
</li>
<li>手机京东
<span class="spacer"></span>
</li>
<li>网站无障碍</li>
</ul>
</div>
</div>
</div>
</body>
</html>3. javascript基础
带屏幕应用 js都可以实现
数据类型 5基1引
运算符 逻辑运算符 $$ || !
算数运算符 + - * / % ++ --、
赋值运算夫 += -= *= %=
比较运算 < > >= <= == === != !==
三目运算 条件？表达式1：表达式2
函数封装 调用 回调 递归
浏览器特性： BOM DOM
Ajax Fetch
比较运算符
=== 全等 数值相等 类型相同
== 数值相等
'100' == 100 //true '100'转换为数字类型 '100' === 100 //false逻辑运算
&& 两边为真才为真
左侧为假 0 && -1// 0 不会运行右侧
如果左侧为真 1 && 2 //2 结果为右侧表达式的值
值：非0 和非空
|| 一个为真 表达式为真
! 取反
- 优先级
3.1. js的使用
内嵌式
js写到html文件中
任何位置利用script中写js【位置不同可以报错，dom获取出错】---推荐写在最后面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> console.log('hello world') document.write('hello world') alert('hello world')// 弹窗输出 prompt('hello world')// 获取数据 </script> </body> </html>外联式
单独创建js文件，引入html文
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box">我是一个盒子</div> <script src="./02-js引入外联式.js"></script> </body> </html>3.2 变量的定义使用
var：具有变量提示【先使用后定义】
- 会将变量定义提升到最前面
console.log(num) //undefined var num = 100var num console.log(num) num = 100同一变量重复定义
var num = 100 console.log(num) // 100 var num = 200 console.log(num) // 200
let：先定义后使用
const：定义常量
- 先定义后用
- 不可重新赋值，不可改【应用数据类型可以更改属性值】
- 变量名采用大驼峰或全字母大写
变量命名规则：由字母，数字，下划线_，$【数字不可开头,多个单词采用小驼峰】
var 变量名=初始值请说明var let const 的区别【面试题】
- 会将变量定义提升到最前面
console.log(num) //undefined var num = 100var num console.log(num) num = 100同一变量重复定义
var num = 100 console.log(num) // 100 var num = 200 console.log(num) // 200
let：先定义后使用
const：定义常量
- 先定义后用
- 不可重新赋值，不可改【应用数据类型可以更改属性值】
- 变量名采用大驼峰或全字母大写
3.2. 常见数据类型【5基1引】
基本数据类型
number 数字
string 字符串 ‘ ‘ “ ”
Boolean 布尔 true false
null 空 ’null' 【null是基本数据类型 但是typeof null为object,这是因为在js存储中对象是以000开头的，而null是一个空，相当于全0，所以typeof null也是object】
undefined 未定义 undefined
long 长整数
<script> let num = 100 let str = 'hello world' let b = true let n = null let u = undefined console.log(num,str,b,n,u) // 100 'hello world' true null undefined console.log(typeof num,typeof str,typeof b,typeof n,typeof u) </script>引用数据类型
Object 对象
-- object
-- array数据 [元素1,元素2]
-- Function 函数 function 函数名()
-- RegExp 正则(检验字符在是否满足规则) ’/^1[3-9] [0-9] {9}$/‘
-- Data 日期类型（包含时区）
- 实例化定义 new Objict() new Array()
- 字面量定义 {} [] function /规则/
3.3 对象操作
对象： 小美 一个具象事务。
类：具有相同属性的一些整体（人类，车类）。
对象特征：属性，行为
<script>
let user = {
name: '小美',
color: '黑色',
sno: '2222001',
eat: function () {
return '吃饭'
}
}
console.log(`我的名字是：${user.name}，我的头发颜色是：${user.color}，我的学号是：${user.sno},我在${user.eat()}`);
</script>数组操作【重要】
数据列表
let arr = new Array(1,2,3) // [1,2,3]
let arr = [1, 2, 3] // [1, 2, 3]
let arr = [1, '你好', null]
let arr = [{name: '小美'}, {name: '小赵'}]- 使用数据
数字名[下标|索引]let arr = [{name: '小美'}, {name: '小赵'}]
arr[1].name // 小赵数组方法
数字排序
a - b => 从小到大
b - a => 从大到小
let arr = [{price: 100}, {price: 200}, {price: 300}]
arr.sort((a, b) => b.price - a.price)
console.log(arr)非数字排序
let arr2 = ['2','a', 'A', '?']
arr2.sort() // 不传数据
console.log(arr2)push 末尾添加元素
arr.push(添加元素1, 添加元素2)pop 末尾删除元素
arr.pop()unshift 头部添加
arr.unshift(添加元素)shift 头部删除
arr.shift()splice 任意位置曾 删 改
arr.splice(操作下标开始下标，删除个数，新增元素1，新增元素2)let arr = [1, 23, 45, 66] // 索引为3修改为1000 arr.splice(3, 1, 1000) // 删除23 arr.solice(1, 1) // 在45添加100，200 arr.splice(2, 0, 100, 200) => 索引为2开始加reverse() 数组内容反转
4.数字内置方法
toFixed(3) 保留小数位数 四舍五入【会转换为字符串】
let num = 2.3333 num.toFixed(2) // 2.33parseInt(3.55) 取整 3
parseInt('22.3') // 22parseFloat() 将其他数据转换为
parseFloat('22.3') // 22.3Number('3.55') 强制数据为数字 3.55
Number('3,33') // 3.33
5.数学方法 Math
6.流程控制语句
6.1判断语句
- 但分支
if(条件){ // 非0 或非空
表达式1
}else{
表达式2
}if(条件){
表达式1
}else if(条件){
表达式2
}else {
表达式
}let num = 90
if(num < 60 ) {
document.write('差')
}else if(num >= 60 && num < 80) {
document.write('良')
}else if(num >= 80 && num < 90) {
document.write('中')
}else {
document.write('优')
}- 多分支
switch(变量) {
case 1: 表达式1;break;
case 2: 表达式2;break;
default: 表达式;
}6.2循环语句
- for
循环三要素： 循环变量 循环条件 变量更新 循环体
for(let i = 0; i < 100; i++) {
// 循环次数1000
}while
do...while
7数据类型转换
隐式转换: 在数据参与运算中 数据自动发生数据类型转换
- 数字和字符串
- 字符串与数字 相加 全部拼接为字符串
- 字符串与数字 相减 字符串全部站换为数字
- 字符串与数字 相乘 除 字符串全部转换为数字
10 + '10' // '1010'
'10' + 10 // '1010'
'10' - 10 // 0
10 - '10' // 0
10 * '10' // 100- 数字和布尔
- 布尔转换为数字
true + 1 // 2
1 + true // 2
true == 1 //true
flase == 0 //true- 特殊隐式转换[面试]
0 == '0' //true
'' == null //false
'' == undefined // false
null == undefined // true 值相同 类型不- 案例
let a = '5';
let b = 3;
let result = a + b; // '53'
console.log(result);let x = false;
let y = 1;
let result = x + y;
console.log(result); // 1let str = 'Hello' - 1;
console.log(str); // NaNlet num = 10;
let str = '10';
let result = num == str;
console.log(result); truelet arr = [1, 2, 3];
let result = arr + 2;
console.log(result);强制转换 通过调用方法 转换数据类型 parseInt()
8.事件三要素
用户行为
事件源：哪一个DOM触发这个事件
事件类型：
鼠标：点击(click) 双击(dbclick) 移入(mouseover--支持冒泡|mouseenter) 移出(mouseleave--支持冒泡|mouseout) 右键 滚动(scroll)
键盘：按下(keydown) 松开 (keyup) 按下不松(keypress)
input: 聚焦 输入 改变change
焦点： 获得 (focue) 失去(blur)
窗口(document)：resize改宽高 load页面资源加载完成
事件执行函数
- 事件监听addEventListener()
<div class="box" id="box" name="box4">点</div>
<input type="text" class="inp"> // 鼠标
const box = document.querySelector('.box')
box.addEventListener('click', () => {
alert('点击了')
})
// 键盘
const inp = document.querySelector('.inp')
inp.addEventListener('keydown', (e) => {
if(e.key === 'Enter') {
alert('回车')
}
})8.DOM操作【增删改查】
8.1DOM树
8.2获取DOM
<div> class="box" id="box" name="box4">点</div>通过id
const box1 = document.getElementById('box')通过类名(数组装，可获取多个)
const box2 = document.getElementsByClassName('box')通过标签(数组装，可获取多个)
const box3 = document.getElementsByTagName('div')通过name(数组装，可获取多个)
const box4 = document.getElementsByName('box4')H5提供
后代选择器 .box .list
父子选择器
const box = document.querySelector('.box') // 满足标签选择器第一个dom const box = document.querySelectorAll('.box') // 返回数组 满足的数组DOM
8.3.新增节点
- appenChild createElement
//1.创建一个节点
const divCode = docment.createElement('div')
//2.增加属性（id class）
dicvode.id = 'addBox'
// 加类名
dicvode.className('name')
dicvode.classList.add('name')
dicvode.style.background = 'red'
//3.添加内容
dicvode.innerHTML = '内容'
//4 追加节点
父节点.appenChild(dicvode)- innerHTML 获取节点内容
节点.innerHTML
// 增加节点
节点.innerHTML += '<div>新增节点</div>'8.4.删除DOM
节点.remove()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
th,
td {
border: 1px solid;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</thead>
<tbody>
<tr>
<td>小赵</td>
<td>18</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>小赵</td>
<td>18</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>小美</td>
<td>12</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>小王</td>
<td>23</td>
<td><button>删除</button></td>
</tr>
<script>
const buts = document.querySelectorAll('button')
// console.log(buts)
// buts.forEach((item) => {
// item.addEventListener('click', (e) => {
// const tr = e.target.closest('tr') // 获取最近的符合的祖先节点
// if(tr) {
// tr.remove()
// }
// })
// })
buts.forEach((item) => {
item.addEventListener('click', (e) => {
e.target. parentNode.parentNode.remove()
})
})
</script>
</tbody>
</table>
</body>
</html>8.4.DOM的样式操作
- 通过style操作
dom.style = 'color: #fff'
dom.styke.color = '#fff'
dom.style.backgroundColor = '#fff' // 小驼峰- 用过类名操作
dom.className = 'box' // 换类名,去除以前的
dom.classlist.add('list')// 新增类名
dom.classList.remove('list')// 删除
dom.classList.toggle('list') // 有去除 ，无加上开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
border: 2px solid pink;
background-color: #fff;
}
.active {
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<button class="but">开关</button>
</div>
<script>
const box = document.querySelector('.box')
const but = document.querySelector('.but')
but.addEventListener('click', () => {
box.classList.toggle('active')
})
</script>
</body>
</html>8.5DOM表单数据获取
通过获取表单里面DOM 利用 dom.value获取数据
dom.checked // 选择状态 中true 否 false 单选框判断是否选中，判断输出
多选框通过与之对应数组，循环判断选中是否，输出数组
<input type="text" class="text" /> // 文本
<input type="number" /> // 数组
<textarea row="3" colls="20" />
<input type="radio" value="1"> 男 </input> // 多个单选框 要有相同name的属性
<input type="checkbox" value="0"> </input>
<select name="" id="">
<option value="12">重庆</option>
</select>
<button>
获取
</button>
<script>
let btnDom = document.getElementById('btn')
let nameInp = document.getElementById('name')
let ageInp = document.getElementById('age')
let signInp = document.getElementById('sign')
let genderInps = document.getElementsByName('gender');
btnDom.addEventListener('click',function(){
console.log('姓名是：',nameInp.value);
console.log('年龄是：',ageInp.value);
console.log('签名是：',signInp.value);
})
</script>8.6.DOM数组与DOM操作连用-商品数据加载
9.字符串内置方法
- substr(起始索引，截取个数)
截取字符串
let str = '你好啊，我是黄四郎'
str.substr(6,3) //黄四郎- substring((起始索引，终点索引)[ )
截取字符串
let str = '你好，我是黄四郎'
str.substring(6,9) //黄四郎- slice(起始索引，终点索引)
截取字符串
索引支持负数（）
let str = '你好，我是黄四郎'
str.slice(6,9) //黄四郎
str.slice(-3) //黄四郎- toLowerCase
转换为小写
- toUpperCase
转换为大写
- split
转化为数组 可以根据参数里面的值进行分割
let str = '你好，我是黄四郎'
str.split(',') // [你好,我是黄四郎]- charAt
根据索引获取字符
let str = '你好，我是黄四郎'
str.charAt(1) // 好- includes
看是否包含某个字符串， 是返回true 否 false
let str = '公平'
str.includes('公平') // true
str.includes('不公平')// false- indexof
查找某个字符 |子字符串的位置， 有返回第一次出现的索引 , 没有则返回 -1
- trim
取消字符串两边空格
10.Math 数学内置方法
abs
取绝对值
round
将一个数字四舍五入到最接近的整数。
console.log(Math.round(2.3)); // 输出 2
console.log(Math.round(2.7)); // 输出 3
console.log(Math.round(-2.3)); // 输出 -2
console.log(Math.round(-2.7)); // 输出 -3max
从一组数字中返回最大的值。
Math.max(num1, num2, num3)
// 也可以数组取最大值
let arr = [1,2,3,4]
Math.max(...arr) // 4min
从一组数字中返回最小的值。
random
生成一个介于
0和1之间的浮点数随机数。包含0和不包含1 一般配合Math.floor
// [N, M]
Math.floor(Math.random() * (M - N + 1)) + N
// 随机数组下标
Math.floor(Math.random() * arr.length)案例
//获取 55-196 的随机数
//获取四个随机字母 拼接成一个字符串并输出到页面【功能：生成验证码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(Math.floor(Math.random() * (196 - 55 +1 ) + 55))
let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 'g']
let str = ''
for(let i = 0; i < 4; i++) {
str += arr[Math.floor(Math.random() * arr.length)]
}
console.log(str)
</script>
</body>
</html>Math.floor(数字) 向下取整
Math.floor(22.99) // 22Math.ceil(数字) 像上取整
Match.ceil(23.00) //23Math.PI
11. window 内置顶级方法
- 定时器 setInterVal
每隔多少事件执行函数，第一次需要等xxx事件后执行
let id = setInterVal(执行函数，时间(毫秒)) // 开启
clearInterval(id) // 关闭- 延时器 setTimeout
let id = setTimeout(函数，时间)
clearTimeout(id) //关闭13.html5新增
13.2新增标签
13.2新增input的type值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- // 文本 -->
<input type="text" />
<!-- 时间 -->
<input type="date" />
<!-- 数字 -->
<input type="number" />
<!-- 颜色选择器 -->
<input type="color" />
<!-- 时间 -->
<input type="datetime-local" />
<!-- 月份 -->
<input type="month" />
<!-- 周 -->
<input type="week" />
<!-- 限制用户输入 -->
<!-- 电子邮件 -->
<input type="email" />
<!-- 范围 -->
<input type="range" />
</body>
</html>13.3.新增标签属性
<div aria-label="这个导航栏" />给标签添加数据，比如删除时添加id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 自定义属性 -->
<div data-id="1" data-name="小三">自定义数据</div>
<script>
const div = document.querySelector('div')
// 获取数据
console.log(div.dataset['id'])
console.log(div.dataset.id)
console.log(div.dataset.name)
// 修改
</script>
</body>
</html>- contenteditable 可编辑区文本区
<div contenteditable="true">123</div>- tabindex 光标顺序
更改tab 键切换光标顺序
<input tabindex="0">13.4.web存储 本地存储[storage]
数据存储 永远存在
数据删除 手动/代码
存储空间为5MB(容量还行)
123 => '123'
false=> 'false' => 结果不对了 非空字符串
null => 'null' 数据出错
undefined => 'undefined' 不等
obejct => 字符串 (数据转换失败 全部丢失)
Array => 字符串 (数据出差)
function => 字符串 (数据出差)
// 存储
localStorage.setItem('key', '数据') // 数据只可以时字符串 会将数字自动转化字符串
// 获取
localStorage.getItem('key') // 获取
// 改
localStorage.setItem('key', '数据') // key相同改，不同加
// 删除
localStorage.removeItem('key')
// 清除本地所有数据
localStorage.clear()- 存储复杂数据类型 需要转换为JSON字符串
JSON.stringify(obj) // 转换为JSON字符串JSON.parse(str) // 解析JSON<script>
let obj = {
name: '张山',
age: 18,
sex: [
{
id: 1,
name1: '李四'
}
]
}
//存必须转换为JSON字符串JSON.stringify(obj)
localStorage.setItem('obj', JSON.stringify(obj))
//取出来是JSON字符串{"name":"张山","age":18,"sex":"女"}，要转为对象
const str = localStorage.getItem('obj')
console.log(str);
console.log(JSON.parse(str))
</script>会话存在 数据存在 会话关闭 数据清除
网页打开时 会话存在 数据存在 浏览器关闭 会话关闭 数据清除
- 增删改查
// 存储
sessionStorage.setItem('key', '数据') // 数据只可以时字符串
// 获取
sessionStorage.getItem('key') // 获取
// 改
sessionStorage.setItem('key', '数据') // key相同改，不同加
// 删除
sessionStorage.removeItem('key')
// 清除本地所有数据
sessionStorage.clear()存储复杂类型
JSON字符串
// JSON对象
{
"key": "value",
"key1": "value1",
}
// JSON数组
"['1','2','3']"13.6.JSON的转换语法
- 将js转换为JSON字符串
JSON.stringfy(变量|数据)let arr = [{name: '123'}]
let str = JSON.stringify(arr) // "[{'name': '123'}]"- JSON转换为js对应数据类型
JSON.parse(变量|数据)JSON.parse(JSON.stringify(arr)) // 还原13.5.请谈谈你对浏览器数据存储的理解[面试题]
浏览器的常用存储可分为以下几种
1.cookie进行存储
存储空间为4KB(容量有限)，性能 最高
2.通过本地存储Storage进行存储
存储空间为5MB(容量还行) 性能居中
localStorage 性能相对session 低一些(数据一直存在) 永久存储
sessionStorage 性能高(数据自动清除)
3.通过indexDB进行存储
存储空间为250MB(容量大) 性能最差
14.视频标签video
播放视频
摄像头 实时视频展示
h5游戏
1.1video基本使用
<video src="视频地址" controls width="300"></video> // controls播放控制台1.2 video 的属性和方法
属性
src 视频路径
controls 播放控制台
loop 播放结束后，循环播放
autoplay 自动播放(必须静音)
muted 静音
paused 视频是否在播放 false在播放
方法
load() 重新播放
pause() 停止
play() 开始播放
currentTime 当前时间 属性
duration 总时间
1.3 重写哔哩哔哩视频播放案例
15 audio 音频标签
属性
src 视频路径
controls 播放控制台
loop 播放结束后，循环播放
autoplay 自动播放(必须静音)
muted 静音
方法
load() 重新播放
pause() 停止
play() 开始播放
currentTime 当前时间 属性
duration 总时间
16.svg canvas 级字体图标
svg：引入矢量图像 （不会应为缩放 变模糊）
canvas 网页画布（用户可以 点 线 面）
- 字体图标
既是图标 也是文字 ===矢量图
- 访问iconfont 官网
- iconfont 官网创建一个项目
- 查找图标 将图片添加到一个项目
- 将所有的图标字体文件下载
- 在自己网页中引入相应css
2.使用方式
1.在线使用
直接引用iconfont 的三方url 【不稳定 需要外网】
- 三种方式
1.Unicode
复制在线链接到代码 的style中使用
复制图标加入代码
<span> 图标唯一标识</span>
2. Font class（推荐）
复制css的链接到标签
复制属性唯一类名标识
<span class="iconfont 图标唯一标识"></span> //iconfont 提示我要用图标
3.本地使用 [缺点 加入新图标，需要重新下载]
将所有字体图标下载到本地
解压到项目文件改自己喜欢名字
需要的文件：iconfont.css + 所有的字体图标文件
其他用法和线上一致 Font class（推荐）
<link rel="stylesheet" href="./fonts/iconfont.css" />
<span class="iconfont icon-yonghurenzhengguanli ico">4.代码习惯
90%人用标签加入字体图标
- 字体格式
- .eot IE浏览器
- .ttf Windows ios系统
- .woff 网页浏览器兼容个数
- .woff2 网页浏览器兼容个数 升级版
- .svg 矢量图 的文字
- .otf 老版本浏览器
3.BOM对象-定位与三方定位
浏览器对象模型：操作浏览器的内置功能
3.1 history[浏览器的历史记录--前进后退刷新]
history.forward() 前进一页
history.blak() 后退一页
history.go(数字) 数字大于0前进几页 小于0后退几页 数字等于0刷新当前页
3.2 location[浏览器的地址信息]
href: 网页全路径 赋值可以跳转
port: 端口号
protocol: 协议
search: 参数
完整网络地址：协议：//域名(ip地址):端口号/访问的落地页？key=value&key2 = value
3.3 navigator[浏览器版本信息]
查用户端浏览器的版本 操作系统的位数 操作系统版本 用户位置【必须经过用户运行】
// 获取地址 地址失真
navigator.geolocation.getCurrentPosition(function (position) {
console.log(position)
console.log(position.coords.latitude)
console.log(position.coords.longitude)
}, function () {
console.log('获取失败')
})- 高级定位与三方地图的使用
三方地图定位 1天免费1000次
高德地图
百度地图
腾讯地图
高德地图使用
进入高德地图开方平台官网--注册实名认证
控制台==>应用管理==>添加应用/创建项目
添加应用 /创建项目
平台给应用的key 密钥
功能--jsApi
定位
路径规划：导航
天气查询
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "d0fab64e7f471e58cf4067aefbcea7f8",
};
</script>3.4 screen[浏览器的屏幕信息]
16.css选择器
1.1基本选择器
- 通配符选择器
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}元素选择器
ID选择器
类名选择器
群组选择器
.box1,
.box2{
}1.2 层次选择器
E + F 选择后一个兄弟
1.3 伪类选择器
1.3.1 动态伪类选择器
1.3.2 目标为类选择器
目标锚点
给盒子一个id = '123'
在路径后面加上#123,就跳到对应盒子位置
div {
background: #ccc;
width: 100%;
height: 500px;
/* none隐藏 block显示 */
display: none;
}
/* 当前 锚点 操作对应的盒子 */
div:target {
color: #f00;
border: 1px solid #f00;
display: block;
}<a href="#box1">网站首页1</a><a href="#box2">网站首页2</a><a href="#box3">网站首页3</a>
<div id="box1">内容1</div>
<div id="box2">内容2</div>
<div id="box3">内容3</div>document.querySelectorAll('div[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
console.log(this.getAttribute('href'))
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});1.3.3 结构伪类选择器
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:first-child | CSS2 | 匹配父元素的第一个子元素E。E元素必须是某个元素的子元素，最高是body.first-child必须是兄弟中的第一个 |
| E:last-child | CSS3 | 匹配父元素的最后一个子元素E。 |
| E:only-child | CSS3 | 匹配只有一个子节点的子元素。 |
| E:nth-child(n) | CSS3 | 匹配父元素的第n个子元素E。2n: 选中偶数节点 2n-1奇数节点 |
| E:nth-last-child(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
| E:first-of-type | CSS3 | 匹配同类型中的第一个同级兄弟元素E。 |
| E:last-of-type | CSS3 | 匹配同类型中的最后一个同级兄弟元素E。 |
| E:only-of-type | CSS3 | 匹配同类型中的唯一的一个同级兄弟元素E。 |
| E:nth-of-type(n) | CSS3 | 匹配同类型中的第n个同级兄弟元素E。 |
| E:nth-last-of-type(n) | CSS3 | 匹配同类型中的倒数第n个同级兄弟元素E。 |
| E:empty | CSS3 | 匹配没有任何子元素（包括text节点）的元素E。如果选中的元素中有代码有换行在里面（换行带了文本节点），会选不中。 |
1.3.4 否定伪类选择器
除了第s个元素外的E节点
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:not(s) | CSS3 | 匹配不含有s选择符的元素E。 |
1.3.5 伪元素
假的标签
first-letter
“::first-letter”用来选择文本块的第一个字母
first-line
“::first-line”用来匹配元素的第一行文本。
*::selection*
“::selection”是用来匹配鼠标选中的文本。
可以换背景，和字体颜色
****::before* *** ::after
“after”不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。
*::placeholder*
::placeholder 伪元素用于控制表单输入框提示符的外观
兼容语法：
input::-webkit-input-placeholder // chrome
input:-ms-input-placeholder // IE10+
input:-moz-placeholder // Firefox4-18
input::-moz-placeholder // Firefox19+
1.4 属性选择器
<div name="123">
</div>div[name='123']| 选择符 | 版本 | 描述 |
|---|---|---|
| E[att] | CSS2 | 选择具有att属性的E元素。 |
| E[att="val"] | CSS2 | 选择具有att属性且属性值等于val的E元素。 |
| E[att~="val"] | CSS2 | 选择具有att属性且属性值为一个用空格分隔的字词列表，其中一个等于val的E元素。 |
| E[att^="val"] | CSS3 | 选择具有att属性且属性值为以val****开头****的字符串的E元素。 |
| E[att$="val"] | CSS3 | 选择具有att属性且属性值为以val****结尾****的字符串的E元素。 |
| E[att*="val"] | CSS3 | 选择具有att属性且属性值为包含val的字符串的E元素。 |
| E[att|="val"] | CSS2 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。 |
17. flex布局
1. flex 概念
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
盒子类型
块级 block
行内 inline
行内块 inline-block 具备移动属性的块和行内的盒子
2. flex 盒子别称
3. 容器属性
大盒子属性
3.1 display 设置父盒子属性
display: flex3.2 flex-direction 设置主轴方向
flex-direction: row 水平 左-->右
flex-direction: row-reverse 水平 右-->左
flex-direction: column 垂直 上-->下
flex-direction: column-reverse 垂直 下--->上
3.3 justify-content 主轴项目排列方式
- flex-start(默认值): 主轴起点开始依次排
justify-content: flex-start- flex-end: 主轴终点开始依次排
justify-content: flex-end- center: 居中向两边排列
justify-content: center- space-between: 两端对齐 项目之间间距相同
justify-content: space-between- space-around：环绕对齐 中间项目之间间距占2份，左右最外侧占1份
justify-content:space-around- justify-content: space-evenly 均分对齐，项目间距相等，比两端对齐多了包括与容器间距
justify-content: space-evenly
3.4 align-items 单个侧轴项目对齐方式
align-items: flex-start // 起点对齐（默认值有高度）
: flex-end // 终点对齐
: conter //居中对齐
: streetch // 默认值(没有高度)3.5 flex-wrap 多行布局
flex-wrap: nowrap // 不换行
flex-wrap: wrap // 换行（项目压缩）
flex-warp: wrap-reverse // 换行 第一行在下方3.6. align-content （多行侧轴对齐方式）
align-content: flex-start
align-content: flex-end
align-content: conter
align-content: space-round // 环绕
align-content: space-betwwen3.7 flex-flow
*作用：
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4.项目属性
4.1 order 展示项目顺序
数字：默认是0 出场顺序 越小越往前
.box {
order:数字
}4.2 flex-grow 放大比例【将剩余空间按比例分】
如果所有项目排列完成后 空间还有剩余的 给一个盒子
数字： 可以小数 正整数 不可小数 >0
.box {
flex-grow: 1 // 剩余空间分成一份，给这个盒子
}4.3 flex-shrink 缩小倍数【将超出的空间，按比例分给盒子缩小】
默认值都是1，每个盒子扣一份
4.4 flex-basis 固定大小 px 值
不放大 不缩小 强制固定
父盒子宽度不够， 不会压缩项目
// 先设置放大缩小 为0
.box {
flex-grow: 0
flex-shrink: 0
flex-shrink: 200px
}4.5 flex 放大 缩小 固定值
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
如果 只放大 就写一个
设置缩小 必须写前2个 后面 固定加auto
固定 全写 前2个0
flex: 放大值 缩小值 固定值4.6 align-self
作用： align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
案例【面试题】
请将页面中的盒子 进行页面的水平垂直居中【5】
第一种flex 父盒子必须要有宽高 子盒子不管
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { display: flex; justify-content: center; align-items: center; } .box2 { width: 200px; height: 200px; border: 1px solid skyblue; } </style> </head> <body> <!-- <div class="box1"></div> --> <div class="box2"></div> </body> </html>
浮动减半 父盒子不需要宽高 子盒子必须要有宽高
.box2 { width: 200px; height: 200px; border: 1px solid skyblue; position: absolute; top: 50%; left: 50%; /* 减半 */ margin-top: -100px; margin-left: -100px; }.box2 { width: 200px; height: 200px; border: 1px solid skyblue; position: absolute; top: salc(50% - 100px); left: salc(50% - 100px); /* 减半 */ }四方拉 子盒子必须要有宽高
.box2 { width: 200px; height: 200px; border: 1px solid skyblue; position: absolute; top: 0; left: 0; right: 0; botton: 0; maning: auto; }平移 不需要知道父盒子 子盒子高宽 文字居中
.box2 {
width: 200px;
height: 200px;
border: 1px solid skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: transloate(-50%, -50%);
}18 动画
18.1 css3渐变
1.1 线性渐变
方向值: 点位 px % center
角度: deg -> 90deg
backgroud:linear-gradient(角度值， 颜色1，颜色2， 颜色3)
backgroud:linear-gradient(to top left， 颜色1，颜色2， 颜色3)1.2 径向渐变(中心向四周)
backgroud:radial-gradient(颜色1，颜色2)1.3 重复渐变
一个颜色设置占比后 重复出现
backgroud:linear-gradient(角度值， 颜色1 百分比，颜色2 百分比， 颜色3 百分比)1.4 文字渐变
background: linear-gradient(to right, #ff0000, #ffff00);
/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/18.2 变形
平移 translate
transform: translate(x, y) transform: translate(百分比, 百分比) // 想到对于自己 transform: translateX(x) transform: translateY(y)缩放 scale
纯数字 不可负数
< 1 缩小
倍数 > 1 放大
transform: scale(0.5, 0.5) transform: scale(0.5) // 相同倍数 transform: scaleX(0.5) // 宽度 transform: scaleY(0.5) // 高度旋转 rotate
transform:rotate(角度) transform: rotateX(x轴旋转角度) transform: rotateY(y轴旋转角度) transform:rotateZ(角度) //3D默认旋转原点 transform-origin
transform-origin: left top transform-origin: 50% 50% transform-origin: 10px 20px斜切 skew
transform:skew(x角度, y角度) transform:skewX(x角度) transform:skewY(y角度)3D变形
需要给父类添加
.parent { perspective: 1000px; /* 观察者与3D元素的距离 */ } .child { transform: rotateX(45deg) translateZ(100px); }
18.3 过度
transition: css变化属性名 时间S 曲线18.4 动画
动画定义
在固定时间内超过24帧连续显示
动画使用
定义
@keyframes 动画名字 { 0% { 初始状态 } 50% { 中间状态 } 100% { 最后状态 } } @keyframes 动画名 { from { 起始状态 } to { 结束妆容 } }使用在盒子上
animation: 动画名 动画时间 曲线函数 开始延迟时间 播放次数 播放方向 结束状态动画属性
- 曲线函数：steps(整数) // 几步完成 ease(加速后减速) linear(匀速) ease-in(加速开始) ease-out(减速开始)
- 播放次数：整数 infinite(无数次)
- 播放方向：normal(每次正向) reverse(每次反向) alternate(正-反-正) alternate- reverse(反-正-反)
- 结束状态 none(初始) forwards(保留结束)
- 暂停属性：animation-play-state: paused // 暂停 running播放
js操作
dom.style.属性名
19. JS进阶
1. 变量定义与关键字
const
5种基本数据类型常量，不可更改
引用数据类型 const存的是地址 ， 栈存 堆内存数据 地址 可修改里面数据
2.引用数据类型存储特性
1.基本数据类型存在栈内存
- 引用数据类型数据存在堆内存 , 栈存 堆内存数据 地址
3 数组操作方法
请谈谈你了解的数组方法【面试题】
修改原数组
push 尾部增加 返回修改后数组长度
pop 尾部删除 返回删除元素
unshift 头部增加 返回修改后数组长度
shift 头部删除 返回删除元素
splice 任意位置的曾 删 删除时返回删除元素数组
sort 排序 排序后返回数组本身
不修改原数组
concat 合并数组 返回拼接后的数组
let arr = [1, 2, 3] // 不变 let arr1 = [5, 6, 7] // 不变 let arr2 = arr.concat(arr1) // arr2变为[1, 2, 3, 5, 6, 7]every 数组里面必须满足一个条件 返回true 一个不满足 返回false
let arr = [1,2,3] arr.every((item, index) => item >= 1) // 返回truesome 只要一个满足 返回true
let arr = [1,2,3] arr.some(item => item > 3) // truefilter 过滤 将满足条件的返回一个新数组
let arr = [-1, 2,3,-5] arr.filter(item => item > 0) // 返回[2,3]新数组find 查找满足条件元素 返回元素 返回元素
findIndex 查找第一个满足条件的 返回索引
findLast 查找最后满足条件元素 返回元素
findLastIndex 查找最后满足条件元素 返回索引
flat 拉平多维数组 降维度 // 返回新数组
let arr = [] arr.flat(降维度数/Infinity) // Infinity 无数层forEach 循环数组 无返回值
arr.forEach((item, index) => { console.log(item) }) // 性能高一些 for...of break for(const item of arr) { // 不可循环对象 可循环字符串 循环得到 字符串每一个元素 console.log(item) }includes 包含 判断一个元素是否被数组包含 是返回 true 不是返回false
let arr = [1,2,3,4] let bool = arr.includes(1) // true let bool1 = arr.includes([1,2,3]) // false let arr1 = [1,[2,3],4] arr1.includes([2,3])// falseindexOf 查找数组相等的第一个元素 找到返回索引 没找到 返回 -1
lastIndexOf 查找数组相等的最后一个元素
join 将数组转为字符串 split 字符串转换为数组
let arr = [1,2,3] arr.join() // 1,2,3 arr.join('') // 123 arr.join('..') //1..2..3map 循环数组 返回自己加工数组
arr.map((item, index) => { return //处理后数据 }) // 返回处理后数据的数组reduce 数组里数据计算
arr.reduce((sum,next) => { // sum 上一次和 next下一次的数据 return pre + next },0)reverse 数组反转 改变原数组
arr.reverse()slice 数组截取 返回子数组
let newArr = arr.slice(起点，终点) [起点，终点）copyWithin 将数组某些元素 放到覆盖指定位置
copyWithin(目标开始索引，开始索引，结束索引) let arr = [1,2,3,4,5] arr.copyWithin(0,3) // [4,5,3,4,5] 修改原数组entries 迭代器
let arr = [1,2,3] const obj = arr.entries() obj.nex() [0,1] obj.nex() [1,2] obj.nex() [2,3] obj.next().done() //迭代我为truefill 填充 根据起点覆盖数组
arr.fill(新数据，起点，终点) let arr = [1,2,3,4,5,6] arr.fill(100,2,5)// [1,2,100,100,100,6]
forEach和map for区别
forEach 循环， 不返回
map 循环 返回新数组
for 可以停止循环 break continue
4. 函数
4.1 函数定义
具有特定功能的代码或重复性代码封装起来重复用
函数定义方式
// 声明式 function 函数名() { } // 表达式 const 函数名 = function() { }调用方式
- 直接调用
函数名()对调
对象.函数名()回调 回头再掉
sum(function(){})
递归
function a () { a() }立即执行
(function(){})()
函数参数
实参：实际参数， 具体数据
形参： 接收实参
函数返回值
return
没有return 自动返回undefined
4.2 函数封装
定义出 函数结构
4.3 函数的参数默认值 arguments 形参列表与 ...arr
// 箭头函数不可使用 arguments function sum () { console.log(arguments) [1,2,3] // 伪数组 无数组方法 // 也可以 [...arguments] //可使用数组方法 } sum(1,2,3) const c = (...arr) => { console.log(arr) // 数组 有方法 } c(1, 2, 3, 4)4.4 参数默认设置
function sum (a = 0, b = 0, c = 0) { return a + b + c } sum(1,2)4.5 回调函数
js代码执行顺序：
一般上到下 左到右
先同步 再异步(需要等的代码) 不可写return
function strFn() { setTimeout(functin(){ },1000) }语法特征：在调用函数时 传入一个新函数 定义一个大函数 就可以接收 接收后调用
function strFn(callback) { setTimeout(functin(){ callback('你好') },1000) } steFn(function(res){ consolg.log(res) })案例 传入一个参数 2s后返回是否是偶数
const strFn = (callback, num) => { setTimeout(() => { if (num % 2 === 0) { callback('是') } else { callback('不是') } }, 2000) } strFn((res) => { console.log(res) }, 3)回调函数
阶乘
一定终止条件
function sum (num) { if(num === 1) { return 1 } return num * sum(num - 1) } sum(10)
20 对象操作-正则表达式 -事件进阶
1. 对象操作
keys values
获取对象属性(可迭代属性) 返回数组
Object.keys(对象)
Object.values(对象)
delete obj.key 删除元素
const obj = { name: '张三', age: 18 } //静态方法 //获取属性 console.log(Object.keys(obj))//返回数组[name,age] //获取值 console.log(Object.values(obj))//返回数组[张三，18]Object.assign(对象1， 对象2) 合并对象 并且赋值到对象1
对象1 会被修改
合并出现重复属性 后面对象会覆盖前面的属性值
let user = { name: '李四', age: 18 } const obj = { name: '张三', age: 18 } Object.assign(user, obj) // 对象1 会被修改 Object.assign({}, user, obj) // 这样就不会被修改 //通常用来添加属性 Object.assign(obj, { gender: '女' })循环 for in
循环对象
for (let key in obj) { // 不支持数字 支持字符串 和数组 遍历得到 索引 console.log(key) // 属性 返回 字符串 console.log(obj[key]) //obj[key] [里面必须字符串] }
2. 正则表达式
检查 某个字符串是否满足预定规则
2.1 定义表达式
- 实例化
let reg = new RegExp(/规则/)- 字面量
let reg = /规则/2.2 检测数据
let str '1234'
let reg = /规则/
reg.test(str) // true flase2.3 定义规则
- ^ 以什么开始
- $ 以什么结尾
- [] 表示取一位
- [a-z|A-Z] a 到 A 取一个
- [0-9] \d 0-9
- [^a-z] 取反 不可是小写字母
- {数字} 前面出现有几位
- | 或
- [\u4e00-\u9fa5] 一个汉字
- 是 * >= 0
- 是 + >= 1
- ? 0到1
/^ &/标识符标识符
- i 不区分大小写
- g 全局匹配 用于字符串替换 replace replaceAll
// 14个英文字母
const reg = /^[a-z]{0,12}[a-z}$/i3. 事件进阶-第四要素event对象
事件源
事件类型
事件执行函数
事件对象event: 描述这个事件 从促发到结束的整个数据记录本
dom.addEventLisnter('click' ,(event) => {
})e.clientX e.clientY layerX layerY pageX pageY 事件触发位置 相对页面
screenX screenY 事件触发位置 相对页面
offsetX offsetY 事件触发 相对自己盒子位置
target 事件源
type 事件类型
键盘事件 keydown
key 点的那一个键
keyCode 键码值 0-108
target 事件源
type 事件类型
键码值
a| A 65
0： 96(小键盘) || 48(字母上方)
shift 16
ctrl 17
Alt 18
enter 13
空格 32
组合键为两次事件
ctrl + k
window.addEventLisnter('keydown' ,(event) => {
if(event.ctrlKey && event.key = 'k') {
//
}
}
})滚动事件
window.addEventListener('scroll', () => {
const goGoods = document.querySelector('.goGoods')
// console.log(window.scrollY)
if (window.scrollY >= 900) {
goGoods.style.display = 'block'
} else {
goGoods.style.display = 'none'
}
})锚点
document.querySelectorAll('div[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
this.getAttribute('href') // 获取属性值
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth' // 平滑滑动
});
});
});回到顶部
// 返回顶部
const blackTop = document.querySelector('.blackTop')
blackTop.addEventListener('click', () => {
// window.scrollTo(120, 0)
window.scrollTo({
top: 0,
behavior: 'smooth'
})
})4. event 应用场景 事件冒泡
子盒子促发事件 会依次向上查找父盒子相同事件 并且触发 知道window
// 阻止事件冒泡 捕获(添加到顶级父类)
// 自己事件之后
event.stopPropagation()// 阻止默认事件 有提交表单 和a 标签跳转 input的focus
event.preventDefault();4.1 event 应用场景
【什么是事件代理】：根据事件冒泡 根据子节点的事件交给父亲节点或以上节点监听，利用e.target来获取具体
【说一说事件流】：
- 事件捕获
- 当前dom触发
- 事件冒泡
【阻止冒泡和默认行为】
e.stopPropagation()
e.preventDefault()【什么是event】：
event 是事件 当前事件执行流程 整个流程所有记录的数据
如果是鼠标事件 记录点击位置 目标Dom对象
键盘事件 还有键值码
用法: 当渲染时无法获取正在渲染的dom时可以将盒子的事件交给父监听
将多个监听改为一个查看具体点击原始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 表格样式 */
table,
tr,
th,
td {
margin-top: 15px;
border: 1px solid skyblue;
border-collapse: collapse;
}
table {
width: 100%;
}
th {
background-color: orange;
}
td,
th {
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody class="body tr">
<tr>
</tr>
</tbody>
</table>
<script>
let user = [
{
id: 1,
name: '张三',
age: 18
},
{
id: 2,
name: '李四',
age: 12
}
]
const body = document.querySelector('.body')
const render = () => {
body.innerHTML = user.map(item => {
return `
<tr >
<td>${item.name}</td>
<td>${item.age}</td>
<td><button class="but2" data-id=${item.id}>删除</button><button class="but3" }>增加</button></td>
</tr>
`
}).join('')
}
render()
const tr = document.querySelectorAll('.tr')
tr.forEach(item => {
item.addEventListener('click', function (e) {
if (e.target.className.includes('but2')) {
let id = e.target.dataset.id
console.log(id)
user = user.filter(item => item.id != id)
console.log(user)
render()
}
if (e.target.className.includes('but3')) {
user = [
...user,
{
id: 3,
name: '历史',
age: 18
}
]
render()
}
})
})
</script>
</body>
</html>4. Date()
实例化对象
let date = new Date() // 格林威治时间 let date = new Date('2024-01-12') let date = new Date('时间戳') //变为格林威治时间 let id = +new Date() //可以唯一ID时间戳
- 重新命名文件 不会出现重复文件名
- 数字 事件推导
let date = new Date() date.getTime() // 毫秒时间戳 / 1000变为秒级日期转换
let y = date.getFullYear() // 年 let m = date.getMonth() + 1 // 月 let d = date.getDate() // 日 let dd= date.getDay() // 星期 let h = date.getHours() // 时 let f = date.getMinutes() // 分 let s = date.getSeconds() // 秒 let ms = date.getMilliseconds() //毫秒返回时间封装函数
const addZero = (time) => { return time < 10 ? '0' + time : time } const getTime = (date) => { // let date = new Date() let y = date.getFullYear() let m = addZero(date.getMonth() + 1) let d = addZero(date.getDate()) let h = addZero(date.getHours()) let f = addZero(date.getMinutes()) let mm = addZero(date.getSeconds()) return `${y}-${m}-${d} ${h}:${f}:${mm}` }
其他
1.css生效样式顺序
在样式加 !important
行内样式
id和类选择器
标签选择器
2. 事件触发流程
- 事件捕获
- 当前dom触发
- 事件冒泡
window.addEventLisnter('keydown' ,(event) => {
if(event.ctrlKey && event.key = 'k') {
//
}
}
}，冒泡默认(false)|捕获(true))
`