博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javaScript 操作BOM对象
阅读量:5362 次
发布时间:2019-06-15

本文共 5955 字,大约阅读时间需要 19 分钟。

1)windows对象

        浏览器对象模型(BOM :Browser  Object  Model)是JavaScript的组成之一,它提供了独立于内容与浏览

器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来,

提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。BOM是一个分层结构

1-1)使用BOM通常可实现如下功能:

        1.弹出新的浏览器窗口

        2.移动、关闭浏览器窗口及调整窗口大小

        3.在浏览器窗口中实现页面的前进、后退功能

 

1-2)windows对象的常用属性

        1.history   有关客户访问过的URL的信息

2.location  有关当前URL的信息

        3.screen    只读属性,包含有关客户端显示屏的信息

在Javascript中,属性的语法格式如下:

window.属性名=“属性值”

例:

window.location="http://www.bdqn.cn",表示页面跳转

screen.heigth 返回显示浏览器的屏幕的高度,单位为像素

1-3)windows对象的常用方法

1.    prompt()    显示可提示用户输入的对话框

2.          alert()   显示一个带有提示信息和一个“确定”按钮的警示对话框

3.     confirm()    显示一个带有提示信息、“确定”和“取消”按钮的对话框

4.          close()    关闭浏览器窗口

5.          open()  打开一个新的浏览器窗口,加载给定URL所指定的文档

6.setTimeout()        在指定的毫秒数后调用函数或计算表达式

7. setInterval()        按照指定的周期(以毫秒计)来调用函数或表达式

语法:

window.方法名();

window对象是全局对象,所以在使用window对象的属性和方法时,window可以省略

例如:之前直接使用的alert(),相当于写成window.alert();

1-4)方法的使用

1.confirm() 将弹出一个确认对话框 

语法:

window.confirm("确认要删除此条信息吗");

在confirm()对话框中,有确认和取消按钮。当用户单机确认是,则返回 true 反之 false

代码实例:

var flag=confirm("确认删除此条信息吗");

if(flag)

{
alert("删除成功");
}else
{
alert("你取消了删除");

}

        2.close()

                close()方法用于关闭浏览器窗口,语法:window.close();

        3.open();

                在页面上弹出一个新的浏览器窗口,弹出窗口的语法格式如下:

                window.open(“弹出窗口的url”, “窗口名称”,“窗口特征”);

                窗口的特征属性:

                

1-5)prompt()、alert()、confirm()不同之处
alert()         只有一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何影响
  
 prompt()  有两个参数,是输入对话框,用来提示用户输入一些信息,单击取消按钮则返回null
 ,单击 确定 按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈信息
   
confirm()  只有一个参数,是确认对话框,显示提示对话框的信息。 确认 按钮和取消按钮
  单击确定返回true  单击取消返回 false,因此与if--else语句搭配使用

2)history对象 和 location对象

    history对象常用方法:

         back()  加载history对象列表中的前一个URL

    forward() 加载history 对象列表中的下一个URL

             go() 加载history 对象列表中的某个具体URL

       history.back()=== history.go(-1) 浏览器中的  后退

    history.forward() ===history.go  ( 1 )       浏览器中的  前进 

    location 对象常用方法及属性:

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

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

                  href:  设置或返回完整的URL

         reload()   重新加载当前文档

        reolace()   用新的文档替换当前文档

 

3)document对象

    document常用属性:

    referrer:返回载入当前文档的URL

    URL:返回当前文档的URL

    document对象的常用方法:

    getElementById()                   返回对拥有指定id的第一个对象的引用

    getElementByName()            返回带有指定名称的对象的集合

    getElementsByTagName()    返回带有指定标签名的对象的集合

    write()                                 向文档写文本、HTML表达式或JavaScript代码

    语法:

    document.referrer        document.URL

    代码栗子:

    

