BOM操作
- 浏览器可视窗口尺寸
JS
1 2 3 4 5 6 7 8 9 |
// 浏览器可视窗口尺寸
// 获取浏览器可视窗口的宽度
var w = window.innerWidth // 获取浏览器可视窗口的高度
var h = window.innerHeight9898 // 输出一下
console.log(w)
console.log(h)
|
- 浏览器的弹出层
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 浏览器的弹出层
// 提示框
// window.alert( '欢迎光临' )
// 询问框
// var res = window.confirm( 'how are you?' )
// // // 输出返回值
// console.log( res )
// // 输入框
var res = window.prompt(' 请输入您的qq') // // 输出返回值
console.log( res )
|
- 开启和关闭标签页
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body>
<button id="on"> 开启 </button> <button id="off"> 关闭 </button> <script>
// 开启按钮的点击事件
on.onclick = function () {
// 开启标签页
window.open( 'http://www.mobiletrain.org/' ) } // 关闭按钮的点击事件
off.onclick = function () {
// 关闭标签页
window.close()
} </script>
</body>
|
- 浏览器常见事件
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<body>
<img src="http://upload.mobiletrain.org/2021/0224/1614152185802.jpg" alt="">
<script>
// // 资源加载完毕
window.onload = function () { console.log( '资源已经加载完毕' ) } // 窗口尺寸改变
// window.onresize = function () {
// console.log( '窗口尺寸发生变化了' )
// }
// 滚动条位置改变
// window.onscroll = function () {
// console.log( '滚动条位置改变了' )
// }
</script>
</body>
|
- 浏览器滚动scrollTo
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<body>
<button id="go"> 走你 </button> <script>
// // 按钮添加点击行为
// go.onclick = function () {
// // 浏览器滚动到指定位置
// window.scrollTo( 300, 400 )
// }
// 按钮添加点击行为
go.onclick = function () {
// 浏览器滚动到指定位置
window.scrollTo({
left: 300,
top: 400,
behavior: 'smooth'
}) } </script>
</body>
|
js定时器
间隔定时器
HTML
1 2 3 4 5 6 7 8 9 10 |
<script>
// 间隔定时器
// 书写一个定时器
setInterval(function () { console.log( '执行一次' ) }, 1000)
</script>
|
延时定时器
HTML
1 2 3 4 5 6 7 8 9 10 |
<script>
// 间隔定时器
// 书写一个定时器
setTimeout(function () { console.log( '执行一次' ) }, 5000)
</script>//打开浏览器的第五秒执行
|
定时器的返回值
JS
1 2 3 4 5 6 7 8 9 10 11 |
// 定时器返回值
// 书写第一个定时器
var timer1 = setInterval(function () {}, 1000) // 书写第二个定时器
var timer2 = setTimeout(function () {}, 1000) // 输出返回值
console.log( 'timer1 : ', timer1 ) console.log( 'timer2 : ', timer2 ) |
是第几个定时器就返回数字几
关闭定时器
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 定时器返回值
// 开启定时器
// 书写第一个定时器
var timer1 = setInterval(function () { console.log('间隔定时器') }, 1000)
// 书写第二个定时器
var timer2 = setTimeout(function () { console.log('延时定时器') }, 3000)
// // 给按钮绑定点击事件
off.onclick = function () {
// 关闭定时器
clearInterval(timer1)
clearInterval(timer2)
} |
DOM操作
获取元素的方式
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<body>
<div>一号</div> <div class="box">二号</div> <div class="box content">三号</div> <div class="box" id="container">四号</div> <script>
// 获取元素的方式
// 根据 id 获取页面元素
// var ele = document.getElementById( 'abc' )
// 输出返回值
// console.log(ele)
// 根据类名获取页面元素
// var eles = document.getElementsByClassName( 'box' )
// 输出返回值
// console.log( eles )
// 根据标签名获取页面元素
// var eles = document.getElementsByTagName( 'div' )
// 输出返回值
// console.log( eles )
// 根据选择器获取一个
// var ele = document.querySelector( '.box' )
// 输出返回值
// console.log( ele )
// 根据选择器获取一组
var eles = document.querySelectorAll( '#container' ) // 输出返回值
console.log( eles )
</script>
</body>
|
操作元素文本内容
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script>
// 操作元素文本内容
// 获取元素
// var ele = document.querySelector( 'div' )
// var btn = document.querySelector( 'button' )
// // 获取元素的文本内容
// console.log( ele.innerText )
// // 给 按钮 绑定点击事件
// btn.onclick = function () {
// // 设置 div 内的文本内容
// ele.innerText = '新内容'
// }
// 获取元素
var ele = document.querySelector( 'div' ) var btn = document.querySelector( 'button' ) // 获取元素的文本内容
console.log( ele.innerHTML )
// 给 按钮 绑定点击事件
btn.onclick = function () {
// 设置 div 内的文本内容
ele.innerHTML = '<span>新内容</span>'
} </script>
|
操作元素属性
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<body>
<button>操作属性</button> <div id="box" hello="world">div 标签</div> <input type="" name="" id="" value="" />
<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 = 'content'
// inp.type = 'checkbox'
// }
// 获取自定义属性
var res = box.getAttribute( 'hello' ) console.log( res )
// 给按钮绑定点击事件
btn.onclick = function () {
// 修改自定义属性
box.removeAttribute('hello')
} </script>
</body>
|
操作元素类名
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body>
<button>操作类名</button> <div class="content">文本内容</div> <script>
// 操作元素类名
// 获取元素
var box = document.querySelector( 'div' ) var btn = document.querySelector( 'button' ) // 获取类名
console.log( box.className )
// 给 按钮 绑定点击事件
btn.onclick = function () {
// 设置 div 内的类名
box.className = '新内容'
} </script>
</body>
|
操作元素样式
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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 () {
// 设置 div 的样式
box.style.width = '200px'
box.style.height = '300px'
box.style.backgroundColor = 'skyblue'
} </script>
</body>
|
操作元素非行内样式
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!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>
|
案例:全选
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!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>
// 1. 获取元素
var allBtn = document.querySelector('input') var items = document.querySelectorAll('input:nth-child(n + 2)') // 2. 给全选按钮绑定事件
allBtn.onclick = function () {
// 2-1. 拿到自己的选中状态
var type = allBtn.checked
// 2-2. 把自己的选中状态设置给每一个选项按钮
for (var i = 0; i < items.length; i++) { items[i].checked = type } } // 3. 循环给每一个选项按钮绑定点击事件
for (var i = 0; i < items.length; i++) { // 3-1. 给每一个选项按钮绑定点击事件
items[i].onclick = function () {
// 3-2. 首先定义假设变量.
var flag = false // 3-3. 通过循环来验证我们的假设
for (var j = 0; j < items.length; j++) { if (items[j].checked === true) { flag = true//如果遍历的每个都为真,则为真。 } else{
flag= false//如果有一个是假的,则暂停,直接返回假 break
} } // 3-4. 把我们得到的结果设置给全选按钮
allBtn.checked = flag } } </script>
</body>
</html>
|
案例:选项卡
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<!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;
border-right: 1px solid black; } .box > ul > li.active { background-color: orange;
} .box > ol { flex: 1; /*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>
// 1. 获取元素
var btns = document.querySelectorAll('ul > li') var tabs = document.querySelectorAll('ol > li') // 2. 给 btns 里面所有按钮添加点击事件
btns.forEach(function (item, index) {
console.log(item)//foreach函数forEach 是 ES5 中操作数组的一种方法,主要功能是遍历数组,其实说穿了,就是 for 循环的加强版,该语句需要一个回调函数,作为参数。回调函数的形参,依次为,value:遍历的数组内容;index:对应的数组索引,array:数组本身。 item.onclick = function () {
console.log(item)//点哪里,index的值就是你点击对应的索引 console.log(index)//点哪里,index的值就是你点击对应的索引 // 2-2. 给 btns 和 tabs 里面的所有内容取消 active 类名
btns.forEach(function (t, i) {
t.className = ''
tabs[i].className = ''
}) // 2-3. 当前点击的按钮和索引对应的盒子添加 active 类名
item.className = 'active'
tabs[index].className = 'active'
} }) </script>
</body>
</html>
|
console.log(item)
//点哪里,item的值就是你点击对应的currentvalue
console.log(index)
//点哪里,index的值就是你点击对应的索引
创建节点
JS
1 2 |
var div=document.createElement('div') console.log(div)
|
插入节点
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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>
|
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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') // 获取到 div 内部本身的 p 标签
var p = document.querySelector('p') // 把创建的 span 标签插入到 div 内部, 并且放在 p 标签的前面
div.insertBefore(span, p) </script>
|
删除节点
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div>
<p>我是 div 内部本身的 p 标签</p> <span>我是 div 内部本身的 span 标签</span> </div>
<script>
// // 获取到 div 元素
// var div = document.querySelector('div')
// // 获取到 p 元素
// var p = document.querySelector('p')
// // 从 div 内删除 p 元素
// div.removeChild(p)
// 获取到 div 元素
var div = document.querySelector('div') // 把 div 删除
div.remove() </script>
|
替换节点
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div>
<p>我是 div 内的 p 标签</p> <span>我是 div 内的 span 标签</span> <p>我是 div 内的 p 标签</p> </div>
<script>
// 创建一个 i 标签
var i = document.createElement('i') // 向 i 标签内添加一些文本
i.innerText = '我是创建出来的 i 标签'
// 获取到 div 元素
var div = document.querySelector('div') // 获取到 span 元素
var span = document.querySelector('span') // 使用创建的 i 标签去替换 div 内本身的 span 标签
div.replaceChild(i, span) </script>
|
克隆节点
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div>
<p>我是 div 内的 p 标签</p> </div>
<script>
// 获取 div 元素
var div = document.querySelector('div') // 克隆一个 div 元素, 不克隆后代元素
var clone1 = div.cloneNode(false) // 克隆一个 div 元素, 克隆后代元素
var clone2 = div.cloneNode(true) // 输出
console.log('不克隆后代节点 : ', clone1) console.log('克隆后代节点 : ', clone2) </script>
|
发表评论