阅读 104

BOM基础

window对象

是浏览器的一个实例,在浏览器中,window对象有双重角色,它即是通过javaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

window对象的方法

window.alert("content")

语法:window.alert("content")

功能:显示带有一段消息和一个确认按钮的警告框


window.confirm("message")

语法:window.confirm("message")

功能:显示一个带有指定消息和ok及取消按钮的对话框

返回值:如果用户点击确定按钮,则confirm()返回true,如果用户点击取消按钮,则confirm()返回false


window.prompt("text,defaultText")

语法:window.prompt("text,defaultText")

参数说明:

text:要在对话框中显示的纯文本(而不是html格式的文本)

defaultText:默认的输入文本

返回值:如果用户单击提示框的取消按钮,则返回null,如果用户单击确认按钮,则返回输入字段当前显示的文本



window.open(pageURL,name,parameters)

语法:window.open(pageURL,name,parameters)

功能:打开一个新的浏览器窗口或者查找一个已命名的窗口

参数说明:pageURL:子窗口路径,name:子窗口句柄,parameters:窗口参数


<script> 
window.onload=function(){
   //打开子窗口,显示index1.html
   window.open("index1.html","newwindow","width=400,height=200,left=0,top=o,toolbar=no,menubar=no,scrollbars=no,location=no,status=no",);
 }
</script>复制代码



window.close()

语法:window.close()

功能:关闭浏览器窗口

<input type="button" value="退出" id="quit">
<script>
        window.onload=function(){
          //点击关闭当前窗口
          quit.onclick =function(){
              window.close();
          }
        }
    </script>复制代码



定时器 setTimeout  超时调用

语法:setTimeout(code,millisec)

功能:在指定的毫秒数后调用函数或计算表达式

参数说明:1.code:要调用的函数或要执行的javaScript代码串,2.miiiisec:在执行代码前需要等待的毫秒数

说明:setTimeout()只执行code一次,如果要多次调用,可以让code自身再次调用setTimeout()

<script>
    setTimeout("alert('hello')", 4000)
    etTimeout(function(){
        alert("hello");
        },2000)
     var fnCall=function(){
         alert("world");
        }
     setTimeout(fnCall,5000)
</script>复制代码

清除超时调用

语法:clearTimeout(id_of_settimeout)

功能:取消由setTimeout()方法设置的timeout

参数说明:1.id_of_settimeout:由setTimeout()返回的ID值,该值标识要取消的延迟执行代码块

<script>
        var timeout1= setTimeout(function(){
            alert("hello");
        },2000)
        var fnCall=function(){
            alert("world");
        }
        clearTimeout(timeout1);
        setTimeout(fnCall,5000)
</script>复制代码


定时器setInterval间歇调用

语法:setInterval(code,millisec)

功能:每隔指定的时间执行一次代码

参数说明:1.code:要调用的函数或要执行的javaScript代码串,2.miiiisec:周期性执行或调用code之间的时间间隔,以毫秒计

清除间歇调用

语法:clearInterval(id_of_settimeout)

功能:取消由setInterval()方法设置的interval

参数说明:1.id_of_settimeout:由setInterval()返回的ID值

 <script>
        var intervalId= setInterval(function(){
            console.log("你好");
                    },1000)
        //10秒之后停止打印
        setTimeout(function(){
            clearInterval(intervalId);
        },10000);
</script>复制代码

每个1秒递增,一直递增到10

<script>
        var num=1,max=10,timer=null;
        //每隔1秒钟num递增一次,直到num的值等于max清除
        timer=setInterval(function(){
            console.log(num);
            num++;
            if (num>max) {
                clearInterval(timer);
            }
         },1000)
</script>复制代码

 <script>
     var num=1, max=10,timer=null;
     //使用超时调用实现
     function inCreamentNum(){
        console.log(num);
        num++;
        if (num<=max) {
        setTimeout(inCreamentNum,1000);
        }else{
         clearTimeout(timer);
          }
      }
timer=setTimeout(inCreamentNum,1000);    
</script>复制代码


location对象

location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航的功能,它既是window对象的属性,也是document对象的属性。

语法:location.href

功能:返回当前加载页面的完整URL

说明:location.href与window.location.href等价

语法:location.hash

功能:返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串

consolr.log(location.href);
consolr.log(location.hash);

复制代码

语法:location.host

功能:返回服务器名称和端口号

语法:location.hostname

功能:返回不带端口号的服务器名称

语法:location.pathname

功能:返回URL中的目录和(或)文件名

语法:location.port

功能:返回URL中指定的端口号,如果没有,返回空字符串

语法:location.protocol

功能:返回页面使用的协议

语法:location.search

功能:返回URL的查询字符串。这个字符串以问好开头





History对象

语法:history.back()

功能:回到历史记录的上一步

说明:相当于使用了history.go(-1)


语法:history.forward()

功能:回到历史记录的下一步

说明:相当于使用了history.go(1)


Screen对象



Navigator对象



文章分类
前端
文章标签