JavaScript基础②
BOM操作
浏览器可视窗口尺寸
// 浏览器可视窗口尺寸
// 获取浏览器可视窗口的宽度
var w = window.innerWidth
// 获取浏览器可视窗口的高度
var h = window.innerHeight9898
// 输出一下
console.log(w)
console.log(h)浏览器的弹出层
// 浏览器的弹出层
// 提示框
// window.alert( '欢迎光临' )
// 询问框
// var res = window.confirm( 'how are you?' )
// // // 输出返回值
// console.log( res )
// // 输入框
var res = window.prompt(' 请输入您的qq')
// // 输出返回值
console.log( res )开启和关闭标签页
<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>浏览器常见事件
<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
<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定时器
间隔定时器
<script>
// 间隔定时器
// 书写一个定时器
setInterval(function () {
console.log( '执行一次' )
}, 1000)
</script>
GIF 2021-11-23 17-46-21
延时定时器
<script>
// 间隔定时器
// 书写一个定时器
setTimeout(function () {
console.log( '执行一次' )
}, 5000)
</script>//打开浏览器的第五秒执行定时器的返回值
// 定时器返回值
// 书写第一个定时器
var timer1 = setInterval(function () {}, 1000)
// 书写第二个定时器
var timer2 = setTimeout(function () {}, 1000)
// 输出返回值
console.log( 'timer1 : ', timer1 )
console.log( 'timer2 : ', timer2 )是第几个定时器就返回数字几
image-20211123175754805
关闭定时器
// 定时器返回值
// 开启定时器
// 书写第一个定时器
var timer1 = setInterval(function () {
console.log('间隔定时器')
}, 1000)
// 书写第二个定时器
var timer2 = setTimeout(function () {
console.log('延时定时器')
}, 3000)
// // 给按钮绑定点击事件
off.onclick = function () {
// 关闭定时器
clearInterval(timer1)
clearInterval(timer2)
}DOM操作
获取元素的方式
<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>操作元素文本内容
<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>操作元素属性
<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>操作元素类名
<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>操作元素样式
<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>操作元素非行内样式
<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>案例：回到顶部
<!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>
案例：全选
<!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>
GIF 2021-11-23 23-03-05
案例：选项卡
image-20211123233752795
<!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的值就是你点击对应的索引
GIF 2021-11-23 23-51-14
创建节点
var div=document.createElement('div')
console.log(div)
image-20211124105907412
插入节点
<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>
image-20211124110805931
<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>
image-20211124110907371
删除节点
<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>替换节点
<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>克隆节点
<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>
image-20211124111738820
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-11-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录