视频地址:【千锋前端JavaScript全套教程_JS零基础完美入门到项目实战】 https://www.bilibili.com/video/BV1W54y1J7Ed/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
目录
7.1.1 获取浏览器窗口尺寸 innerwidth innerheight
7.1.2 浏览器的弹出层 alert confirm prompt
7、JavaScript的BOM和DOM操作
7.1 JavaScript的BOM操作
BOM Browser Object Model
一整套操作浏览器相关内容的属性和方法
操作浏览器历史记录
操作浏览器滚动条
操作浏览器页面跳转
操作浏览器标签页的开启和关闭
等等
7.1.1 获取浏览器窗口尺寸 innerwidth innerheight
获取可视窗口宽度:window.innerwidth
获取可视窗口高度:window.innerheight
7.1.2 浏览器的弹出层 alert confirm prompt
提示框:window.alert('提示信息')
询问框:window.confirm('提示信息') 有确定和取消按钮
输入框:window.prompt('提示信息') 有确定和取消按钮,且有文本输入框,点击确定,console输出输入的内容,点击取消,console输出null
7.1.3 开启和关闭标签页 open close
开启:window.open('地址')
关闭:window.close( )
开启:打开一个新网页
关闭:关闭当前显示按钮的网页
<body>
<button id = 'on'>开启</button>
<button id = 'off'>关闭</button>
<script>
on.onclick = function () {
window.open('http://www.baidu.com')
}
off.onclick = function () {
window.close( )
}
</script>
</body>
7.1.4 浏览器常见事件
资源加载完毕:window.onload = function () {}
可视尺寸改变:window.onresize = function () {}
滚动条位置改变:window.onscroll = function () {}
1、window.onload = function () {}
等到页面所有资源加载完成后执行代码
<body>
<img src="../day01 JavaScr" alt="">
<script>
// 资源加载完毕后执行下面代码
window.onload = function () {
}
</script>
</body>
其他两个函数用法与资源加载代码用法一致。
7.1.5 浏览器的历史记录操作
回退页面:window.history.back() 执行时作用相当于浏览器的左箭头
前进页面:window.history.forward() 执行时作用相当于浏览器的右箭头
7.1.6 浏览器卷去的尺寸
如果页面超过浏览器范围,此时页面出现滚动条,上面超出的部分就是卷去的高度,左边超出的部分就是卷去的宽度。
7.1.6.1 卷去的高度
- document.documentElement.scrollTop
- document.body.scrollTop
区别
1、当页面有DOCTYPE标签(下面代码第一行)时,要获取卷去的高度,使用document.documentElement.scrollTop
<!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>
2、当页面没有DOCTYPE标签(下面代码第一行)时,要获取卷去的高度,使用document.body.scrollTop
使用||运算符兼容贵两个写法。
var height= document.body.scrollTop || document.documentElement.scrollTop
7.1.6.2 卷去的宽度
- document.documentElement.scrollLeft
- document.body.scrollLeft
规则与卷去的宽度一致。
7.1.7 浏览器滚动到
设置浏览器滚动条的位置。
滚动到:window.scrollTo()
参数方式1: window.scrollTo(left, top)
left: 浏览器卷去的宽度
top: 浏览器卷去的高度
作用:使滚动条瞬间定位到卷去宽度为left,卷去高度为top的位置。
参数方式2: window.scrollTo( {
left: xx,
top: yy,
behavior: 'smooth' // 表示平滑滚动
} )
left: 浏览器卷去的宽度
top: 浏览器卷去的高度
作用:使滚动条平滑滚动到卷去宽度为left,卷去高度为top的位置。
7.1.8 总结
7.2 JS的定时器
利用定时器,每间隔一段时间就修改一次标签内的文本内容,比如倒计时。
- 间隔定时器:按照指定周期(毫秒)去执行指定的代码
- 延时定时器:在固定的时间(毫秒)后执行一次代码,理解为炸弹定时器。
7.2.1 间隔定时器
语法:setInterval(函数, 时间)
函数:每次要执行的内容
时间:单位是毫秒
setInterval()指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行,直到关闭当前窗口。与setTimeout()一样,setInterval()也可以传入多个参数。
// 书写一个间隔定时器
setInterval(function () {
console.log('明天不下雨')
}, 1000)
没有终点
7.2.2 延时定时器
语法:setTimeout(函数, 时间)
函数:时间到达时执行的内容
时间:单位是毫秒
函数式将要推迟执行的函数名或一段代码,时间是推迟执行的毫秒数。
// 书写一个延时定时器
console.log(1);
setTimeout(function () {
console.log('明天不下雨')
}, 1000);
console.log(2);
以上代码会先输出1和2,然后等到1000毫秒输出今天不下雨。
多个参数的情况
setTimeout()的后两个参数是回调函数的参数。
// 书写一个延时定时器
console.log(1);
setTimeout(function (a, b) {
console.log(a + b)
}, 1000, 1, 1);
console.log(2);
7.2.3 定时器的返回值
不区分定时器种类
表示是当前页面的 第几个 定时器
索引从1开始。以后可以用来取消这个定时器。
7.2.4 关闭定时器
语法一:clearInterval(要关闭的定时器返回值)
语法二:clearTimeout(要关闭的定时器返回值)
注意:不区分定时器种类
按照视频里说的,使用上没有区别
7.3 JS的DOM操作
DOM
Document Object Model
一整套操作文档流相关内容的属性和方法
操作 元素 修改样式
操作 元素 修改属性
操作 元素 改变位置
操作 元素 添加事件
7.3.1 获取元素的方式
7.3.1.1 根据 id 名称获取
语法: document.getElementById('Id名称')
作用:获取文档流中 id 名对应的 一个 元素
返回值:如果有 id 对应的元素,就是 这个元素;如果没有 id 对应的元素,就是null
获取id为left的元素
<body>
<div class="container" id = "left">
四号
</div>
<script>
var ele = document.getElementById('left')
console.log(ele)
</script>
</body>
控制台输出
7.3.1.2 根据元素 类名 获取
语法: document.getElementsByClassName('元素类名') 这里的elements有个s,因为元素id唯一,但是一个类名可以对应多个元素
作用:获取文档流中 所有 类名对应的元素
返回值:必然是一个 伪数组
如果有 类名 对应的元素,有多少就返回多少;
如果没有 类名 对应的元素,返回空的 伪数组
伪数组,长得像数组,排列按照数组排列,但是不能使用数组的常用方法。
7.3.1.3 根据元素 标签名 获取
语法: document.getElementsByTagName('标签名') 这里的elements有个s,因为元素id唯一,但是一个标签名可以对应多个元素
作用:获取文档流中 所有 标签名对应的元素
返回值:必然是一个 伪数组
如果有 标签名 对应的元素,有多少就返回多少;
如果没有 标签名 对应的元素,返回空的 伪数组
7.3.1.4 根据 选择器 获取一个元素
语法: document.querySelector('选择器')
(选择器是css选择元素的方式,比如div、p、a、body、,box(类选择器)、#abc(id选择器)等等)
作用:获取文档流中满足选择器规则的 第一个 元素
返回值: 如果有 选择器 对应的元素,返回 第一个;
如果没有 选择器 对应的元素,返回null
7.3.1.5 根据 选择器 获取一组元素
语法: document.querySelectorAll('选择器')
作用:获取文档流中 所有 满足选择器规则的元素
返回值: 必然是一个 伪数组
如果有 选择器 对应的元素,有多少就返回多少;
如果没有 选择器 对应的元素,返回空的 伪数组
7.3.1.6 总结
7.3.2 操作元素内容
分为操作元素 文本 内容和操作元素 超文本 内容,其实就是有没有标签结构的区别。
7.3.2.1 操作元素 文本 内容
- 获取:元素.innerText
- 设置:元素.innerText = ‘新内容’
案例:按钮点击时,给div的文本设置新内容
<button>操作内容</button>
<div>
<p>
文本内容
</p>
</div>
<script>
//操作元素
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
//获取元素的文本内容
console.log(ele.innerText)
// 给 按钮 绑定点击事件
btn.onclick = function () {
ele.innerText = '新内容'
}
7.3.2.2 操作元素 超文本 内容
- 获取:元素.innerHTML
- 设置:元素.innerHTML = ‘新内容’
<button>操作内容</button>
<div>
<p>
文本内容
</p>
</div>
<script>
//操作元素
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
//获取元素的文本内容
console.log(ele.innerHTML)
// 给 按钮 绑定点击事件
btn.onclick = function () {
ele.innerHTML = '<span>新内容</span>'
}
注意,超文本内容是包含p在内的内容
7.3.3 操作元素属性
- 原生属性
- 标签自带的属性,比如id,src,type等等
- 获取:元素.原生属性名
- 设置:元素.原生属性名=‘属性值’
- 自定义属性
- 自己随便写的属性,在元素身上记录一些信息,没有什么特殊意义
- 获取:元素.getAttribute('属性名')
- 设置:元素.setAttribute('属性名', ‘属性值’)
- 删除:元素.removeAttribute('属性名')
7.3.3.1 原生属性的获取和设置
获取:元素.原生属性名,
设置:元素.原生属性名=‘属性值’
<button>操作属性</button>
<div id="box">div 标签</div>
<input type="passward">
<script>
// 操作属性
//获取元素
var box = document.querySelector('div')
var inp = document.querySelector('input')
var btn = document.querySelector('button')
console.log(box.id)
console.log(inp.type)
//输出元素某一个属性的值
btn.onclick = function () {
box.id = 'square'
inp.type = 'user'
}
设置前的元素属性
点击按钮后,
设置后的元素属性
7.3.3.2 自定义属性的获取和设置
- 获取:元素.getAttribute('属性名')
- 设置:元素.setAttribute('属性名', ‘属性值’)
- 删除:元素.removeAttribute('属性名')
<button>操作属性</button>
<div id="box" hello="world">div 标签</div>
<!-- <input type="passward"> -->
<script>
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
// 获取自定义属性
var res = box.getAttribute('hello')
console.log(res)
//给按钮绑定点击事件
btn.onclick = function () {
box.setAttribute('hello', 'word')
box.removeAttribute('hello')
}
效果
hello属性由world变成word
div标签的hello属性被删除
7.3.3.3 总结
7.3.4 操作元素类名
- 获取:元素.className
- 设置:元素.className = ‘新内容’
代码实现
<button>操作属性</button>
<div class="content">div 标签</div>
<!-- <input type="passward"> -->
<script>
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
// 获取自定义属性
console.log(ele.className)
//给按钮绑定点击事件
btn.onclick = function () {
ele.className = 'box'
}
效果
div的类名由content变为box
7.3.5 操作元素行内样式
行内样式,用来写css的。
css引入方式,内部样式表(代码写在style标签内);外部样式表(代码写在.css文件里);行内样式,针对标签直接加style,配合JS使用。
- 获取:元素.style.样式名
- 设置:元素.style.样式名 = ‘样式值’
代码实现
<button>操作属性</button>
<div style="width:100px;height:100px;background-color:pink">div 标签</div>
<script>
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
// 获取样式
console.log(ele.style.width)
console.log(ele.style.height)
console.log(ele.style.backgroundColor) // 带中划线的样式时要转换成驼峰命名法
//给按钮绑定点击事件
btn.onclick = function () {
ele.style.width = '300px'
ele.style.height = '250px'
ele.style.backgroundColor = 'white'
}
显示样式
点击按钮,样式替换为
7.3.6 获取元素非行内样式
获取:window.getComputedStyle(元素).样式名
注意:可以获取行内样式,也可以获取非行内样式
注意:没有设置非行内样式的方法,前端JS只能设置元素的行内样式
代码实现
获取非行内样式fontSize 改为驼峰命名法
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: 20px;
}
</style>
</head>
<body>
<button>操作属性</button>
<div style="width:100px;height:100px;background-color:pink">div 标签</div>
<script>
//获取元素
var ele = document.querySelector('div')
console.log(window.getComputedStyle(ele).fontSize) // 带中划线的样式时要转换成驼峰命名法
结果
7.3.7 总结
7.4 案例
7.4.1 案例1:回到顶部
7.4.1.1 确认需求
7.4.1.2 设置基本样式
<style>
* {
margin: 0;
padding: 0;
}
/* // 清除默认样式 */
/* 给body设置高度,让页面出现滚动条 */
body {
height: 3000px;
}
/* 顶部通栏的基本样式 */
.header {
width: 100px;
height: 80px;
display: flex;
background-color: skyblue;
justify-content: center;
font-size: 40px;
color: #fff;
position: fixed;
top: -80px;
left: 0;
}
/* 回到顶部按钮的基本样式 */
.goTop {
width: 50px;
height: 50px;
background-color: pink;
font-size: 20px;
text-align: center;
color: #fff;
line-height: 20px;
position: fixed;
bottom: 50px;
right: 50px;
/* 默认是隐藏的 */
display: none;
}
</style>
html里写标签
<div class="header">
顶部通栏
</div>
<div class="goTop">回到顶部</div>
7.4.1.3 代码逻辑
1、给浏览器绑定滚动事件,实时获取卷去的高度
2、判断卷去的高度决定隐藏还是显示
3、给回到顶部按钮绑定点击事件
首先JS代码写在script标签内。
代码
<script>
// 1、获取元素
var header = document.querySelector('.header')
var goTop = document.querySelector('.goTop')
// 2、绑定滚动事件
window.onscroll = function () {
// 2-1 实时获取浏览器卷去的高度
var height = document.documentElement.scrollTop || document.body.scrollTop
// 2-2 判断卷去的高度
if (height > 300) {
// 显示
header.style.top = '0px'
goTop.style.display = 'block'
} else {
// 隐藏
header.style.top = '-80px'
goTop.style.display = 'none'
}
}
</script>
效果
浏览器卷去的高度小于临界点,顶部通栏和回到顶部按钮隐藏
浏览器卷去的高度大于临界点,顶部通栏和回到顶部按钮显示
7.4.1.4 绑定点击事件
当点击返回按钮时,滚动条滚动回到顶部
// 3、绑定点击事件
goTop.onclick = function () {
// 3.1 让页面滚动回到顶点
window.scrollTo( {
top: 0,
behavior: 'smooth'
})
}
项目完成
7.4.2 案例2:全选
7.4.2.1 确认需求
7.4.2.2 布局结构
7.4.2.3 代码实现
1、把按钮放上
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
padding: 20px;
border: 1px solid pink;
margin: 30px auto;
border-radius: 5px;
}
hr {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box">
全选:<input type="checkbox"><br>
<!-- br换行标签 hr 水平线标签 -->
<hr>
<input type="checkbox"> 选项一 <br>
<input type="checkbox"> 选项二 <br>
<input type="checkbox"> 选项三 <br>
<input type="checkbox"> 选项四 <br>
</div>
</body>
</html>
2、代码逻辑
- 给 全选按钮 绑定点击事件
- 拿到自己的选中状态
- 给所有按钮设置选中状态
<script>
// 1.获取元素
var allBtn = document.querySelector('input')
var items = document.querySelectorAll('input:nth-child(n+2)')
// 输出看一下
// console.log(allBtn)
// console.log(items)
// 2、给全选按钮绑定点击事件
allBtn.onclick = function () {
// 2-1 拿到自己的选中状态,其实就是自己的checked属性
var type = allBtn.checked
// 输出看一下
// console.log(type)
// 2-2 把自己的选中状态赋值给每一个选项按钮的选中状态
for (var i = 0; i < items.length; i++) {
items[i].checked = type
}
}
</script>
逻辑2
- 给 每一个选项按钮绑定点击事件
- 判断是不是所有的选项按钮都是选中的
- 根据判断结果给全选按钮设置选中状态
// 3 循环遍历拿到每一个选项按钮的选中状态
for (var i = 0; i < items.length; i++) {
// 3-1 给每一个按钮绑定点击事件
items[i].onclick = function () {
// 3-2 定义假设变量,假设所有按钮都是选中的
var flag = true
// 3-3 通过循环验证假设,
for (var j = 0; j < items.length; j++) {
if (items[j].checked == false) {
flag = false
break
}
}
// console.log(flag)
// 3-4 把得到的flag结果设置给全选按钮
allBtn.checked = flag
}
}
需要逻辑思考。
7.4.3 案例3:选项卡
7.4.3.1 确认需求
7.4.3.2 布局结构
代码实现初始布局
<style>
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
.box {
width: 600px;
height: 400px;
border: 3px solid pink;
margin: 50px auto;
display: flex;
flex-direction: column;
}
.box > ul {
height: 60px;
display: flex;
}
.box ul li {
flex: 1;
background-color: skyblue;
color: #fff;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box ul .active {
background-color: orange;
}
.box ol {
flex: 1;
position: relative;
}
/* 显示内容的盒子 */
.box ol li {
width: 100%;
height: 100%;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 100px;
position: absolute;
left: 0;
top: 0;
display: none;
}
.box ol .active {
display: flex;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</body>
</html>
7.4.3.3 代码逻辑
代码实现
奇怪了自己就写不对
<script>
// 1、获取元素
var bts = document.querySelectorAll('ul>li')
var tabs = document.querySelectorAll('ol>li')
// 2、绑定点击事件
bts.forEach(function (item, index) {
// for (var i = 0; i < bts.length; i++) {
item.onclick = function () {
// text[i].display = 'flex'
// 2-1 给按钮盒子和内容盒子所有内容取消active类名
// 这个forEach很神奇,没学过
bts.forEach(function (t, i) {
t.className = ''
tabs[i].className = ''
})
// 2-3 当前点击的按钮和索引对应的盒子添加active类名
item.className = 'active'
tabs[index].className = 'active'
}
})
</script>
7.5 JS的DOM操作下
7.5.1 节点操作
使用JS代码实现创建节点、插入节点等等
7.5.2 创建节点 无中生有
使用JS代码创建节点,不再是页面上提前写好的,而是根本没有的内容。
语法:document.createElement('标签名称')
作用:创建一个指定标签元素
返回值:一个创建好的元素节点
var tem = document.createElement('div')
console.log(tem)
7.5.3 插入节点
即创建一个节点,插入到已经存在的结构内。
语法1:父节点.appendChild(子节点)
作用:将 子节点 放在 父节点 的内部,并且放在最后的位置
<div>
<p>我是div里面的p标签</p>
</div>
<script>
// 创建一个span标签
var span = document.createElement('span')
// 向span标签内部添加文本内容
span.innerText = '我是创建出来的span标签'
// 输出一下
console.log(span)
// 获取上面的div标签
var div = document.querySelector('div')
// 将创建好的span标签插入到div标签内部
div.appendChild(span)
</script>
语法2:父节点.insertBefore(要插入的子节点,哪一个子节点的前面)
作用:将 子节点 放在 父节点 的内部,并且放在指定某一个子节点的前面
7.5.4 删除节点
语法1:父节点.removeChild(子节点)
作用:从 父节点 内删除某一个 子节点
<div>
<p>我是div里面的p标签</p>
</div>
<script>
// 获取上面的div标签和p标签
var div = document.querySelector('div')
var p = document.querySelector('p')
// 从div里删除p标签
div.removeChild(p)
语法2:节点.remove( )
作用:把 自己 直接删除
7.5.5 替换节点
即用一个节点把另外一个节点替换下来
语法:父节点.replaceChild(要换上的节点,要换下的节点)
作用:在 父节点 内, 使用 换上节点 替换 换下节点
7.5.6 克隆节点
即把一个节点复制一份一模一样的出来
语法:节点.cloneNode( 是否克隆后代节点)
参数选填,默认是false,表示不克隆后代节点。
作用:该节点复制一份一模一样的内容
返回值:克隆好的节点
7.5.7 获取元素尺寸
获取元素尺寸就是获取元素的宽度和高度
语法1:元素.offsetHeight 和 元素.offsetWidth
获取的内容:元素 内容 + padding + border 区域的尺寸
语法2:元素.clientHeight 和 元素.clientWidth
获取的内容:元素 内容 + padding 区域的尺寸
语法1和语法2区别在于,语法1获取的尺寸包含元素的border。
7.5.8 总结
7.6 案例 动态渲染数据
通过代码将数据渲染成一个表格显示在页面上
不一定非得是表格,可以根据需求将数据渲染成各种各样的结构
7.6.1 代码逻辑
7.6.2 代码实现
<style>
table {
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!-- JS渲染 -->
</tbody>
</table>
<script>
// 提前准备好的数据
var users = [
{id: 1, name: '张玉瑶', age: 18},
{id: 2, name: '瑶瑶', age: 18},
{id: 3, name: '舀子头', age: 18},
]
var tbody = document.querySelector('tbody')
// 2、循环遍历users数组,
users.forEach(function(item){
// 3.每循环一次生成一个tr标签
console.log(item)
var tr = document.createElement('tr')
// 4、循环遍历item
for(var key in item) {
// 5、生成td标签
var td = document.createElement('td')
td.innerHTML = item[key]
// 6、生成的td插入到tr内
tr.appendChild(td)
}
// 7、把tr插入到tbody内
tbody.appendChild(tr)
})
</script>
效果