BOM学习实用路线(4)——BOM刷新与跳转及BOM的hash简述

刷新与跳转



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<button>跳转</button>
<script>
    {
        let btn = document.querySelector("button");

        btn.onclick = ()=>{
            location.href = "https://www.baidu.com/s?wd=CSDN";
        };
    }
</script>
</body>
</html>

在这里插入图片描述

location.replace: 替换掉地址栏信息

    let btn = document.querySelector("button");

    btn.onclick = function(){
        location.replace("https://www.baidu.com/s?wd=CSDN");

效果是一样的!
在这里插入图片描述


刷新:reload方法

  let btn = document.querySelector("button");

  btn.onclick = ()=>{
      location.reload();
  };

在这里插入图片描述

刷新的另一个方式

   let btn = document.querySelector("button");

   btn.onclick = ()=>{
       location.href = location.href;   // 刷新的另一个方式
   };

hash函数

   let btn = document.querySelector("button");

   btn.onclick = ()=>{
       console.log(location.hash);
   };

在地址栏添加“#内容”,hash值实际就是#号后面的值
hash应用:前端路由(后面的篇章再详述)
在这里插入图片描述




(后续待补充)

发布了34 篇原创文章 · 获赞 12 · 访问量 2516

猜你喜欢

转载自blog.csdn.net/u013946061/article/details/105466550
bom
今日推荐