1.BOM模型
（1）BOM：浏览器对象模型（Browser Object Model）。
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
（2）BOM可实现功能
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口的大小
- 页面的前进、后退
2.window对象
（1）常用的属性
history——有关客户访问过的URL的信息。
location——有关当前 URL 的信息。
语法： window.属性名= "属性值"
示例： window.location="http://www.bdqn.cn" ;
（2）常用的方法
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var n;
function tiaoZhuan(){
window.location="new_file1.html";
}
function A(){
var result=confirm("确定要删除吗？");
if(result){
alert("删除成功");
}
else{
alert("已取消");
}
}
</script>
</head>
<body onload="">
<input type="button" value="跳转" onclick="tiaoZhuan()" />
<input type="button" value="删除" onclick="A()" />
<input type="button" value="前进" onclick="javascript:history.forward()" />
<input type="button" value="打开新的浏览器窗口" onclick="javascript:n window.open('new_file1.html','新窗体')" />
<input type="button" value="关闭新窗体" onclick="n.close()"/>
<input type="button" value="关闭当前窗口" onclick="window.close()" />
<input type="button" value="刷新" onclick="location.reload()" />
<input type="button" value="替换" onclick="location.replace('https://www.runoob.com')" />
<input type="button" value="获取当前页面的URL" onclick="alert(document.URL)"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<input type="button" value="模式后退" onload="javascript:history.back()" />
<input type="button" value="获取当前页面的URL" onclick="alert(document.URL)"/>
</body>
</html>
3.confirm()方法
（1）confirm()：将弹出一个确认对话框
语法：confirm("对话框中显示的纯文本")
示例：
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗？");
if(flag==true)
alert("删除成功！");
else
alert("你取消了删除");
</script>
（2）confirm()与alert ()、 prompt()区别
alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息。
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用。
4.open()方法
语法：window.open("弹出窗口的url","窗口名称","窗口特征”)
5.history对象
6.location对象
（1）常用属性
（2）常用方法
history对象和location对象示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>鲜花详情页面</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
margin: 0px 10px;
}
p{font-size:14px;
font-weight:bold;
}
</style>
</head>
<body>
<img src="images/flow.jpg" />
<p style="text-align:right;"><a href="javascript:history.back()">返回主页面</a></p>
<p>服务提示：</p>非节日期间，可指定时间段送达；并且允许指定送达收货人的最快时间为两小时；节日期间，只保证当日送达。<br />
配送范围：<br />
鲜花配送范围：北京、上海、深圳、天津、广州、重庆等各大中城市。<br />
蛋糕、果篮配送范围：全国大中城市。<br />
绿植配送范围：仅限于直辖市，省会城市市区。<br />
更多详细的配送区域与相应配送费率请点击这里！<br />
配送方式：<br />
专业鲜花、蛋糕礼品速递机构，送货上门。 <br />
服务时间：<br />
全年365天，节假日不休息，24小时接单； 每日送花时间：8:00-20：00。<br />
其它时间送花酌情加收10-30服务费用。 <br />
替换原则：<br />由于地域或季节的限制，需要更换主花材时，我们将电话向订货人提出更换建议，假如在有效配送时间内得不到订货人的确认，我们将采用同等价值或相同寓意的花材代替。实际送花以图片为参考，以商品规格文字说明为主。鲜花为手工做品，实际花束可能会与图示有些出入，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致。<br />
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{
margin: 0px auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
</body>
</html>
7.Document对象
(1)常用属性
语法：
document.referrer
document.URL
（2）Document对象的常用方法
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function changContent(){
//获取对像
var spn=document.getElementById("sp");
//将span对象的内容重新赋值
spn.innerHTML="离骚";
}
function getHobbies(){
var hb=document.getElementsByName("hobby");//复选框数组
for(var i=0;i<hb.length;i++){
if(hb[i].checked)//当前复选框的元素是被选中的
alert(hb[i].value);//弹出每个复选框的value
}
}
function getValues(){
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
document.getElementById("dv").innerHTML+=inputs[i].value;
}
}
</script>
</head>
<body>
<span id="sp">屈原</span>
<input type="button" value="换换内容" onclick="changContent()"/>
<input type="checkbox" name="hobby" value="play" />玩游戏
<input type="checkbox" name="hobby" value="read" />读小说
<input type="checkbox" name="hobby" value="swim" />游泳
<input type="button" value="获取爱好" onclick="getHobbies()" />
<input type="button" value="通过input标签获取值" onclick="getValues()"/>
<div id="dv" style="background-color: turquoise;"></div>
</body>
</html>
8.JavaScript内置对象
- Array：用于在单独的变量名中存储一系列的值
- String：用于支持对字符串的处理
- Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
- Date：用于操作日期和时间
9.Date对象
语法：
var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss
示例：
var today=new Date(); //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");
（1）常用方法
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
//定时函数
<body onload="setInterval('showDate()', 1000)">
<div id="dv"></div>
<script type="text/javascript">
function showDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
var result=year+"年"+month+"月"+day+"日"+":"+hour+":"+minute+":"+second;
document.getElementById("dv").innerHTML=result;
}
</script>
</body>
</html>
（2）定时函数
setTimeout()
语法：
setTimeout("调用的函数",等待的毫秒数)
示例：
var myTime＝setTimeout("disptime() ", 1000 );
setInterval()
语法：
setInterval("调用的函数",间隔的毫秒数)
示例：
var myTime＝setInterval("disptime() ", 1000 );
如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()
（3）清除函数
clearTimeout()
语法：
clearTimeout(setTimeOut()返回的ID值)
示例：
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；
clearInterval ()
语法：
clearInterval(setInterval()返回的ID值)
示例：
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；
扫一扫
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
