JavaScript 第三章作业

1.简述Core DoM与HTML DOM 访问和修改节点属性值的方法

1、document.getElementById("对象的id");获取单个对象，独立访问某一个对象的时候
2、document.getElementsByName("对象的name");根据网页元素的name获取对象，获取的是节点列表（对象数组）
3、document.getElementsByTagName("标签的名称");根据网页标签名称获取对象（节点列表（对象数组））返回的也是一个对象的数组

2.简述style、className设置元素样式的异同

style 只能写在当前dom上，不能多个dom共用，classname 写一次，可以在多个dom上共用，style的权重值比较大

3.制作点击不同的数字链接显示不同的图片，使用setAttribute()的方式改变图片的名称
实现代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>图片轮换</title>
	<link rel="stylesheet" href="css/scroll.css">
	<script type="text/javascript">
		function Img(img){
			var imgs = document.getElementById("photo");
			imgs.setAttribute("src","images/"+img)
		}
	</script>
</head>

<body>
<div class="scroll">
	<div id="num">
		<a href="javascript:Img('1.gif')">1</a>
		<a href="javascript:Img('2.gif')">2</a>
		<a href="javascript:Img('3.jpg')">3</a>
		<a href="javascript:Img('4.jpg')">4</a>
		<a href="javascript:Img('5.gif')">5</a>
	</div>
	<img src="images/1.gif" alt="图片" id="photo"/>
</div>
</body>
</html>

4.制作单击"再上传一个图片"按钮就增加一行，可以增加许多相同的图片上传的行
实现代码如下:

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>上传文件</title>
		<style>
			#main {
				margin: 0 auto;
				width: 500px;
			}
			
			dl {
				clear: both;
				width: 100%;
			}
			
			dt {
				float: left;
				width: 100px;
				text-align: right;
			}
		</style>
		<script type="text/javascript">
			function Upload() {
				var NewUpload = document.getElementById("upload").cloneNode(true);
				var OldUpload = document.getElementById("up");
				OldUpload.parentNode.insertBefore(NewUpload, OldUpload);
			}
		</script>
	</head>

	<body>
		<div id="main">
			<dl id="upload">
				<dt>文件路径：</dt>
				<dd><input name="fileImages" type="file" /></dd>
			</dl>
			<div id="addBtn"><input id="up" type="button" value="再上传一个文件" onclick="Upload()" /></div>
		</div>
	</body>

</html>

5.制作Tab切换效果，当鼠标指针放在"小说" “非小说” 或 "少儿"上时，标题背景变成另一个图片，鼠标指针变成手状，并且下面的图书标题变成对应类别下面的标题
实现代码如下:

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>TAB切换</title>
		<link href="css/tab.css" rel="stylesheet">

	</head>

	<body>
		<div class="div_bg">
			<ul>
				<li id="bg1">
					<a class="white" onmousemove="move(1)">小说</a>
				</li>
				<li id="bg2">
					<a class="white" onmousemove="move(2)">非小说</a>
				</li>
				<li id="bg3">
					<a class="white" onmouseover="move(3);">少儿</a>
				</li>
			</ul>
			<div id="book1" style="display: none;">
				<a href="#" target=_blank>1.时间旅行者的妻子</a><br>
				<a href="#" target=_blank>2.女心理师（下）</a><br>
				<a href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
				<a href="#" target=_blank>4.女心理师（上）</a><br>
				<a href="#" target=_blank>5.小时候</a><br>
				<a href="#" target=_blank>6.追风筝的人</a><br>
				<a href="#" target=_blank>7.盗墓笔记2</a><br>
				<a href="#" target=_blank>8.输赢</a>
			</div>
			<div id="book2">
				<a href="#" target=_blank>1.人生若只如初见</a><br>
				<a href="#" target=_blank>2.高效能人士的七个..</a><br>
				<a href="#" target=_blank>3.求医不如求己</a><br>
				<a href="#" target=_blank>4.人体使用手册</a><br>
				<a href="#" target=_blank>5.孩子，把你的手给我</a><br>
				<a href="#" target=_blank>6.别笑！我是英文单词书</a><br>
				<a href="#" target=_blank>7.人体经络使用手册</a><br>
				<a href="#" target=_blank>8.股市稳赚</a>
			</div>
			<div id="book3">
				<a href="#" target=_blank>1.斯凯瑞金色童书・..</a><br>
				<a href="#" target=_blank>2.哈利・波特与“混..</a><br>
				<a href="#" target=_blank>3.不一样的卡梅拉（..</a><br>
				<a href="#" target=_blank>4.它们是怎么来的</a><br>
				<a href="#" target=_blank>5.五・三班的坏小子..</a><br>
				<a href="#" target=_blank>6.男生日记</a><br>
				<a href="#" target=_blank>7.哈利・波特与魔法石</a><br>
				<a href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function move(a) {
			var Now;
			if(Number(a)) {
				Now = a;
			} else {
				Now = 1;
			}
			for(var i = 1; i <= 3; i++) {
				if(i == Now) {
					document.getElementById("book" + Now).style.display = "block"; //当前层
					document.getElementById("bg" + Now).className = "bg";
				} else {
					document.getElementById("book" + i).style.display = "none"; //隐藏其他层
					document.getElementById("bg" + i).className = "nobg";
				}
			}
		}
		window.onLoad = move();
	</script>

</html>

JavaScript 第三章 作业

猜你喜欢

JavaScript 第三章作业