BOM与DOM的相关对象,参考文档:文档
今日内容:
1. JavaScript:
1) ECMAScript
2) BOM
3) DOM
1、事件与DOM的案例介绍
案例1
<img id="light1" src="image1/off.gif" onclick="fun1()"/> <!--注意,我们在标签内部设置的时候需要加括号-->
<img id="light2" src="image1/on.gif" />
<script>
function fun1() {
alert("我被点击了");
}
function fun2() {
alert("我也被...");
}
var light2 = document.getElementById("light2");
light2.onclick = fun2; //我们在标签外面设置的时候就不需要加括号,如果在外面设置onclick的时候加括号,就相当于直接调用fun2函数。我们需要的是点击图片才加载函数。
</script>
案例2
<body>
<img id="light1" src="image1/off.gif"/>
<script>
var light1 = document.getElementById("light1");
var flag = false;//注意flag需要设置在外面
light1.onclick = function () {
if(flag)
{
light1.src = "image1/on.gif";
flag = false;
}
else
{
light1.src = "image1/off.gif";
flag = true;
}
}
</script>
</body>
我们的IDEA没办法显示出我们代码里面的错误,我们可以通过在浏览器界面点击F12,然后点击控制台console就可以找到错误。
2、BOM:
概念:Browser Object Model 浏览器对象模型, 将浏览器的各个组成部分封装成对象。
组成:浏览器各个对象的解析见视频5
* Window:窗口对象
* Navigator:浏览器对象
* Screen:显示器屏幕对象
* History:历史记录对象
* Location:地址栏对象
Window:窗口对象
window对象的相应方法如下
1. 与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值:获取用户输入的值
2. 与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁(调用格式:window对象.close)
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
window方法的代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="openBut" value="打开窗口">;
<input type="button" id="closeBut" value="关闭窗口">;
<script>
/*打开关闭方法
var OButOpenNode = document.getElementById("openBut");
var newWin;
OButOpenNode.onclick = function () {
newWin = open("http://www.baidu.com");
};
var oButCloseNode = document.getElementById("closeBut");
oButCloseNode.onclick = function () {
// close();//关闭的是当前窗口
newWin.close();//如果要关闭打开的新窗口,必须使用open获取新窗口的对象,然后使用新窗口调用close方法
//注意这个方法是窗口自身的方法,因此要使用“新窗口.close()”关闭
}
*/
//一次性定时器
// setTimeout("fun1()",4000);//第一种调用方法,在“”里面,使用fun1()调用
// setTimeout(fun1,3000);//第二种调用方法,在“”外面,直接使用fun1函数名调用即可
//注意,以后调用方法的时候,如果在“”里面的,需要给方法加(),而在“”外面,则直接使用方法名调用即可,不需要加()
//循环定时器
// setInterval(fun1,2000);
//取消定时器
// var timeout1 = setTimeout(fun1,3000);
// clearTimeout(timeout1);
//取消循环定时器
var timeout2 = setInterval(fun1,2000);
clearInterval(timeout2);
function fun1() {
alert('boom')
}
</script>
</body>
</html>
轮播图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
分析:
1.在页面上使用img标签展示图片
2.定义一个方法,修改图片对象的src属性
3.定义一个定时器,每隔3秒调用方法一次。
-->
<img src="image1/banner_1.jpg" id="image" width="100%"><!--设置图片宽度占屏幕的100% -->
<script>
var num=1;
function fun() {
var oImgNode = document.getElementById("image");
oImgNode.src = "image1/banner_"+num+".jpg";
num++;
if(num>3)
{
num = 1;
}
}
setInterval(fun , 3000);
</script>
</body>
</html>
window对象的属性:
1. 获取其他BOM对象:
history
location
Navigator
Screen:
2. 获取DOM对象
document
相应的代码示例如下:
<script>
//通过window的属性获取其他BOM对象
var h1 = window.history;
alert(h1);
//当然,window可以省略
var n = navigator;
alert(n);
//通过window属性同样可以获取DOM的document对象
// window.document.getElementById(...);
document.getElementById(...);//同样,window也可以省略
</script>
window对象的特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
Location:地址栏对象
创建(获取):
1. window.location
2. location
方法:
* reload() 重新加载当前文档。刷新
属性:
* href 设置或返回完整的 URL。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="refresh" id="btn1">;
<input type="button" value="baidu" id="btn2">;
<script>
//注意,这里使用window对象的location属性来获取Location对象,因此这里用的时候需要使用location(l是小写的)
var oButBode_1 = document.getElementById("btn1");
oButBode_1.onclick = function () {
location.reload();
}
var href = location.href;
document.write(href);// http://localhost:63342/java-demo1/lkj_html_module/domAndBomDemo.html?_ijt=10p1k5c0i3e15ke6nlbo1fh44f(url已经对其进行编码)
var oButBode_2 = document.getElementById("btn2");
oButBode_2.onclick = function () {
location.href = "https://www.baidu.com";
}
</script>
</body>
</html>
自动跳转案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
font-size: 100px;/*设置文字的大小——font-size属性*/
text-align: center;/*将文字居中的属性是text-align*/
}
p span{
color: #FF0000;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后,自动跳转到首页...
</p>
<script>
var second = 5;
var time = document.getElementById("time");
function showTime() {
second--;
if(second<=0)
{
location.href = "http://www.baidu.com";
}
time.innerHTML = second+"";//将数字转换为字符串显示
}
setInterval(showTime , 1000);//每隔1秒就执行一次showTime,自动倒计时1秒
</script>
</body>
</html>
History:历史记录对象
注意,History只能代表当前窗口的历史记录对象,而不是代表浏览器的历史记录。
创建(获取):
1. window.history
2. history
方法:
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数:
* 正数:前进几个历史记录
* 负数:后退几个历史记录
属性:
* length 返回当前窗口历史(不是整个浏览器)列表中的 URL 数量。
跳转演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
<