javascript第二课

最新推荐文章于 2024-11-19 22:41:54 发布

alucard5867

最新推荐文章于 2024-11-19 22:41:54 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/alucard5867/article/details/8365010

本文介绍了如何使用JavaScript实现页面元素样式的动态控制，包括行间事件的提取、窗口加载事件的应用、if语句判断及全选功能实现等内容。

一.行间JS事件提取

	<div id="div1" onmouseover="div1()" onmouseout="div2()">
	</div>

在这里，虽然进行了函数的定义，但是还是把js事件给放在了行间。在真正的项目中，要运用行为、结构、样式三者分离的原则写法。

@window.onload事件

onload就是加载，当页面加载完成的时候，执行...程序。

window.onload=function()
	{
		
	}

这是一个匿名函数。不像其它函数一样funtion和括号之间还有名字。

当然window.onload事件也可以加一个有名函数：

<script type="text/javascript">

window.onload=div1

	function div1()
	{
		var div1=document.getElementById('div1')
		div1.style.width='600px';	
		div1.style.height='100px';
		div1.style.background='yellow';
	}	
window.onload=div1
	function div2()
	{
		var div1=document.getElementById('div1')
		div1.style.width='300px';	
		div1.style.height='50px';
		div1.style.background='red';	
	}
</script>

@行间事件的提取操作：

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YinYueTai</title>
<link rel="stylesheet" type="text/css" href="untitled.css" />
<style>

#div1{width:300px;height:50px;background:red;}
	
</style>
<script type="text/javascript">

window.onload=function()
	{
		var odiv=document.getElementById('div1');
		odiv.onmouseover=div1;
		odiv.onmouseout=div2;
	}
	// 声明odiv等于document.getElementById('div1')，然后把鼠标移入事件直接加在odiv身上。
	// “odiv.onmouseover=div1;”这句话的意思是odiv的鼠标移入后就变成div1的样式：
	// width='600px';	
	// height='100px';
	// background='yellow';

        function div1()
	{
		var odiv=document.getElementById('div1');
		odiv.style.width='600px';	
		odiv.style.height='100px';
		odiv.style.background='yellow';
	}	

	function div2()
	{
		var odiv=document.getElementById('div1');
		odiv.style.width='300px';	
		odiv.style.height='50px';
		odiv.style.background='red';	
	}
	
</script>
</head>
<body>
	
	<div id="div1">
	</div>

</body>
</html>

解析如下

1、整个文档页面加载完成后提取这个函数。

window.onload=function()
	{

	}

2、获取元素并进行变量定义。

                var odiv=document.getElementById('div1');

3、对这个div直接进行事件执行，就是直接加在div身上。

                odiv.onmouseover=div1;
		odiv.onmouseout=div2;

二.if语句

示例：

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YinYueTai</title>
<link rel="stylesheet" type="text/css" href="untitled.css" />
<style>
p,ul,li,a{padding:0;margin:0;list-style:none;text-decoration:none;}
#div{width:100px;height:120px;background:red;}
p{width:50px;height:30px;cursor:pointer;}
/*ul{display:none;}*/
li {width:100px;height:30px;background:green;border:1px solid red;text-align:center;}
p,ul{margin:0 auto;}

</style>
<script type="text/javascript">

window.onload=function()
	{
		var pObj=document.getElementById('p');
		var divObj=document.getElementById('div');
		pObj.onclick=function()
		{
			if (divObj.style.display == "none") 
			{
				divObj.style.display='block'
			}
			else
			{
				divObj.style.display='none';
			}
		}
	}

</script>
</head>
<body>
	<p id="p">浏览</p>
	<ul id="div">
		<li><a href="javascript:;">第一</a></li>
		<li><a href="javascript:;">第二</a></li>
		<li><a href="javascript:;">第三</a></li>
		<li><a href="javascript:;">第四</a></li>
	</ul>
</body>
</html>

解析

@divObj.style.display=='none'，这个双==号表示的相等，就是左边的等于右边，判断是否相同，而不是赋值。

@if的判断条件，要先思考到底要选取哪个条件，要用一些技巧的。

@根据情况，做不同的事情。

三.全选

示例：

@获取一组元素document.genelementsTagName

@1.程序执行顺序有从上而下，一行一行的顺序执行（第一课）2.判断执行顺序（if语句）3.for循环（循环执行程序），for里面的程序的重复的次数有它的条件来选择。

for (var i = 0; i < Things.length; i++) {
		Things[i]
	};

@this，指的是当前发生事件的元素。