JS BOM

BOM  浏览器对象模型

一、Window对象：所有对象都支持window对象，它表示浏览器窗口；所有JavaScript全局变量，函数以及变量均自动成为window对象的成员；全局变量是window对象的属性；全局变量是window对象的方法；Html Dom的document也是window对象的属性之一。

        window.document.getElementById(”box”)=document.getElementById(“box”)

1.window对象属性

 （1）确定浏览器尺寸（不包括工具栏和滚动条）

a.对于InternetExplorer8+、Chrome、Firefox、Opera、Safari

 window.innerHeight：浏览器窗口的内部高度

 window.innerWidth：浏览器窗口的内部宽度

b.对于InternetExplorer8-

 document.documentElement.clientHeight：浏览器窗口的内部高度

 document.documentElement.clientWidth：浏览器窗口的内部宽度

c.或者

document.body.clientHeight：浏览器窗口的内部高度

document.body.clientWidth：浏览器窗口的内部宽度

（2）确定浏览器尺寸（包括工具栏和滚动条）

window.outHeight  外部高度

window.outWidth   外部宽度

（3）length 设置或返回窗口中的框架数量

（4）name 设置或返回窗口的名称

2.window对象方法

 （1）window.close( ) 关闭浏览器窗口

 （2）window.alert（）显示带有一段消息和一个确认按钮的警告框

 （3）window.confirm（） 显示带有一段消息以及确认按钮和取消按钮的对话框

 （4）window.prompt（）显示可提示用户输入的对话框

 （5）window.open（）打开一个新的浏览器窗口或查找一个已命名的窗口

 window.open(“页面名”,”_blank/_self”,”属性”)

 （6）window.resizeTo(水平距离，垂直距离) 把窗口大小调整到指定宽度和高度

（7）window.resizeBy( ) 按照指定的像素调整窗口的大小

（8）window.scrollTo( ) 把内容滚动到指定坐标

（9）window.scrollBy( ) 按照指定的像素值滚动内容

增：浮动框架

<iframe   src=”页面名”  frameborder=”0”  name=” ”></iframe>

<a  href=” ”  target=”框架名”> </a> 

// 把超链接链接的页面内容显示到框架里

<a href="website/music.html" target="ifm1">音乐</a>

<a href="website/game.html" target="ifm1" >游戏</a>

<a href="website/network.html" target="ifm1">网站</a>

    <!--把三个超链接的网页内容 在框架ifm1里面显示-->
    

    </p>

<div>

<iframe src="close.html" frameborder="0" name="ifm1" class="fram1">

    <!--把close页面的内容显示到框架ifm1 里面-->

</iframe>

二、window下的其他对象

 1.history对象（window前缀可省略）

   a.window.history.back()  与在浏览器中点击后退按钮相同

   b.window.history.forward()   与在浏览器中点击向前按钮相同

   c.window.history.go(n)跳转的指定步数n的页面,n为负数后退、n为正数向前

2.body对象

   clientWidth   网页可见区域宽

   clientHeight  网页可见区域高

   scrollHeight  网页正文全文高

   scrollWidth   网页正文全文宽

   scrollTop     页面被卷去的高

   scrollLeft     页面被卷去的左

