码迷,mamicode.com
首页 > 其他好文 > 详细

BOM

时间:2020-10-22 22:14:14      阅读:29      评论:0      收藏:0      [点我收藏+]

标签:location   类型   plain   文件的   查询   引入   get   input   信息   

BOM

页面的事件

window.onload

页面加载完毕后触发

window.onunload

页面关闭后触发

window.onbeforeunload

页面关闭之前触发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
?
    //页面加载的时候,按钮还没出现,页面没有加载完毕
?
    //页面加载完毕了,再获取按钮
    //只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
    window.onload=function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
      };
    };
?
    //很重要
    onload=function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
      };
    };
?
    //扩展的事件---页面关闭后才触发的事件
    window.onunload=function () {
?
    };
    //扩展事件---页面关闭之前触发的
    window.onbeforeunload=function () {
      alert("哈哈");
    };
?
  </script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>
</html>

 

location对象

scheme://host:port/path?query#fragment scheme:通信协议 常用的http,ftp,maito等 host:主机 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。 port:端口号 整数,可选,省略时使用方案的默认端口,如http的默认端口为80。 path:路径 由零或多个‘/‘符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。 query:查询 可选,用于给动态网页传递参数,可有多个参数,用‘&‘符号隔开,每个参数的名和值用‘=‘符号隔开。例如:name=zs fragment:信息片断 字符串,锚点.

案例演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
?
    //对象中的属性和方法
    //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);
?
    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");//没有历史记录,所以不能回退
      };
    };
?
  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>

  

 

navigator对象

主要用于判断浏览器的类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
?
    // 通过userAgent可以判断用户浏览器的类型 -- 一般用来判断是android系统还是windows系统
    console.log(window.navigator.userAgent);
    // 通过platform可以判断浏览器所在的系统平台类型. 如Win32
    //console.log(window.navigator.platform);
  </script>
</head>
<body>
</body>
</html>

  

BOM

标签:location   类型   plain   文件的   查询   引入   get   input   信息   

原文地址:https://www.cnblogs.com/minnersun/p/13854337.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!