JS中的BOM操作（一）

目录

 

Tips

1.BOM简介

2.对话框

3.加载事件

4.location对象

5.history对象

6.navigator对象

---

Tips

1.BOM简介

    JavaScript分三个部分:
    1. ECMAScript标准---基本语法
    2. DOM--->Document Object Model 文档对象模型,操作页面元素的
    3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的
    浏览器中有个顶级对象:window----皇上
    页面中顶级对象:document-----总管太监
    页面中所有的内容都是属于浏览器的,页面中的内容也都是window的，因为页面中的所有内容都是window的,window是可以省略的.
    变量是window的

---

2.对话框

window.alert("您好啊");//以后不用,测试的时候使用
window.prompt("请输入帐号");
var result=window.confirm("您确定退出吗");

---

3.加载事件

只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
    window.οnlοad=function () {
      document.getElementById("btn").οnclick=function () {
        alert("您好");
      };
    };
    很重要
    οnlοad=function () {
      document.getElementById("btn").οnclick=function () {
        alert("您好");
      };
    };

    扩展的事件---页面关闭后才触发的事件
    window.οnunlοad=function () {

    };
    扩展事件---页面关闭之前触发的
    window.οnbefοreunlοad=function () {
      alert("哈哈");
    };

---

4.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="http://www.jd.com";//属性----------------->必须记住
       //location.assign("http://www.jd.com");//方法
        //location.reload();//重新加载--刷新
        //location.replace("http://www.jd.com");//没有历史记录

---

5.history对象

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

---

6.navigator对象

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