[javascript]   
 
  1. <body>  
  2. <div>  
  3.     <div id="book">舒明明</div>  
  4.     <input name="sea" type="text" value="春"/>  
  5.     <input name="sea" type="text" value="夏"/>  
  6.     <input name="sea" type="text" value="秋"/>  
  7.     <input name="sea" type="text" value="冬"/>  
  8.     <input name="btn" type="button" value="修改名称" οnclick="changbook()">  
  9.     <input name="b2" type="button" value="input内容" οnclick="inputnei()"/>  
  10.     <input name="b3" type="button" value="司机内容" οnclick="getElementByname()"/>  
  11.     <input name="b4" type="button" value="清空页面内容" οnclick="cler()"/>  
  12.     <p id="per"></p>  
  13. </div>  
  14. <script>  
  15.     function changbook()  
  16.     {  //更改指定id名称  
  17.         document.getElementById("book").innerHTML="替换文本";  
  18.     }  
  19.     function inputnei()  
  20.     {
    //获取所有 input标签的值  
  21.         var stu=document.getElementsByTagName("input");  
  22.         var str="";  
  23.         for(var i=0;i<stu.length;i++)  
  24.         {  
  25.             str+=stu[i].value+" ";  
  26.         }  
  27.         document.getElementById("per").innerHTML=str;  
  28.     }  
  29.     function getElementByname()  
  30.     {
    //获取指定所有 name 名称的值  
  31.         var stu=document.getElementsByName("sea");  
  32.         var ss="";  
  33.         for(var i=0;i<stu.length;i++)  
  34.         {  
  35.             ss+=stu[i].value+"  ";  
  36.         }  
  37.         document.getElementById("per").innerHTML=ss;  
  38.     }  
  39.     function cler()  
  40.     {  
  41.         document.write("");  
  42.     }  
  43. </script>  
  44. </body>  

4)JavaScript 内置对象

        1.Array  : 用于在单独的变量名中存储一系列的值

        2.String : 用于支持对字符串的处理

        3.Math :用于执行常用的数学任务,它包含了若干个数字常量和函数

        4.Date :用于操作日期和时间

        1)Date对象获取日期:

        语法:var  日期对象 = new  Date(参数);参数格式:MM  DD,YYYY ,hh:mm:ss

        代码栗子:

[javascript]   
 
  1. var time=new Date();  
  2.    document.write(time+"<br/>");  
  3.    var  time1=new Date("september 1,2017,15:00:00");  
  4.    document.write(time1);  

        运行结果:

        

         常用方法:

          

           制作时钟代码:

[javascript]   
 
  1. <body>  
  2. <div id="times"></div>  
  3. <script>  
  4.     function time() {  
  5.         var time = new Date();//获取系统时间  
  6.         var hh = time.getHours();//获取系统小时  
  7.         var mm = time.getMinutes();//获取系统分钟  
  8.         var ss = time.getSeconds();//获取系统秒数  
  9.         document.getElementById("times").innerHTML="当前时间为:"+hh+":"+mm+":"+ss;  
  10.     }  
  11.     time();  
  12. </script>  
  13. </body>  

            运行结果:

            

5)Math对象

        常用方法:

        

        如何实现返回的整数范围为2~99?

        栗子:var  iNum=Math.floor(Math.random()*98+2);

6 )定时函数

        第一种方式:

        setTimeout()

        语法:setTimeout("调用的函数",等待的毫秒数);

[javascript]   
 
  1. <body>  
  2. <div id="times"></div>  
  3. <script>  
  4.     function time() {  
  5.         var time = new Date();//获取系统时间  
  6.         var hh = time.getHours();//获取系统小时  
  7.         var mm = time.getMinutes();//获取系统分钟  
  8.         var ss = time.getSeconds();//获取系统秒数  
  9.         document.getElementById("times").innerHTML="当前时间为:"+hh+":"+mm+":"+ss;  
  10.         varsetTimeout("time()",1000);  
  11.     }  
  12.     time();  
  13. </script>  
  14. </body>  

        第二种方式:

 

        setInterval()

        语法:setInterval("调用的函数",间隔的毫秒数);

