BOM对象学习笔记

  BOM即为浏览器对象模型。BOM提供了很多对象,用于访问浏览器的功能,这些功能与网页无关。

1,window对象

  BOM的核心便是window对象,表示浏览器的一个实例。

1.1 全局作用域

  window对象既是js访问浏览器功能的接口,但同时它也是js中的一个Global对象。也正因此,在js全局作用域中声明的属性、函数等也是window对象的属性和函数。

  eg:var age = 20;

          window.count = 20;

         alert(age);//20

         alert(window.age);//20

  上例中,使用js在全局作用域中声明了一个变量age,它同时也会被转为window对象的属性,所以也可以使用window对象访问该属性。二者的区别在于:如果是在window对象上显式声明该属性,则可以使用delete操作符删除该属性;而在全局作用域中声明的属性则不能通过delete操作符进行删除。

   eg:delete window.age;  //  返回false,无法删除

          delete window.count;  //  返回true,正确删除 

1.2 窗口关系及框架

  如果一个页面包含有框架,则每个框架都用于自己的window对象,这些对象保存在frames集合中,可以使用索引值(从0开始,从上到下、从左至右)和框架名称(name属性)来获取特定的window对象。

  eg:

  <html>
      <head>frames test</head>
      <frameset>
          <frame src="" name="top">
          <frameset>
              <frame src="" name="left">
              <frame src="" name="right">
          </frameset>
      </frameset>
  </html>

  上例中创建了一个框架集,可以通过window.frames[1]或者window.frames["left"]来访问name="left"的window对象。

1.2.1 top对象

  top的含义应该是说浏览器直接包含的那一个页面对象,也就是说如果你有一个页面被其他页面以iframe的方式包含了,无论包含的层级是什么,都可以用top访问最外层的哪一个页面,因为这个页面被浏览器直接包含。通俗的说,top对象就是最外层的窗口,所以还可以通过top对象访问其他窗口的window对象。需要注意的是,除非浏览器窗口是通过window.open()方法打开的,否则浏览器窗口的name属性不会包含任何值。

  eg:var left = top.frames[1];

1.2.2 parent对象

  parent用于在iframe,frame中生成的子页面中访问父页面的对象,也就是当前页面的上一层页面。在没有框架的情况下,parent和top相同。

1.3 导航和打开窗口

  使用window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。该方法接受4个参数:

  @URL:要加载的路径

  @窗口目标:即打开窗口的位置,可选项有{_self,_parent,_blank,_top}或者页面框架中某个框架的名称

  @一个特性字符串:用于设置新窗口的特性,如窗口位置、是否最大化等

  @一个布尔值:用于设置是否用新页面取代浏览器历史记录中当前页面的值

  eg:var testWindow = window.open("www.baidu.com","top","height=400px,width=400px"); // 在名为top的框架中打开一个宽、高均为400px的窗口,并将其赋值给testWindow变量

  eg:testWindow.close();  //关闭该窗口

  eg:var opener = testWindow.opener; // 获取打开当前窗口的原始窗口

1.4 延时调用

  超时调用主要使用window对象的setTimeout()方法,它接受两个参数:

  @代码:即要执行的代码,最好以function(){代码}的形式给出,哪怕是函数的调用也最好封装一层function(){}

  @毫秒值:即在代码执行前需要等待的时间的毫秒值。

  eg:sayHello(alert("hello"));

         var task = setTimeout(function(){

               sayHello();    

          },1000);

         clearTimeout(task); // 清除延时任务(需要在任务执行之前调用)

  需要注意的是经过设置的时间之后,代码并不一定会执行,因为js为单线程解释器,因此在特定的时间只能执行一段代码,各个任务按照其在任务栈中的顺序依次执行,延时调用就是延迟一定的时间才入栈,如果此时任务栈为空,则任务立即执行,但如果任务栈不为空,则代码并不会立即执行。

1.5 间歇调用

  间歇调用使用的是setInterval()方法,同理,该方法也接受两个参数:

  @代码 :同超时调用

  @毫秒值:两次执行之间的时间的毫秒值

  eg:sayHello(alert("hello"));

         var task = setInterval(function(){

               sayHello();    

          },1000);

         clearInterval(task); // 清除间歇任务(如果当次任务已经出发,则不会影响当次任务的执行,即从下一次还未触发的任务生效)。

  间歇调用可能会触发一些问题,例如上次的任务还未停止,下一次任务已经开始。所以,最好的办法就是利用两个延时调用的嵌套来模拟间歇调用,这样就可避免这些问题。

  eg:

   var num = 0;
   var max = 10;
   function increamentNum(){
       num++;
       if(num < max){
           setTimeout(function(){
               increamentNum();
           },1000);
       }else{
           alert("done");
       }
   }
   setTimeout(function(){
       increamentNum();
   },1000);

1.6 系统对话

  主要是三个方法(详情请百度):

  @alert():弹出消息框,用于告知用户信息

  @confirm():向用户确认,返回一个布尔值

  @prompt(要显示的文本--给用户看,输入文本的默认值):提示框,用于让用户输入文本 

 

 

 

 

 

  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值