第二章 JavaScript 操作BOM对象

第二章 JavaScript 操作BOM对象

1.BOM模型

BOM：浏览器对象模型（Browser Object Model）

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

BOM可实现功能：

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

2.window对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

常用的属性

属性名称	说 明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

window.属性名= "属性值"
window.location="http://www.kgc.cn" ; 

history:

名称	说 明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

//history
<script>
    //加载历史列表中前一个 URL,这等同于在浏览器中点击后退按钮,history.go(-1)
    function goBack() {
    window.history.back()
    //加载历史列表中下一个 URL,这等同于在浏览器中点击前进按钮,history.go(1) 
    function goForward() {
        window.history.forward()
    }
}
</script>
<input type="button" value="Back" onclick="goBack()">
<input type="button" value="Forward" onclick="goForward()">

location：

常用属性：

名称	说 明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

• window.location.href 返回当前页面的 href (URL)
• window.location.hostname 返回 web 主机的域名
• window.location.pathname 返回当前页面的路径或文件名
• window.location.protocol 返回使用的 web 协议（http: 或 https:）
• window.location.assign 加载新文档

<script>
document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;
document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;
document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;
document.getElementById("demo").innerHTML = "页面协议是 " + window.location.protocol;
document.getElementById("demo").innerHTML = "端口号是： " + window.location.port;
//加载新文档
function newDoc() {
    window.location.assign("https://www.w3school.com.cn")
}
</script>
<input type="button" value="Load new document" onclick="newDoc()">

常用方法：

名称	说 明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

location和history对象的应用：

主页面使用href实现跳转和刷新本页

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>

常用的方法

方法名称	说 明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout(function,milliseconds )	在指定的毫秒数后调用函数或计算表达式
setInterval(function,milliseconds )	按照指定的周期（以毫秒计）来调用函数或表达式
clearTimeout()	停止执行setTimeout()中规定的函数
clearInterval()	停止执行setInterval()中规定的函数

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

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

<script type="text/javascript">
    var flag=confirm("确认要删除此条信息吗？");
if(flag==true)
    alert("删除成功！");
else
    alert("你取消了删除");
</script>

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。处于全屏模式的窗口必须同时处于剧院模式

3.Document对象

常用属性

名称	说 明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

应用

• 判断页面是否是链接进入
• 自动跳转到登录页面

