BOM操作

 BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

 一、window对象

    Window对象的常用方法:
    >>>在Window对象中的所有属性和方法,均可以省略WIndow关键字
      window.alert(); -> alert();
    1、alert():弹出一个警告提示框;
    2、prompt():弹窗接受用户的输入;
    3、confirm():弹出带有“确定”、“取消”按钮的对话框,点击按钮返回true/false
    
    4、close():关闭当前浏览器窗口。在个别浏览器中,只能关闭当前脚本新打开的页面(使用超链接、window.open()等方式打开);
    5、open();打开一个新窗口
   参数一:新窗口的地址
   参数二:新窗口的名字,并没有什么用
   参数三:新窗口的各种属性值设置,"属性值1=值1,属性值3=值3,属性值3=值3"

    6、setTimeout:设置延时执行,只会执行一次;
      setInterval:设置定时器,每个n毫秒执行一次。
      接受两个参数:需要执行的function、毫秒数
    
    7、clearTimeout:清除延时器
     clearInterval:清楚定时器
     使用方法:设置延时器或定时器时,可以使用变量接受定时器ID;
        var id = setInterval;
        调用clearInterval时,将id传入,即可清除对应的定时器;
        clearInterval(id);
     

<script type="text/javascript">
    /*
         * 使用定时器,打印1-10,并求和
         */
        var setId = 0;
        var i = 0 ;
        var sum = 0;
        
        function setInterval1 () {
            
            
            setId = setInterval(function(){
                i++;
                sum +=i;
                
                console.log(i);
                if(i==10){
                    !function(){
                        clearInterval(setId);
                        console.log(sum);
                    }();
                }
            },1000);
            
        }    
</script>

<body>
    <button onclick="setInterval1()">setInterval设置定时器</button>
</body>

 

二、screen对象

   console.log(screen.width);//屏幕宽度
   console.log(screen.height);//屏幕高度
   console.log(screen.availWidth);//可用宽度
   console.log(screen.availHeight);//可用高度 = 屏幕高度 - 底部工具栏所占高度
   

三、 Location对象

     取到浏览器的URL地址信息;
     完整的URL路径
     协议名://主机名(IP地址):端口号/文件所在路径?传递参数(name1=value1&name2=value2)#锚点
     例如:
     http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top
    
   console.log(location);
   console.log(location.href);//返回当前完整路径
   console.log(location.protocol);//返回协议名
   console.log(location.host);//返回主机名和端口号
   console.log(location.hostname);//返回主机名
   console.log(location.port);//返回端口号
   console.log(location.pathname);//返回文件路径
   console.log(location.search);//返回?开头的参数列表
   console.log(location.hash);//返回#开头的锚点


   使用js跳转页面
  window.location = "http://www.baidu.com";

   
     其他使用location提供的方法跳转页面的方式

 function assign(){
    //加载新的文档。加载以后,可以回退。
    location.assign("http://www.baidu.com");
   }

 

 function replace(){
    //使用新文档替换当前文档。替换以后,不能回退。
    location.replace("http://www.baidu.com");
   }

 

  function reload(){
    /*
     * 重新加载当前文档。刷新页面
     * reload():在本地刷新当前页面,相当于F5
     * reload(ture):强制刷新,重服务器端重新加载页面,相当于Ctrl+F5 
     * 
     */
    location.reload();
   }

 

  四、history对象———浏览历史    

   console.log(history);
   console.log(history.length);//浏览历史列表的个数

  

function back () {
    history.back();//后退按钮
   }

 

 function forward () {
    history.forward();//前进按钮
   }

 

 function go () {
    
     //跳转到浏览历史的任意一个页面:
   //  0表示当前页面,-1表示后一页(back),1表示前一页(forward)
    
    history.go();
   }

 

 
   五、 navigator 
     包含浏览器的各种系统信息。
    

 console.log(navigator);

 

     监测浏览器安装的各种插件。
    
   

console.log(navigator.plugins);
   location.assign("http://www.baidu.com");
   location.replace("http://www.baidu.com");

 


   

posted @ 2017-09-10 21:22  白菜白  阅读(1074)  评论(0编辑  收藏  举报