获取浏览器窗口的尺寸
innerHeight和innerwidth
这两个方法分别获取浏览器窗口的高度和宽度(包含滚动条的)
var windowHeight=window.innerHeight
console.log(windowHeight)
var windowWidth=window.innerWidth
console.log(windowWidth)
浏览器的地址信息
在window中有一个对象叫做location
就是专门用来存储浏览器的地址栏内的信息的
location.hrefc存储的是浏览器内URL地址的信息
console.log(window.location.href)
注:会把中文变成URL编码的格式
location.href这个属性也可以被赋值
window.location.href='./index.html'
location.reload() //刷新页面
浏览器的onload事件
这个不再是对象了,而是一个事件
是在页面所有资源加载完毕后执行的
window.onload=function(){ //页面所有资源加载完执行(图片视频,dom等)
console.log('页面已经加载完毕')}
window.onresize=function(){
console.log("resize")
}
window.scroll=function(){
console.log("scroll")}
获取浏览器滚动距离
竖直
window.onscroll=function(){
console.log(document.documentElement.scrollTop || document.body.scrollTop)
}
水平
window.onscroll=function(){
console.log(document.documentElement.scrollLeft || document.body.scrollLeft)
}
滚动到制定位置
btn.onclick=function(){
window.scrollTo(x,y)
}
另一种写法
window.scrollTo({
left:0,
top:0
})
浏览器打开标签页
btn.onclick=function(){
window.open("http://www.baidu.com")
}
btn.onclick=function(){ //关闭页面
window.close()
}
浏览器的历史记录
btn.onclick=function(){
history.back()
}
在生成历史记录后,我们可以用另一个历史记录函数
history.forward()
history.go(1)=history.forward()
history.go(-1)=history.back()
-1回退一个页面,-2回退两个页面
1前进一个页面。
浏览器本地存储(存,只能存字符串;如果存数字会自动转为字符串,如果要存对象,需要把对象转换成字符串存储:比如JSON.stringify())
btn.onclick=function(){
localStorage.setItem("name","xxx")
}
取出本地存储(取出转换的对象时,也需要在取出时加上转换:JSON.parse())
btn.onclick=function(){
console.log(localStorage.getItem("name"))}
删除本地存储
btn.onclick=function(){
localStorage.removeItem("name")}
全部删除本地存储
btn.onclick=function(){
localStorage.clear()}
sessionStorage和localStorage的用法相同,他们的区别是sessionStorage是临时存储(关闭页面就丢失),localStorage是永久存储(除非外力删除或卸载浏览器)。
记住用户名实例
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-11 10:10:06
* @LastEditors: Mei
* @LastEditTime: 2023-03-11 16:33:34
* @FilePath: \vscode\特殊.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!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>
</head>
<body>
<div>
用户名:
<input type="text" id="username">
</div>
<div>
密码:
<input type="password" id="password">
</div>
<div>
<button id="login">登录</button>
</div>
<script>
login.onclick=function(){
console.log(username.value,password.value)
localStorage.setItem("username",username.value)
localStorage.setItem("password",password.value)
}
</script>
</body>
</html>
模拟下次登录时自动填写用户名和密码场景
首先获取用户名 密码信息进行存储,然后检测本地存储是否有值,有则放在用户名和密码的位置。
完整代码为:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-11 10:10:06
* @LastEditors: Mei
* @LastEditTime: 2023-03-11 16:41:09
* @FilePath: \vscode\特殊.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!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>
</head>
<body>
<div>
用户名:
<input type="text" id="username">
</div>
<div>
密码:
<input type="password" id="password">
</div>
<div>
<button id="login">登录</button>
</div>
<script>
var uservalue=localStorage.getItem("username")
var passwordvalue=localStorage.getItem("password")
if(uservalue && passwordvalue){
username.value=uservalue
password.value=passwordvalue
}
login.onclick=function(){
console.log(username.value,password.value)
localStorage.setItem("username",username.value)
localStorage.setItem("password",password.value)
}
</script>
</body>
</html>
DOM
DOM(Document Object Mode):文档对象模型
其实就是操作html中标签的一些能力
DOM核心对象就是document对象
获取节点的方式
非常规:html,head,body
常规:id,class,tag等
获取HTML:
console.log(document.documentElement)
获取head
console.log(document.head)
获取body
console.log(document.body)
常规获取
console.log(document.getElementById("box"))
console.log(document.getElementsByClassName("item"))
伪数组转换为真数组
var nwearray=Array.from(伪数组)
通过标签名获取
console.log(document.getElementsByTagName("li"))
通过name获取(返回伪数组)
console.log(document.getElementsByName(""))
querySelector(参数里面类似写css样式一样,ID前面也需要加#号,类名需要加.)
//新版浏览器支持
console.log(document.querySelector("#box")) //ul li ,ul
//瑕疵:如果ul下有多个li,则只返回第一个
querySelectorAll
//新版浏览器支持
console.log(document.querySelectorAll("ul li")) //ul li ,ul