注：scrollTop一般同onscroll事件一起用，onscroll事件：页面滚动时触发。

 window.οnlοad= function () {
    var backtop = document.getElementsByClassName("backtop")[0];
    var header=document.getElementsByClassName("header")[0];
    window.onscroll = function () {  //滚动页面时触发
        var scroltop = document.body.scrollTop||document.documentElement.scrollTop;
        //获取滚动高度
        if (scroltop > 300) {
            backtop.style.display = "block";
            header.style.display="block"
        } else {
            backtop.style.display = "none";
            header.style.display="none"
        }
    }

 3.Location对象

  （1）location对象属性

     hash 设置或返回从#开始的url

     host 设置或返回主机名和当前url的端口号

     hostname 设置或返回当前url的主机名

     href 设置或返回完整的url

     pathname 设置自或返回当前url的路径部分

     port 设置或返回当前url的端口号

     protocol 设置或返回当前url的协议

     search 设置或返回从？开始的url（查询部分）

window.onload = function(){

   //弹出输入框   

   document.getElementById("mtBtn01").onclick = function(){

   document.getElementById('textsContent').innerHTML = "地址："+window.location          

         + "</br>hash值是：" + window.location.hash         

         + "</br>主机名和当前 URL 的端口号是：" + window.location.host          

         + "</br>当前 URL 的主机名是：" + window.location.hostname          

         + "</br>完整的 URL是：" + window.location.href         

         + "</br>URL 的路径是：" + window.location.pathname        

         + "</br>前 URL 的端口号是：" + window.location.port           

         + "</br>URL 的协议是：" + window.location.protocol          

         + "</br>查询部分是：" + window.location.search   

   }

}

（2）Location对象方法

   assign（） 加载新的文档

   reload（） 重新加载当前文档

   replace（） 用新的文档替换当前文档

     window.onload = function(){
       //重载页面
       document.getElementById("mtBtn02").onclick = function(){
      window.location.reload();
       }
       //下面三种方法都是替换成新的页面
       //1 assign
       document.getElementById("mtBtn01").onclick = function(){
        window.location.assign("http://www.baidu.com");
       }
       //2 replace 替换，不产生历史记录
       document.getElementById("mtBtn03").onclick = function(){
       window.location.replace("http://www.baidu.com");
       }
       //3直接更改location
       document.getElementById("mtBtn04").onclick = function(){
        window.location = "http://www.baidu.com";
       }
    }

三、JSON

 1. JSON作用：JSON是用于存储和传输数据的格式，JSON通常用于服务器端向页面传输数据。

 2.JSON是什么：JSON全称 JavaScript Object Notation；JSON是一种轻量级的数据交换格式；JSON是独立的语言；JSON易于理解；JSON格式仅仅是一个文本，使用JavaScript语法，文本可以被任何编程语言读取作为数据格式传递。

 3.JSON格式化后为JavaScript对象：JSON格式在语法上与创建JavaScript对象代码是相同的，由于他们很相似，所以JavaScript程序可以很容易将JSON数据转换为JavaScript对象。

4.JSON实例：

{"employees":[

    {"firstName":"John","lastName":"Doe"}, 

    {"firstName":"Anna","lastName":"Smith"},

    {"firstName":"Peter", "lastName":"Jones"}

]}

5.JSON语法规则：数据为键/值对，数据由逗号分隔，大括号保存对象，方括号保存数组。

6.JSON数据：JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。键/值对包括字段名称（在双引号中），后面一个冒号，然后是值："firstName":"John"

  7.JSON对象：JSON 对象保存在大括号内。就像在 JavaScript 中, 对象可以保存多个 键/对：{"firstName":"John","lastName":"Doe"}

  8.JSON数组：JSON 数组保存在中括号内。就像在 JavaScript 中, 数组可以包含对象：

"employees":[

   {"firstName":"John","lastName":"Doe"},

   {"firstName":"Anna","lastName":"Smith"},

   {"firstName":"Peter","lastName":"Jones"}

]

9.JSON字符串转化为JavaScript对象：通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

   首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据，然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:  var obj = JSON.parse(text);

四、Cookies

1、什么是Cookies？

   Cookies用于存储web页面的用户信息，Cookies 以名/值对形式存储，username=John Doe，当浏览器从服务器上请求 web 页面时， 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

2.创建Cookie

  document.Cookie="username=John Doe";

3.添加过期时间

  document.Cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

4.Cookie路径

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

5.获取Cookie

alert（document.cookie）;

6.删除cookie

  设置有效期，时间过了cookie自动删除。

<script>
    var times=new Date(); //获取当前系统时间
    times.setTime(times.getTime()+1000);
    //在当前日期上加上一个期限（即cookie过期时间）单位毫秒 并赋值给times
    document.cookie="username=zhq;expires="+times.toGMTString(); //设置cookie

    var btn=document.getElementsByTagName("button")[0];
    btn.onclick= function () {
        alert(document.cookie)
    }
</script>