• 【JavaScript 7—基础知识点】:BOM


    一、基础知识

    1.1,什么是BOM

    BOM(browser object model):也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准,所以,BOM本身是没有标准的或者还没有哪个组织去标准它。

    1.2,总体知识

    现在学习到的知识,主要是将BOM分成三个对象的学习,分别是window对象、location对象和history对象。



    二、Window对象

    2.1,定义

    是BOM的核心对象,表示浏览器的一个实例 ,window对象处于JavaScript的结构最顶层,对于每个打开的窗口,系统都会自动为其定义Window对象。

    2.2,结构


    说明:Window对象是最顶层的对象,其下有6大属性,这6大属性本身也是对象。其document属性下,又包括5大属性,其也都是对象。因为Window对象为最顶层的对象,所以,在调用其子对象时,可以不用指明Window。如:下面两句话的效用是一致的!

    <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">window.alert(“测试”);
    alert(“测试”);</span></span>

    2.3,系统对话框

    2.3.1,alert()方法

    直接弹出对话框:

    <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">alert("测试");</span></span>


    2.3.2,confirm()方法

    这里有确定和取消按钮,本身可以返回一个布尔值:

    <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">if (confirm("请选择!")) {
       alert("你按了确认按钮");
    }
    else {
       alert("你按了取消按钮");
    }</span></span>



    2.3.3,prompt()方法

    可以在弹出框中输入一个数,然后显示出来:

    <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var box = prompt("请输入一个数字", 0)
    if (box != null) {
        alert(box);
    }</span></span>


    2.4,定时器

    <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var num = 0;
    var max = 5;
    var id = null;
    
    function box() {
        num++;
        document.getElementById("a").innerHTML += num;
        if (num==max ) {
            clearInterval(id);
            alert("5秒到了!");
        }
    }
    id=setInterval(box,1000)</span></span>

    三、Location对象

    说明:它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上location对象是window对象的属性,也是document对象的属性,所以:window.location和document.location等效。






    四、history对象

    这个对象属性,保存着用户上网的记录,从窗口被打开的那一刻算起。

    <span style="font-size:18px;"><a href="javascript:back();">前一个</a>
        <a href="javascript:forward();">后一个</a>
        <a href="javascript:go(1);">下一个</a></span>
    <span style="font-size:18px;">function back() {
        history.back();
    }
    
    function forward() {
        history.forward();
    }
    
    function go(num) {
        history.go(num);
    }</span>

    五、感想

    这些东西,一个一个看来都很简单,就是一些属性和方法的应用。但觉得还是有必要把基础给整理一下,最大的感受:知道那个东西在哪里出现过,其实也很重要。

    有了很多东西之后,建立联系好像变得容易点!


  • 相关阅读:
    1.数据结构《Pytorch神经网络高效入门教程》Deeplizard
    plt.figure()的使用,plt.plot(),plt.subplot(),plt.subplots()和图中图
    可变长参数
    np.linspace,numpy中的linspace()
    python和numpy中sum()函数的异同
    maven install 错误
    spring boot启动后执行方法
    java 定时任务多线程处理
    java 生成txt文件
    java 方法超时
  • 原文地址:https://www.cnblogs.com/hhx626/p/6010422.html
Copyright © 2020-2023  润新知