一、BOM操作
1.浏览器可视窗口尺寸
<script>
var w = window.innerWidth
var h = window.innerHeight9898
console.log(w)
console.log(h)
</script>
2.浏览器的弹出层
<script>
var res = window.prompt(' 请输入您的银行卡密码 ')
console.log( res )
</script>
3.开启和关闭标签页
<button id="on"> 开启 </button>
<button id="off"> 关闭 </button>
<script>
on.onclick = function () {
window.open( 'http://www.mobiletrain.org/' )
}
off.onclick = function () {
window.close()
}
</script>
4.浏览器常见事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<img src="http://upload.mobiletrain.org/2021/0224/1614152185802.jpg" alt="">
<script>
window.onscroll = function () {
console.log( '滚动条位置改变了' )
}
</script>
</body>
</html>
5.浏览器卷去的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<script>
window.onscroll = function () {
var height = document.documentElement.scrollLeft || document.body.scrollLeft
console.log( height )
}
</script>
</body>
</html>
6.浏览器滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body { width: 3000px; height: 3000px; }
button { position: fixed; bottom: 50px; right: 50px; }
</style>
</head>
<body>
<button id="go"> 走你 </button>
<script>
go.onclick = function () {
window.scrollTo({
left: 300,
top: 400,
behavior: 'smooth'
})
}
</script>
</body>
</html>
二、定时器
1.间隔定时器
<script>
setInterval(function () {
console.log( '执行一次' )
}, 1000)
</script>
2.延时定时器
<script>
setTimeout(function () {
console.log( '执行一次' )
}, 1000)
</script>
3. 定时器返回值
<script>
var timer1 = setInterval(function () {}, 1000)
var timer2 = setTimeout(function () {}, 1000)
console.log( 'timer1 : ', timer1 )
console.log( 'timer2 : ', timer2 )
</script>
4.关闭定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="off">关闭定时器</button>
<script>
var timer1 = setInterval(function () {
console.log('间隔定时器')
}, 1000)
var timer2 = setTimeout(function () {
console.log('延时定时器')
}, 3000)
off.onclick = function () {
clearInterval(timer1)
clearInterval(timer2)
}
</script>
</body>
</html>
三、DOM的基本操作(上)
1.获取元素的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>一号</div>
<div class="box">二号</div>
<div class="box content">三号</div>
<div class="box" id="container">四号</div>
<script>
var eles = document.querySelectorAll( '.abc' )
console.log( eles )
</script>
</body>
</html>
2.操作元素文本内容
<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 = '新内容'
}
</script>
3.操作元素属性
<button>操作属性</button>
<div id="box" hello="world">div 标签</div>
<script>
var box = document.querySelector( 'div' )
var inp = document.querySelector( 'input' )
var btn = document.querySelector( 'button' )
var res = box.getAttribute( 'hello' )
console.log( res )
btn.onclick = function () {
box.removeAttribute( 'hello', '新来的' )
}
</script>
4.操作元素类名
<button>操作类名</button>
<div class="content">文本内容</div>
<script>
var box = document.querySelector( 'div' )
var btn = document.querySelector( 'button' )
console.log( box.className )
btn.onclick = function () {
box.className = '新内容'
}
</script>
5.操作元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
font-size: 20px;
}
</style>
</head>
<body>
<button>操作样式</button>
<div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>
<script>
var box = document.querySelector( 'div' )
var btn = document.querySelector( 'button' )
console.log( box.style.width )
console.log( box.style.height )
console.log( box.style.backgroundColor )
btn.onclick = function () {
box.style.width = '200px'
box.style.height = '300px'
box.style.backgroundColor = 'skyblue'
}
</script>
</body>
</html>
6.操作元素非行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
font-size: 20px;
}
</style>
</head>
<body>
<button>操作类名</button>
<div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>
<script>
var box = document.querySelector( 'div' )
var btn = document.querySelector( 'button' )
console.log( window.getComputedStyle(box).width )
console.log( window.getComputedStyle(box).height )
console.log( window.getComputedStyle(box).fontSize )
</script>
</body>
</html>
四、案例
1.回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.header {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
background-color: skyblue;
transition: top .5s linear;
position: fixed;
top: -80px;
left: 0;
}
.goTop {
width: 50px;
height: 50px;
background-color: pink;
font-size: 20px;
text-align: center;
line-height: 25px;
color: #fff;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
</style>
</head>
<body>
<div class="header">顶部通栏</div>
<div class="goTop">回到顶部</div>
<script>
var header = document.querySelector('.header')
var goTop = document.querySelector('.goTop')
window.onscroll = function () {
var height = document.documentElement.scrollTop || document.body.scrollTop
if (height >= 300) {
header.style.top = '0px'
goTop.style.display = 'block'
} else {
header.style.top = '-80px'
goTop.style.display = 'none'
}
}
goTop.onclick = function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
</script>
</body>
</html>
2.全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<hr>
<input type="checkbox"> 选项一 <br>
<input type="checkbox"> 选项二 <br>
<input type="checkbox"> 选项三 <br>
<input type="checkbox"> 选项四 <br>
</div>
<script>
var allBtn = document.querySelector('input')
var items = document.querySelectorAll('input:nth-child(n + 2)')
allBtn.onclick = function () {
var type = allBtn.checked
for (var i = 0; i < items.length; i++) {
items[i].checked = type
}
}
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
var flag = true
for (var j = 0; j < items.length; j++) {
if (items[j].checked === false) {
flag = false
break
}
}
allBtn.checked = flag
}
}
</script>
</body>
</html>
3.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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;
color: #fff;
background-color: skyblue;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box > ul > li.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 > li.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>
<script>
var btns = document.querySelectorAll('ul > li')
var tabs = document.querySelectorAll('ol > li')
btns.forEach(function (item, index) {
item.onclick = function () {
btns.forEach(function (t, i) {
t.className = ''
tabs[i].className = ''
})
item.className = 'active'
tabs[index].className = 'active'
}
})
</script>
</body>
</html>
五、DOM的基本操作(下)
1.创建节点
<script>
var div = document.createElement('div')
console.log(div)
</script>
2.插入节点
<div>
<p>我是 div 内本身的 p 标签</p>
</div>
<script>
var span = document.createElement('span')
span.innerText = '我是创建出来的 span 标签'
console.log(span)
var div = document.querySelector('div')
var p = document.querySelector('p')
div.insertBefore(span, p)
</script>
3.删除节点
<div>
<p>我是 div 内部本身的 p 标签</p>
<span>我是 div 内部本身的 span 标签</span>
</div>
<script>
var div = document.querySelector('div')
div.remove()
</script>
4.替换节点
<div>
<p>我是 div 内的 p 标签</p>
<span>我是 div 内的 span 标签</span>
<p>我是 div 内的 p 标签</p>
</div>
<script>
var i = document.createElement('i')
i.innerText = '我是创建出来的 i 标签'
var div = document.querySelector('div')
var span = document.querySelector('span')
div.replaceChild(i, span)
</script>
5.克隆节点
<div>
<p>我是 div 内的 p 标签</p>
</div>
<script>
var div = document.querySelector('div')
var clone1 = div.cloneNode(false)
var clone2 = div.cloneNode(true)
console.log('不克隆后代节点 : ', clone1)
console.log('克隆后代节点 : ', clone2)
</script>