[javascript]   
 
  1. <div id="times"></div>  
  2.  function time1() {  
  3.         var time = new Date();//获取系统时间  
  4.         var hh = time.getHours();//获取系统小时  
  5.         var mm = time.getMinutes();//获取系统分钟  
  6.         var ss = time.getSeconds();//获取系统秒数  
  7.         document.getElementById("times").innerHTML = "当前时间为:" + hh + ":" + mm + ":" + ss;  
  8.     }    
[javascript]   
 
  1. var text1=setInterval("time1()",1000);  

6-1)清楚函数

        clearTimeout( setTimeOut() 返回的ID值 ); 

        clearInterval(setInterval() 返回的ID值);

        

        

        栗子一:      

[javascript]   
 
  1. <body>  
  2. <div id="times"></div>  
  3. <input name="btn" type="button" value="开始时间" οnclick="start()">  
  4. <input name="btn" type="button" value="停止时间" οnclick="stop()">  
  5. <script>  
  6.     var Times;  
  7.     function time() {  
  8.         var time = new Date();//获取系统时间  
  9.         var hh = time.getHours();//获取系统小时  
  10.         var mm = time.getMinutes();//获取系统分钟  
  11.         var ss = time.getSeconds();//获取系统秒数  
  12.         document.getElementById("times").innerHTML = "当前时间为:" + hh + ":" + mm + ":" + ss;  
  13.         Times=setTimeout("time()", 1000);  
  14.     }  
  15.     time();  
  16.      function stop()  
  17.      {  
  18.          clearTimeout(Times);  
  19.          //clearInterval(times);  
  20.      }  
  21.     function start()  
  22.     {  
  23.         time();  
  24.        // time1();  
  25.     }  
  26. </script>  
  27. </body>  

        栗子二:

[javascript]   
 
    1. <body>  
    2. <div id="times"></div>  
    3. <input name="btn" type="button" value="开始时间" οnclick="start()">  
    4. <input name="btn" type="button" value="停止时间" οnclick="stop()">  
    5. <script>  
    6.      function stop()  
    7.      {  
    8.          //clearTimeout(Times);  
    9.          clearInterval(times);  
    10.      }  
    11.     function start()  
    12.     {  
    13.         //time();  
    14.        time1();  
    15.     }  
    16.     function time1() {  
    17.         var time = new Date();//获取系统时间  
    18.         var hh = time.getHours();//获取系统小时  
    19.         var mm = time.getMinutes();//获取系统分钟  
    20.         var ss = time.getSeconds();//获取系统秒数  
    21.         document.getElementById("times").innerHTML = "当前时间为:" + hh + ":" + mm + ":" + ss;  
    22.     }  
    23.     var times=setInterval("time1()",1000);  
    24. </script>  
    25. </body>  

转载于:https://www.cnblogs.com/ting1106/p/8696152.html

你可能感兴趣的文章
php环境搭建脚本
查看>>
FTP主动模式与被动模式说明
查看>>
php 编译常见错误
查看>>
MES架构
查看>>
【Python3 爬虫】15_Fiddler抓包分析
查看>>
高性能JavaScript-JS脚本加载与执行对性能的影响
查看>>
关于标签之间因为换行等问题造成的空白间距问题处理
查看>>
hdu 2767(tarjan)
查看>>
sklearn之分类模型混淆矩阵和分类报告
查看>>
MySQL各存储引擎
查看>>
项目--简单导出CSV文件
查看>>
Oracle session相关数据字典(一)
查看>>
织梦文章内容提取第一张或者多张图片输出
查看>>
C#用正则表达式 获取网页源代码标签的属性或值
查看>>
BZOJ 3399 [Usaco2009 Mar]Sand Castle城堡(贪心)
查看>>
WCF(一) 简单的认知
查看>>
[MFC][DShow]简单例子
查看>>
Luogu P1141 01迷宫【搜索/dfs】By cellur925
查看>>
js onclick事件传参
查看>>
WiCloud 商业Wi-Fi管理平台
查看>>