var preUrl=document.referrer;  //载入本页面文档的地址
if(preUrl==""){	
      document.write("<h2>您不是从领奖页面进入，5秒后将自动 
                         跳转到登录页面</h2>");
      setTimeout("javascript:location.href='login.html'",5000);
}

常用方法

名称	说 明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

• 动态改变层、标签中的内容

  document.getElementById("book").innerHTML="现象级全球畅销书";
  

• 访问相同name的元素

  var aInput=document.getElementsByName("season");
  var sStr="";
  for(var i=0;i<aInput.length;i++){
      sStr+=aInput[i].value+"&nbsp;&nbsp;";
  }
  document.getElementById("replace").innerHTML=sStr;
  

• 访问相同标签的元素

  var aInput=document.getElementsByTagName("input");
  var sStr="";
  for(var i=0;i<aInput.length;i++){
      sStr+=aInput[i].value+"&nbsp;&nbsp;";
  }
  document.getElementById("replace").innerHTML=sStr;
  

4.JavaScript内置对象

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

String：用于支持对字符串的处理

Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

Date：用于操作日期和时间

Date对象

使用Date对象获得时、分、秒

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

创建Date对象：

• new Date()
• new Date(year, month, day, hours, minutes, seconds, milliseconds)
• new Date(milliseconds)
• new Date(date string)

JavaScript 从 0 到 11 计算月份。

一月是 0。十二月是11。

6个数字指定年、月、日、小时、分钟、秒：

var  today=new Date();   //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");
console.log(today);
console.log(tdate);	

Tue Sep 10 2024 15:21:17 GMT+0800 (中国标准时间)
date.html:12 Sun Sep 01 2013 14:58:12 GMT+0800 (中国标准时间)

常用方法：

方法	说 明
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日）以来的毫秒数

<body>
<p>JavaScript 中的内部时钟从 1970 年 1 月 1 日午夜开始计算。</p>
<p>getTime() 函数返回从那时起的毫秒数：</p>
<p id="getTime"></p>
<p>getFullYear() 方法返回日期的完整年：</p>
<p id="getFullYear"></p>
<p>getMonth()方法以 0 到 11 之间的数字返回日期的月份。</p>
<p>要获得正确的月份，您必须添加 1:</p>
<p id="getMonth"></p>
<p>getDate() 方法以数字（1-31）返回日期的日：</p>
<p id="getDate"></p>
<p>getHours() 方法以数字（0-23）返回日期的小时：</p>
<p id="getHours"></p>
<p>getMinutes() 方法以数字（0-59）返回日期的分钟：</p>
<p id="getMinutes"></p>
<p>getSeconds() 方法以数字（0-59）返回日期的秒：</p>
<p id="getSeconds"></p>
<p>getDay() 方法将周名作为数字返回：</p>
<p id="getDay"></p>
</body>
<script>
var d = new Date();
document.getElementById("getTime").innerHTML = d.getTime();
document.getElementById("getFullYear").innerHTML = d.getFullYear();
document.getElementById("getMonth").innerHTML = d.getMonth() + 1;
document.getElementById("getDate").innerHTML = d.getDate();
document.getElementById("getHours").innerHTML = d.getHours();
document.getElementById("getMinutes").innerHTML = d.getMinutes();
document.getElementById("getSeconds").innerHTML = d.getSeconds();
document.getElementById("getDay").innerHTML = d.getDay();
</script>

时钟特效：

<body>
    <div id ="myclock"></div>
</body>
<script>
function disptime(){
var today = new Date();  
var hh = today.getHours(); 
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+":"+ss;
}
disptime();
</script>
现在是:15:51:29 固定时间不会改变

定时函数：

• setTimeout(function(), milliseconds)在等待指定的毫秒数后执行函数。
• setInterval(function(), milliseconds)等同于 setTimeout()，但持续重复执行该函数。

//setTimeout() 方法
<body>
    <input name="s" type="button" value="显示提示消息" onclick="timer()" />
</body>
<script>
function timer(){
    var t=setTimeout("alert('3 seconds')",3000);
}
</script>

//setInterval() 方法
<script>
//每隔1秒(1000毫秒)执行函数disptime()一次
var  myTime＝setInterval("disptime() ", 1000 );
</script>
如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

清除函数（停止执行）：

• clearTimeout(setTimeOut()返回的ID值)停止执行 setTimeout() 中规定的函数。
• clearInterval(setInterval()返回的ID值)停止 setInterval() 方法中指定的函数的执行

//clearTimeout();
var  myTime=setTimeout("disptime() ", 1000 );
clearTimeout(myTime);
//clearInterval;
var  myTime=setInterval("disptime() ", 1000 );
clearInterval(myTime);

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

//返回值是 x 四舍五入为最接近的整数
Math.round(6.8);    // 返回 7
Math.round(2.3);    // 返回 2
//返回值是 x 的 y 次幂
Math.pow(8, 2);     // 返回 64
//返回 x 的平方根
Math.sqrt(64);      // 返回 8
//返回 x 的绝对（正）值
Math.abs(-4.7);     // 返回 4.7
//返回值是 x 上舍入最接近的整数
Math.ceil(6.4);     // 返回 7
//返回值是 x 下舍入最接近的整数
Math.floor(2.7);    // 返回 2
//返回介于 0（包括） 与 1（不包括） 之间的随机数
Math.random();     // 返回随机数

实现返回的整数范围为2~99：

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

常量：

Math.E          // 返回欧拉指数（Euler's number）
Math.PI         // 返回圆周率（PI）
Math.SQRT2      // 返回 2 的平方根
Math.SQRT1_2    // 返回 1/2 的平方根
Math.LN2        // 返回 2 的自然对数
Math.LN10       // 返回 10 的自然对数
Math.LOG2E      // 返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E     // 返回以 10 为底的 e 的对数（约等于 0.434）

随机选择颜色：

function selColor(){
    var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
    var num=Math.ceil(Math.random()*7)-1;
    document.getElementById("color").innerHTML=color[num];
}