JS---BOM基本知识 (顶级对象，系统对话框，加载事件，location对象, history对象, navigator对象)

BOM

JavaScript分三个部分:

1. ECMAScript标准---基本语法

2. DOM--->Document Object Model 文档对象模型,操作页面元素的

3. BOM--->Browser Object Model 浏览器对象模型, 操作浏览器的

 

浏览器中有个

顶级对象

:window----皇上

页面中顶级对象:document-----总管太监

页面中所有的内容都是属于浏览器的,页面中的内容也都是window的

变量是window的

 

 

系统对话框

---知道

window.alert("您好啊");//以后不用,测试的时候使用

window.prompt("请输入帐号");

    var result = window.confirm("您确定退出吗");
    console.log(result);

 

加载事件

    //页面加载完毕了,再获取按钮
    //只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
    window.onload = function () {
      document.getElementById("btn").onclick = function () {
        alert("您好");
      };
    };

 

Location对象

    //对象中的属性和方法
    location对象
    console.log(window.location);

 

    //地址栏上#及后面的内容
    console.log(window.location.hash);
    //主机名及端口号
    console.log(window.location.host);
    //主机名
    console.log(window.location.hostname);
    //文件的路径---相对路径
    console.log(window.location.pathname);
    //端口号
    console.log(window.location.port);
    //协议
    console.log(window.location.protocol);
    //搜索的内容
    console.log(window.location.search);

 

设置跳转的页面的地址

location.href----属性

方法：

location.assign

location.reload

l

    onload = function () {
      document.getElementById("btn").onclick = function () {
        //设置跳转的页面的地址
        location.href="http://www.jd.com";//属性----------------->必须记住
        //location.assign("http://www.jd.com");//方法
        //location.reload();//重新加载--刷新
        //location.replace("http://www.jd.com");//没有历史记录
      };
    };

 

 history对象

 

    //跳转的
    my$("btn1").onclick = function () {
      window.location.href = "15test.html";
    };
    //前进
    my$("btn2").onclick = function () {
      window.history.forward();
    };

 

navigator对象

n

navigator.platform 平台类型

    //通过userAgent可以判断用户浏览器的类型
    console.log(window.navigator.userAgent);
    //通过platform可以判断浏览器所在的系统平台类型.
    console.log(window.navigator.platform);