vue、javascript

JavaScript 中常用的BOM操作

2021-03-02  本文已影响0人  源大侠

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

bom中常见的方法
setTimeout(fn,时间) 延迟方法
setInterval(fn,时间) 定时器,一般制作动画用
location.href() 打开一个新页面
location.reload() 重载页面
window.open("地址","_self | _blank | _parent")

一、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");
上一篇 下一篇

猜你喜欢

热点阅读