JavaScript快速入门二

小哼快跑

已于 2024-02-03 16:57:59 修改

阅读量495

点赞数 11

分类专栏： Java Web专栏文章标签： javascript 开发语言 ecmascript

于 2024-01-22 16:00:18 首次发布

本文链接：https://blog.csdn.net/weixin_45754463/article/details/135749618

版权

Java Web专栏专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

- BOM

BOM

概述：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象。
组成

对象名作用
Window 窗口对象
Navigator 浏览器对象
Screen 显示器屏幕对象
History 历史记录对象
Location 地址栏对象

对象名	作用
Window	窗口对象
Navigator	浏览器对象
Screen	显示器屏幕对象
History	历史记录对象
Location	地址栏对象

Window(窗口对象)

Window 对象特点
- Window 对象不需要创建可以直接使用，window.方法名();
- window 引用可以省略，方法名();
Window 对象属性
- 获取其他 BOM 对象
  - window.history
  - window.location
  - window.navigator
  - window.screen
- 获取 DOM 对象
  - window.document

常用方法

方法	作用
alert()	弹出带有一段消息和一个确认按钮的警告框
confirm()	弹出带有一段消息和确认和取消按钮的对话框，点击确定返回 true ,点击取消返回 false
prompt()	弹出提示用户输入的对话框，返回值：获取用户输入的值
close()	关闭浏览器窗口，谁调用它，关闭谁
open()	打开一个新的浏览器窗口，返回 Window 对象
setTimeout()	在指定的毫秒数后调用函数或计算表达式。参数：js代码或者方法对象、毫秒值。返回值：唯一标识，用于取消定时器
clearTimeout()	取消由 setTimeout() 方法设置的 timeout
setInterval()	循环按照指定的周期（以毫秒计数）来调用函数或计算表达式
clearInterval()	取消由 setInterval() 方法设置的 timeout

示例代码

<script>
    /* 弹框 */
    let flag = window.confirm("选择正确或者错误");
    alert(flag);
    let s = prompt("请输入");
    alert(s);
</script>
<input type="button" value="打开窗口" id="openWindow">
<input type="button" value="关闭窗口" id="closeWindow">
<script>
    /* 文档调用 id 名为 openWindow的元素，返回此标签元素的对象 */
    var openWindow = document.getElementById("openWindow");
    var closeWindow = document.getElementById("closeWindow");
    var newWindow;
    /* 当点击此元素时候，执行函数 */
    openWindow.onclick = function (){
        newWindow = open("https://www.baidu.com");
    }
    closeWindow.onclick = function (){
        newWindow.close();
    }
</script>

<!-- 定时 -->
<script>
    /* 3秒后，执行此函数 */
    var id = setTimeout(fun , 3000);
    function fun() {
        alert("~你好帅!");
    }
</script>

<script>
    /* 每 2 秒循环一次 */
    var id = setInterval(fun , 2000);
    function fun(){
        alert("~boom");
    }
</script>

Location(地址栏对象)

创建 Location 对象

// 格式一
window.location
// 格式二
location

Location 属性
- href：设置或返回完整的 URL
Location 方法
- reload()：重新加载当前文档，刷新

示例代码

<body>
    <input type="button" value="刷新页面" id="flush">
    <input type="button" value="去百度" id="goBtn">
    <script>
        var flush = document.getElementById("flush");
        var goBtn = document.getElementById("goBtn");
        flush.onclick = function(){
            // 刷新页面
            window.location.reload();
            alert("我被刷新了！");
        }
        goBtn.onclick = function (){
            // 跳转网站
            location.href = "https://www.baidu.com";
        }
    </script>
</body>

History(历史记录对象)

创建 History 对象

// 格式一
window.history
// 格式二
history

History 属性
- length：返回当前窗口历史列表中的 URL 数量

History 方法

方法	作用	注意
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go(参数)	加载 history 列表的某个具体页面	参数：正数：前进几个历史记录负数：后退几个历史记录