使用jQuery快速高效制作网页交互特效——02 第二章 JavaScript操作BOM对象

浏览器对象模型（BOM）是javascript的组成之一，

它提供了独立与浏览器窗口进行交换的对象，使用浏览器对象模型可以实现与HTML的交互。

它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。

BOM：浏览器对象模型（Browser Object Model）：BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；

BOM是一个分层结构：

            结构：

★Window对象是整个BOM的核心，在浏览器中打开网页后，首先看到是浏览器窗口，即顶层的window对象；其次是网页内容，即document(文档)。

 BOM可实现的功能：

    1）.弹出的浏览器窗口。

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

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

Window对象也称为浏览器对象。当浏览器打开HTML文档时，通常会创建一个window对象，

如果文档定义了一个或多个框架，浏览器将为原始文档创建一个window对象，同时为每个框架另外创建一个window对象。

语法：

       window.属性名=”属性值”

        eg：window.location=”http//www.baidu.com”,    //表示跳转到百度的官方主页。

                     screen.height返回显示浏览器的屏幕的高度，单位为像素。

属性名称

说      明

history

有关客户访问过的URL的信息

location

有关当前 URL 的信息

Screen

只读属性，包含有关客户端显示屏幕的信息

语法：

   Window.方法名（）；

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

          Eg：alert()；也可以写成：window.alert()；

方法名称

说      明

prompt( )

显示一个可提示并且用户可以输入的对话框，取消返回null,确定返回用户输入的值

alert( )

显示带有一个提示信息和一个确定按钮的警示框 ，无返回值

confirm( )

显示一个带有提示信息、“确定”和“取消”按钮的对话框，返回true或false

close( )

关闭浏览器窗口

open( )

打开一个新的浏览器窗口，加载给定 URL 所指定的文档

setTimeout( )

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

setInterval( )

按照指定的周期（以毫秒计）来调用函数或表达式

●confirm()方法：将弹出一个确认对话框；

语法：

   confirm("对话框中显示的纯文本")

       eg：

              <script type="text/javascript">

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

                if(flag==true)

                      alert("删除成功！");

               else

                     alert("你取消了删除");

               </script>

confirm()与alert ()、 prompt()区别：

   1、alert( )：只有一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

   2、prompt( )：两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，

常用于收集用户关于特定问题而反馈的信息

   3、confirm( )：只有一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

●close()：用于关闭浏览器窗口；

        语法：window.close()；

●open()：再页面上弹出一个新的浏览器窗口；

        语法：window.open("弹出窗口的url","窗口名称","窗口特征”)；

★窗口的特征属性：

名称

说      明

back()

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

forward()

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

go()

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

★history.back()等价于history.go(-1)：浏览器中的“后退”；

★history.forward()等价于history.go(1)：浏览器中的“前进”；

★go(n)方法中的n是一个具体的数字，当n>0时，进入历史列表中前进的第n个页面。

当n<0时，进入历史列表中后退的第n个页面。

           Eg：  A） history.go(1)代表前进一页，等价于forward()方法，想当于浏览器中的“前进”按钮；

                    B）history.go(-1)代表后退一页，等价于back()方法，想当于浏览器中的“后退”按钮；

常用的属性

名称

说      明

host

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

hostname

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

href

设置或返回完整的URL

常用的方法

名称

说      明

reload()

重新加载当前文档

replace()

用新的文档替换当前文档

★referrer的语法格式如下：

         document.referrer;

              注：当前文档如果不是通过超连接访问的，则document.referrer的值为null

★URL的语法：

       document.URL;

常用属性

名称

说      明

referrer

返回载入当前文档的URL

URL

返回当前文档的URL

常用方法

名称

说      明

getElementById()

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

getElementsByName()

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

getElementsByTagName()

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

write()

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

★getElementById():方法一般用于访问div、图片、表单元素、网页标签、等，但要求访问对象的id是唯一的；

★getElementsByName()方法与getElementById()方法相似，单它访问的是具有name属性的元素，由于一个文档中的name属性可能不唯一，因此，getElementsByName()方法一般用于访问一组相同name属性的元素，eg：具有相同name属性的单选按钮、复选框等；

★getElementsByTagName()方法是按标签来访问页面元素的，一般用于访问一组相同的元素；eg：一组<input>、一组图片；

在javaScript中，系统的内置对象有Date对象、Array对象、String对象和Math对象等。

A） Date对象：用于操作日期和事件。

B） Array对象：用于在单独的变量名中存储一系列的值。

C） String对象：用于支持对字符串的处理。

D） Math对象：执行常用的数学任务，它包含了若干个数字常量和函数。

●Date对象：

       var 日期对象=new Date(参数)；//参数格式：MM  DD,YYYY,hh:mm:ss

              eg：var  today=new  Date(); //将当前的时间存储在变量today中

                     var  tdate=new  Date(“July  15,2013,16:10:12”);//以字符串格式传入值

●Math对象：

   Math对象提供了许多与数学相关的功能，它是javaScript的一个全局对象，不需要创建，直接作为对象使用就可以调用其属性和方法。

◆Math对象的常用方法：

JavaScript中提供了两个定时函数setTimeout()和setInterval()，此外，还提供了用于清除定时器的两个函数clearTimeout()和clearInterval()。如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()；

        1.  setTimeout（）：setTimeout()用于在指定的毫秒后调用函数或计算表达式，

                语法：

                     setTimeout(“调用的函数名称”，等待的毫秒数)；

                  eg：var  myTime＝setTimeout("disptime() ", 1000 );// 1秒(1000毫秒)之后执行函数disptime()一次

       2.  setInterval（）：setInterval（）按照指定的周期（单位毫秒）来调用函数或表达式。

                                       setInterval()会不停的调用函数，直到窗口关闭或被其他方法强制停止；

              语法：

                      setInterval(“调用的函数名称”,周期性调用函数之间间隔的毫秒数)；

                    eg：var  myTime＝setInterval("disptime() ", 1000 );// 每隔1秒(1000毫秒)执行函数disptime()一次

       3.  clearTimeout()：

             语法：

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

                   eg：var  myTime＝setTimeout("disptime() ", 1000 );

                          clearTimeout(myTime)；

       4.clearInterval ()：

             语法：

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

                  eg：var  myTime＝setInterval("disptime() ", 1000 );

                         clearInterval(myTime)；