day21
一、window对象常用方法
// 提示信息,带有确认和取消。如果确认返回的是true,取消返回的是false // var res = confirm('你确定登录吗?') // console.log(res) var btn1 = document.querySelectorAll('button')[0] var btn2 = document.querySelectorAll('button')[1] btn1.onclick = function(){ // 关闭浏览器窗口 window.close() } btn2.onclick = function(){ // 打开浏览器窗口 // 参数1表示的是跳转到那个网页 // 参数2表示是否新窗口打开 _self _blank(如果不写,默认新窗口) // 参数3表示的窗口的样式(存在兼容问题,有些浏览器不起作用) // window.open('https://www.jd.com') // window.open('https://www.jd.com', '_self') window.open('https://www.jd.com', '_blank', 'width=500; height=500;') }
二 、location地址栏对象
// 返回的是主机名称 // console.log(location.hostname) // 获取地址栏中完整的地址 作用:1、设置 2、获取 (常用) console.log(location.href) // 文件路径及文件名 console.log(location.pathname) // 完整的url组成:协议protocol、域名domain、端口号port var btn1 = document.querySelectorAll('button')[0] var btn2 = document.querySelectorAll('button')[1] btn1.onclick = function(){ location.reload() } // 所谓的强制刷新,不走缓存,直接重新向服务器获取数据 btn2.onclick = function(){ location.reload(true) }
三、window下的几个对象
1.history对象 history.forward(前进)
2.screen对象 screen.width screen.height
不包含状态栏 screen.availWidth screen.availHeight
四、onscroll滚动事件
// onscroll 滚动事件,当滑动浏览器的滚动条的时候触发事件 // scrollTop 获取滚动的距离 // document.documentElement.scrollTop 当文档没有声明的时候,不起作用 // document.body.scrollTop 当文档没有声明的时候,起作用 // document.documentElement.scrollLeft当文档没有声明的时候,不起作用 // document.body.scrollLeft 当文档没有声明的时候,起作用 var aside = document.querySelector('aside') window.onscroll = function(){ // var scrollTop = document.documentElement.scrollTop // var scrollTop = document.body.scrollTop // 兼容写法 短路运算符 // var scrollTop = document.documentElement.scrollTop || document.body.scrollTop // console.log(scrollTop) var scrollTop = document.documentElement.scrollTop || document.body.scrollTop if(scrollTop>=300){ aside.style.opacity = 1 }else{ aside.style.opacity = 0 } }
五、class Name和classList
1.className 能通过js形式给标记添加类名 var btn = document.querySelector('button') var box = document.querySelector('div')
// var flag = true // btn.onclick = function(){ // if(flag){ // // 问题:style方式确实方便,如果设置的样式较多的情况下,就特别麻烦了 // // box.style.display = 'block' // // box.style.backgroundColor = 'yellowgreen' // // box.style.border = '1px solid black' // box.className = 'show' // flag = false // }else{ // // box.style.display = 'none' // box.className = '' // flag = true // } // } btn.onclick = function(){ box.classList.toggle('show') }
2.classList 是一个对象上面有几个方法 add() remove() toggle()如果有类名就删除,没有将添加。 注意点1:className形式一次只能设置一个类名,如果设置多个,下面的会把上面的给覆盖掉 注意点2:box.className = 'sy1 sy2'可以添加两个类名,但是删除类名时会全面删除
六、吸顶效果
var nav = document.querySelector('nav') window.onscroll = function(){ // 获取滚动的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop if(scrollTop>=200){ nav.classList.add('fxd') }else{ nav.classList.remove('fxd') } }
七、onresize
// onresize 窗口事件,当浏览器的窗口改变时触发 // innerWidth 可以获取浏览器的可视区域的宽度 // innerHeight 可以获取浏览器的可视区域的高度 window.onresize = function(){ // console.log(window.innerWidth, window.innerHeight) if(window.innerWidth<=320){ document.documentElement.style.fontSize = '32px' }else if(window.innerWidth<=640){ document.documentElement.style.fontSize = '64px' }else if(window.innerWidth<=750){ document.documentElement.style.fontSize = '75px' } }
八、回调函数
+ callback(cb) + 官方概念: => 如果把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指的函数时,我们就说这是回调函数 + 理解概念: => 把函数当做参数给另一个函数使用,当当前的函数执行完毕后,再执行作为参数的这个函数,把这种情况称之为回调函数 + 作用 => 可以处理异步操作 => 可以延迟执行 => 可以解决代码阻塞问题 => 可以把复杂的逻辑进行分类 => ...
1.回调函数的第一种语法:将匿名函数当成参数传递 fn是主体函数 a参数就是回调函数 function fn(a){ console.log('我是主体函数') a() } fn(function(){ console.log('hello') })
2.回调函数的第二种语法:把有名称的函数当成参数传递 function fn(a){ a() console.log('我是主体函数') } fn(fn2) function fn2(){ setTimeout(function(){ console.log('hello') }, 2000) }
3.异步代码 // setInterval 主体函数 // 需求:希望1秒或者2秒后处理逻辑代码,如果不传递一个函数作为参数,其他的数据类型做不到 // 1秒定时器去调用回调函数 setInterval(function(){ console.log('逻辑代码') }, 1000)
function fn(){ console.log('逻辑代码') } setInterval(fn, 1000) function fn(a){ console.log('我是主体函数') a() } fn(fn2) function fn2(){ // setTimeout(function(){ // console.log('hello') // }, 2000) for(var i=0; i<1000; i++){ console.log(i) } }
4.开发场景及使用 开发场景:网络请求,你前端向服务器发送请求信息,服务器会把你需要的请求的数据返回 回调函数的使用: // arr.forEach(function(){}) // arr.sort(function(a, b){return a - b})
var arr = [10, 20, 30] // 把处理逻辑的代码单独放在回调函数里面 function callback(item){ return item>=20 } // 主体函数 var res = arr.filter(callback) console.log(res)
九、锚点
+ 锚点其实也是超链接的一种形式 + 命名锚点的作用: => 在同一页面内的不同位置进行跳转 + 语法 => <a href="#pic1">描述文字</a> 点击可以跳转的标记 => <标记 id="pic1">目标内容</标记> 跳转目标标记标签:function,console,log,学习,HarmonyOS,关于,var,scrollTop,document From: https://blog.csdn.net/m0_72035166/article/details/141935563