JQuery制作网页—— 第二章 JavaScript操作BOM对象

1、window对象：

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

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

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

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

BOM是一个分层结构：

            结构：

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

BOM可实现的功能：

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

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

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

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

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

2、window常用的属性：

语法：        window.属性名=”属性值”         eg：window.location=”http//www.baidu.com”,    //表示跳转到百度的官方主页。                      screen.height返回显示浏览器的屏幕的高度，单位为像素。
属性名称	说      明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息
Screen	只读属性，包含有关客户端显示屏幕的信息

3、window常用的方法：

语法：

   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","窗口名称","窗口特征”)；

★窗口的特征属性：

属性名称	说      明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes | no  |1 | 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes | no  |1 | 0	是否显示滚动条。黙认是yes
location=yes | no  |1 | 0	是否显示地址地段。黙认是yes
status=yes | no  |1 | 0	是否添加状态栏。黙认是yes
menubar=yes | no  |1 | 0	是否显示菜单栏。黙认是yes
resizable=yes | no  |1 | 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes | no  |1 | 0	是否显示标题栏。黙认是yes
fullscreen=yes | no  |1 | 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

4、history对象：history对象提供用户最近浏览过的URL列表，即浏览历史。出于隐私方面的考虑，history对象不再允许脚本访问已经访问过的实际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()方法，想当于浏览器中的“后退”按钮；

5、location对象：location对象提供当前页面的URL信息，并且可以重新装载当前页面（刷新）或装入新页面。

常用的属性
名称	说      明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL
常用的方法
名称	说      明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

6、document对象：document对象即是window对象的一部分，又代表了整个HTML文档，可以用来访问页面中的所有元素。所以在使用document对象时，除了要适用于各个浏览器外，也要符合W3C的标准。

★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>、一组图片；

7、JavaScript内置对象：

在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”);//以字符串格式传入值

方法	说 明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数
★getFullYear()：返回四位数的年份；getYear()：返回二位或四位的年份；常用于获取年份的是：getFullYear()； ★getDay()：获取星期几；0表示周日，1表示周一，6表示周六； ★各部分时间表示的范围：除号数（一个月中的每一天）外，其他均从0开始计数，        Eg：月份0~11，0代表1月份，11代表12月份；

●Math对象：

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

◆Math对象的常用方法：

方法	说 明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365
★random（）返回的随机数包括0，不包括1，都是小数，   eg：选择一个1~100中的整数（包括1和100）：var iNum=Math.floot(Math.random()*100+1)；       返回2~99，只有98个数字，第一个值为2：var iNum=Math.floor(Math.random()*98+2)；

8、定时函数：

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)；