JavaWeb学习——JavaScript操作BOM对象

JavaWeb学习——简单学习JavaScript操作BOM对象

1.BOM模型

①BOM：浏览器对象模型（Browser Object Model）
BOM的继承体系结构：

②BOM可实现的功能：

• 弹出新的浏览器窗口
• 移动，关闭浏览器窗口以及调整窗口大小
• 页面的前进、后退
• …

2.window对象的常用属性

• history：有关客户访问过的URL信息
• location：有关当前URL的信息

①语法：
window.属性名=“属性值”
例：

点我

效果展示：


②window对象常用方法

• prompt( )：显示可提示用户输入的对话框

  点我展示效果
  

  效果展示：
  
  

• alert( )：显示带有一个提示信息和一个确定按钮的警示框

   效果展示：
  

  

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

  效果展示：
  
  当按下取消时，控制台打印：
  

• close( )：关闭浏览器窗口

   点我关闭当前页面
  

  效果展示：
  
  当点击链接后，该窗口就会关闭

• open( ) ：打开一个新的浏览器窗口，加载给定 URL 所指定的文

  点我打开百度页面
  

  效果展示：
  
  点击后打开百度主页

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

• setInterval( )： 按照指定的周期（以毫秒计）来调用函数或表达式
  时钟案例：

  效果展示：
  
  点击start后时钟开始走动：
  
  点击stop后时钟停下：
  

3.history对象

①常用方法

• back()：加载 history 对象列表中的前一个URL
  相当于浏览器的后退按钮
  
• forward()：加载 history 对象列表中的下一个URL
  相当于浏览器的前进按钮
  
• go()：加载 history 对象列表中的某个具体URL
  注意：back()等价于go(-1)； forward()等价于go(1)

4.location对象

①常用属性

• hash：设置或返回从井号 (#) 开始的 URL（锚）。

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

  效果展示：
  

• hostname：设置或返回当前 URL 的主机名。

  效果展示：
  

• href：设置或返回完整的 URL。

  效果展示：
  

• pathname：设置或返回当前 URL 的路径部分。

  效果展示：
  

• port：设置或返回当前 URL 的端口号。

  效果展示：
  

• protocol：设置或返回当前 URL 的协议。

  效果展示：
  

• search：设置或返回从问号 (?) 开始的 URL（查询部分）。

  效果展示：
  
  ②常用方法：

• assign()：加载新的文档。

  效果展示：
  
  点击按钮后：
  

• reload()： 重新加载当前文档

  相当于刷新按钮：
  

• replace()：用新的文档替换当前文档

  效果展示：
  
  
  注意：点击按钮后是替换当前网页，所以不能回退，相当于新开的网页

5.Document对象

①常用属性

• URL： 返回当前文档的 URL。

  都是获取相关信息的操作，这里就以URL为例：

  

• cookie：设置或返回与当前文档有关的所有 cookie。

• domain：返回当前文档的域名。

• lastModified ：返回文档被最后修改的日期和时间。

• referrer：返回载入当前文档的文档的 URL。

• title：返回当前文档的标题。

②常用方法

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

      路边的野花不要踩
  

  效果展示：
  

• getElementsByName()：返回带有指定名称的对象集合。

      这是一个spqn标签
  

  效果展示：
  

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

      这是一个spqn标签
  

  效果展示：
  

• open()：打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。

• close()：关闭用 document.open() 方法打开的输出流，并显示选定的数据。

• write()：向文档写 HTML 表达式 或 JavaScript 代码。

• writeln() ：等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

6.Date对象

①常用方法

• 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日）以来的毫秒数

这些方法见名知意，这里就不做展示了，下面会以案例展示

②Date案例——时钟特效

效果展示（相当于时钟）：

7.定时函数

• 设置定时：
  ①setTimeout()
  如果你想等待多长时间后调用函数，可以使用该方法
  语法：setTimeout(“调用的函数”,等待的毫秒数)
  ②setInterval()
  如果你想每隔多久执行一次该函数，你可以使用该方法
  语法：setInterval(“调用的函数”,间隔的毫秒数)

• 清除定时
  ①clearTimeout()
  语法：clearTimeout(setTimeOut()返回的ID值)
  ② clearInterval()
  语法：clearInterval(setInterval()返回的ID值)

8.Math对象

①常用方法

• ceil()：对数进行上舍入

  结果展示：
  

• floor() 对数进行下舍入

  结果展示：
  

• round() 把数四舍五入为最接近的数

  结果展示：
  

• random() 返回0~1之间的随机数

  效果展示：
  

②案例演示
案例：返回十个整数在1-100之间

效果展示：