zoukankan      html  css  js  c++  java

  • javaScript 操作BOM对象

    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] view plain copy
     
    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="修改名称" onclick="changbook()">  
    9.     <input name="b2" type="button" value="input内容" onclick="inputnei()"/>  
    10.     <input name="b3" type="button" value="司机内容" onclick="getElementByname()"/>  
    11.     <input name="b4" type="button" value="清空页面内容" onclick="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] view plain copy
     
    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] view plain copy
     
    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] view plain copy
     
    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] view plain copy
     
    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] view plain copy
     
    1. var text1=setInterval("time1()",1000);  

    6-1）清楚函数

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

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

            

            

            栗子一：      

    [javascript] view plain copy
     
    1. <body>  
    2. <div id="times"></div>  
    3. <input name="btn" type="button" value="开始时间" onclick="start()">  
    4. <input name="btn" type="button" value="停止时间" onclick="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] view plain copy
     
      1. <body>  
      2. <div id="times"></div>  
      3. <input name="btn" type="button" value="开始时间" onclick="start()">  
      4. <input name="btn" type="button" value="停止时间" onclick="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>  
  • 相关阅读:
    【马克-to-win】学习笔记—— 第五章 异常Exception
    【马克-to-win】—— 学习笔记
    Eclipse 日文乱码怎么解决Shift_JIS
    DB2设置code page（日文943）
    如何得到一个接口所有的实现类（及子接口）？例如：Eclipse IDE
    【VBA】随机数
    【VBA】利用Range声明Array（一维/二维）
    【VBA】Do While……Loop循环，遍历某列
    【58沈剑架构系列】DB主从一致性架构优化4种方法
    【58沈剑架构系列】主从DB与cache一致性
  • 原文地址：https://www.cnblogs.com/ting1106/p/8696152.html
Copyright © 2011-2022 走看看