javascript入门经典---笔记3

最新推荐文章于 2023-10-24 22:05:07 发布

常戚戚

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量638

点赞数

本文链接：https://blog.csdn.net/u010293702/article/details/40304755

版权

5.1浏览器对象

浏览器对象模型（BOM）

document 对象代表了浏览器的页面，history对象包含了用户所访问过的页面的历史信息，navigator 对象包含了浏览器自身的相关信息，screen对象包含了客户端计算机显示器显示能力的信息，location 对象则包含了浏览器所加载的当前页面的 URL 信息。

BOM 是一个有层次的对象结构，顶端是window对象，页面包含在window框架中。在BOM中，document 对象用于代表页面本身。

上图描述了window对象与document 对象的关系。

1 window对象

window对象是一个全局对象，因此可以直接使用全局对象的属性和方法，而无需写出全局对象名。比如window 对象的alert（）方法，我们可以直接用alert（“**”）代替window . alert("**")。

2 document对象----代表页面本身的对象

2.1 images 数组对象------不是imagines。。。。

页面中每一个img对象都被保存在images[ ] 数组中，他是document 对象的一个属性。页面中的第一个图片，用document.images[0] 表示。

对于<img name="myimange" src=""> 则也可以用document.images[“myimaine”]来调用。

<html>

<body>
<img width="200" height="150" name="img1" src="" > 
<script type="text/javascript"> //-------script在 img 下面可以正常加载-------
var myimages= new Array ("usa.gif","canada.gif","jamaica.gif","mexico.gif");
document.images["img1"].src=myimages[1];
</script>
</body>
</html>

但是当这样写时，图片没有加载出来？？

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var myimages[]= new Array (1.gif,2.gif);
document.images("myimane").src=myimages[0];
</script>
</head>
<body>
<img alt="sorry" src="" name=myimane> //------alt：当图片不能打开时显示alt设置的说明文字----

</body>
</html>

2.2 links 数组

links[ ] 数组表示页面中所有超链接的集合

3 将事件处理代码连结到web 页面的事件

当需要一个触发事件才可以触发所需要发生的事件时，可以将希望执行的事件处理代码定义为一个函数，然后用onclick 来调用-------》登录跳转

用window对象的load 事件将页面中的所有超链接的href 属性列出来：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var link = new Array();
var las = document.getElementById("a");
function displayLinks(){
for(var i=0;i<document.links.length;i++)
{link[i]=document.links[i].href;//-----输出的是超链接里的href属性------
}
var mylink = link.join(";"); //------join（）方法可以将数组中所有元阿苏转换为字符-------
alert(mylink);  //-------这里如果用document.write的话，因为onload 的时候执行，文档流已经关闭了 write会重新打开文档流，把原文档冲掉---------
}
</script>
</head>
<body  οnlοad="displayLinks()">
<div id="a">
<a href="http://www.baidu.com">here<br></a>
<a href="http://www.zhihu.com">知乎<br></a>
<a href="http://www.sina.com">新浪<br></a>
<a href="http://www.tengxun.com">腾讯</a>
</div>
</body>
</html>

或者不用onload 直接把 JS 代码写到body 里，因为如果还是在head里面，用alert 得到的 href 是空的。下面直接把得到的字符串写入另外一个<div>中了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body >
<div id="a">
<a href="http://www.baidu.com">here<br></a>
<a href="http://www.zhihu.com">知乎<br></a>
<a href="http://www.sina.com">新浪<br></a>
<a href="http://www.tengxun.com">腾讯</a>
<script type="text/javascript">
var link = new Array();
var a = document.getElementById("a");
for(var i=0;i<document.links.length;i++)
{link[i]=document.links[i].href;//-----输出的是超链接里的href属性------
}
var mylink = link.join(";"); //------join（）方法可以将数组中所有元阿苏转换为字符-------
var para=document.createElement("div");
para.innerHTML = mylink;  //-----这里不能用document.write了------
a.appendChild(para);
</script>
</div>
</body>
</html>

鼠标指针移动到图片上时切换成另外一张图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//var myimg = document.images["changeimg"];在外面定义的话出错？？？
function mouseover(){
	var myimg = document.images["changeimg"];
	myimg.src="Img1.jpg"
}
function mouseout(){
	var myimg = document.images["changeimg"];
	myimg.src="Img2.jpg"
}

</script>
</body>
<img alt="n" src="Img1.jpg" name="changeimg"  onmouseOver="mouseover();"  onmouseOut="mouseout();">
</html>

为什么这个错了？？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//var myimg = document.images["changeimg"];在外面定义的话出错？？？

function mouseout(){
	//var myimg = document.images["changeimg"];
	if(document.images["changeimg"].src != "Img2.jpg")
	 document.images["changeimg"].src="Img2.jpg";
	  else  document.images["changeimg"].src="Img1.jpg";
}

</script>
</body>
<img alt="n" src="Img1.jpg" name="changeimg"   οnclick="mouseout();">
</html>