javascript第一课

最新推荐文章于 2025-01-04 09:20:40 发布

alucard5867

最新推荐文章于 2025-01-04 09:20:40 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

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

本文详细介绍了JavaScript在网页特效中的应用，包括基础操作、事件处理、CSS样式切换及布局优化技巧，通过实例展示了如何利用JavaScript实现网页动态交互与视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：js基础

1.126邮箱功能提示框

示例：

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

#div1{width:300px;height:50px;background:red;display:none;}

	
</style>
</head>
<body>
	
	<label for=""  onmouseover="document.getElementById('div1').style.display='block';"
	onmouseout="document.getElementById('div1').style.display='none'";><input type="checkbox" >自动登陆</label>
	<div id="div1">
	请您不要在网吧使用此功能！
	</div>

</body>
</html>

解析：

效果原理，鼠标移入则显示，鼠标移出则隐藏。

@js中的事件处理，当...的时候。document.getElementById是获取元素然后进行操作。当要进行一个事件的时候，要先找到这个元素也就是Id。

@属性操作，obj.style.display=‘block’,这个就是改变它的属性display。

赋值，在js里就是把右边的东西放到左边里，用=来表示。

点即“.”就是表示“的”，就是表示谁的什么的。

引号即‘’就是block左右两边的引号，这在js中是必须的。

2.换class（给div再起一个名字）

示例：

 <!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>

div{width:200px;height:200px;background:red;}
.box{width:400px;height:400px;background:yellow;}
	
</style>
</head>
<body>
	
	<div id="div1" onmouseover="document.getElementById('div1').className='box';"
	onmouseout="document.getElementById('div1').className=''";>		
	</div>
	
</body>
</html>

解析：

@obj.classNam=‘’；在js里用到class的都要写成className。

3.网页换肤（换href）

示例：可以参考腾讯网站点击后，网站的皮肤颜色都改变了。

效果原理,点击的时候（onclick），改变href值。在这里，其实就是换它的css外链文件。

javascript中一个效果，要如何开始，可以参考以下步骤（找到谁，加什么事件，做什么事）

@第一步，要先思考要修改其中的哪些属性。

@第二步，需要给哪些东西加什么样的事件（目前学到的事件有onclick，onmouseover，onmouseout，也可以简单理解为把这个事件加在谁身上）。

@第三步，开始写js执行程序。

其中的一个解析思路：当鼠标移入的时候（鼠标移入事件onmouseover），先获取到鼠标移入的这个元素即Id（document.getElementById（‘’）），然后让它的style或者其他的样式href等变换为其他等等。

注意点：在写js前，合理而有效的html和css代码布局，能够让js事半功倍。

在考虑js的一个效果怎么开始做之前，要先把布局全部写好。没有js的时候，页面的静态是怎么样的，就比如妙味课堂的收缩菜单，二级菜单没有任何js效果前，二级菜单是全部显示的，如图：（而要达到的效果又是怎么样的，这个就需要在做出这个效果前就得先知道原来的静态是怎么样，只有知道原来是怎么样，才能去做一些依据于原来之上的效果展示，js也是。）

二.js标签

1.行间javascript的提取。

@第一用script标签名。

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

@第二给这段行间javascript取名，就是函数的定义（类似class一样，要抽取行间样式，就得有一个class名）。

<script type="text/javascript">
	function function_name () 
	{
		
	}
</script>

funtion也就是函数，相当于class的前面的“.”，然后后面是这段行间js的标志也就是名字，funtion xxx（）。也就是funtion+名字+（）+花括号{ }，这就是函数。

@script标签内的js代码也要进行分行书写，这是良好的代码习惯。而每一段的js都是以分号来为结束。

2.行间样式比较多时，可以取一外号，就是变量。

 <!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">
	function div1()
	{
		document.getElementById('div1').style.width='600px';	
		document.getElementById('div1').style.height='100px';
		document.getElementById('div1').style.background='yellow';
	}	

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

可以更改为如下：

变量就是对某一段相同的的js进行声明。
   var就是对相同的document.getElementById('div1')进行一个变量声明，
   也就是可以用div1来代替“document.getElementById('div1')”。这样就可以使用这个变量了。
<script type="text/javascript">
   function div1()
   {
       var div1=document.getElementById('div1')
       div1.style.width='600px';
       div1.style.height='100px';
       div1.style.background='yellow';
   }

 <!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>

<!-- 
	var就是对相同的document.getElementById('div1')进行一个变量声明，
	也就是可以用div1来代替“document.getElementById('div1')”。这样就可以使用这个变量了。 
-->
<script type="text/javascript">
	function div1()
	{
		var div1=document.getElementById('div1')
		div1.style.width='600px';	
		div1.style.height='100px';
		div1.style.background='yellow';
	}	

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

</body>
</html>

以上是本课的知识，知识点为：

1.网页特效原理（当...的时候，让用户感觉到变化）

2.onmouseover，onmouseout（鼠标事件）

3.onclick（点击事件）

4.alert（弹出框）

5.document.getElementById（获取元素）

6.元素属性操作（改变元素的width、height、href，通称属性）

7.JS中的函数（把一段js单独提取出来，可以随意调用。类似class）

8.className（css中的class在js中的应该写为className）