day32 location对象(JS方法网址跳转、页面不跳转切换页面)

目录

    • location对象
      • 常用属性和方法:
        • href属性获取完整的URL地址,对其赋值时用于地址的跳转
        • hash属性获取地址中的哈希值,符号 # 后面部分(页面不跳转切换页面)
          • 示例
        • search属性得到 ? 后面的地址 (略)
        • reload方法用来刷新当前页面,传入参数true时表示强制刷新(类似ctrl+F5)
          • 示例

location对象

  • location的数据类型是对象,它拆分并保存了URL地址的各个组成部分

常用属性和方法:

href属性获取完整的URL地址,对其赋值时用于地址的跳转
        console.log(window.location);
        console.log(location);
        console.log(location.href);//得到当前文件URL地址

day32 location对象(JS方法网址跳转、页面不跳转切换页面)_第1张图片
day32 location对象(JS方法网址跳转、页面不跳转切换页面)_第2张图片

  • JS方法网址跳转示例:location.href = 'http://www.baidu.com'

day32 location对象(JS方法网址跳转、页面不跳转切换页面)_第3张图片

hash属性获取地址中的哈希值,符号 # 后面部分(页面不跳转切换页面)

day32 location对象(JS方法网址跳转、页面不跳转切换页面)_第4张图片
day32 location对象(JS方法网址跳转、页面不跳转切换页面)_第5张图片
day32 location对象(JS方法网址跳转、页面不跳转切换页面)_第6张图片

示例
<body>
    <form action="">
        <input type="password" name="pwd">
        <button>提交button>
    form>

    <a href="#/my">我的a>
    <a href="#/friend">关注a>
    <a href="#/download">下载a>
    <script>

    script>
body>

day32 location对象(JS方法网址跳转、页面不跳转切换页面)_第7张图片

search属性得到 ? 后面的地址 (略)
reload方法用来刷新当前页面,传入参数true时表示强制刷新(类似ctrl+F5)
示例
<button class="reload">刷新button>
    <script>
        const reload = document.querySelector('.reload')
        reload.addEventListener('click',function(){
            location.reload()
            //强制刷新 ctrl + F5
            location.reload(true)
        })
    script>
    script>

你可能感兴趣的:(记录前端学习,javascript,前端)