JavaScript学习笔记（4.0）

最新推荐文章于 2024-08-25 09:57:22 发布

mez_Blog

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量217

点赞数 1

文章标签： javascript 学习 html 前端 html5

本文链接：https://blog.csdn.net/mez_Blog/article/details/129463186

版权

获取浏览器窗口的尺寸

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

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记（4.0）

sessionStorage和localStorage的用法相同，他们的区别是sessionStorage是临时存储（关闭页面就丢失），localStorage是永久存储（除非外力删除或卸载浏览器）。如果存数字会自动转为字符串，如果要存对象，需要把对象转换成字符串存储：比如JSON.stringify()）取出本地存储（取出转换的对象时，也需要在取出时加上转换：JSON.parse()）location.hrefc存储的是浏览器内URL地址的信息。就是专门用来存储浏览器的地址栏内的信息的。
复制链接

扫一扫