JS入门

复杂的交互
example：

会动的东西，登录框弹出来

下一个简单的定义：交互、功能，就是修改一些样式

第一个JS特效——鼠标提示框

鼠标移入input上边的时候，让div显示出来，否则隐藏。

事件

事件驱动：onmouseover

用户的操作

οnclick=" "
alert=" "

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个JS效果</title>
	<style>
	#div1{width:200px;height:100px;background:#ccc;border:1px solid;
	display:none;color:#999;}
	</style>
	</head>
	<body>
		<input type="checkbox"onmouseover="alert('111111')">
		<div id="div1">
			为了您的信息安全
			</div>
	</body>
</html>

在这里插入图片描述

.相当于“的”
div1的style的display


<input type="checkbox"onmouseover="div1.style.display='block';">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个JS效果</title>
	<style>
	#div1{width:200px;height:100px;background:#ccc;border:1px solid;
	display:none;color:#999;}
	</style>
	</head>
	<body>
		<input type="checkbox"onmouseover="div1.style.display='block';"onmouseout="div1.style.display='none';">
		<div id="div1">
			为了您的信息安全
			</div>
	</body>
</html>

效果图：鼠标放上去的时候block弹出来，鼠标不在上边的时候消失
"="赋值，
注:兼容性问题

不可直接用div1

在其前面添加上
document.getElementById
通过ID获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个JS效果</title>
	<style>
	#div1{width:200px;height:100px;background:#ccc;border:1px solid;
	display:none;color:#999;}
	</style>
	</head>
	<body>
		<input type="checkbox"onmouseover="document.getElementById('div1').style.display='block';"
		onmouseout="document.getElementById('div1').style.display='none';">
		<div id="div1">
			为了您的信息安全
			</div>
	</body>
</html>

属性

特性、特点
xiaojia.名字 blue
xiaojia.性别女

编写JS的流程

布局：HTML+CSS
属性：确定要修改哪些属性
事件：确定用户做哪些操作（产品设计）
编写JS：在事件中，用JS来修改页面元素的样式

初识函数

制作更复杂的效果（DIV的颜色、大小都变化）
直接在事件内写代码会很乱
引入function（）、函数的基本形式
把JS从标签里放入到函数里，相当于CSS中的CLASS
变量的使用——别名
定义和调用
函数定义：只是告诉系统有这个函数，不会实际执行
函数调用：真正执行函数里的代码
关系和区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS效果</title>
	<style>
	#div1{width:200px;height:200px;background:red;border:1px solid;
color:#999;}
	</style>
	</head>
	<body>
	
		<div id="div1"
		onmouseover="document.getElementById('div1').style.width='300px';
		document.getElementById('div1').style.height='300px';
		document.getElementById('div1').style.background='green';"
		onmouseout="document.getElementById('div1').style.background='yellow';
		document.getElementById('div1').style.width='200px';
		document.getElementById('div1').style.height='400px';
		">
		
			</div>
	</body>
</html>

…EG淘宝幻灯片…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS效果</title>
	<style>
	#div1{
		width:200px;
		height:200px;
		background:red;
		border:1px solid;
color:#999;}
	</style>
	<script>
	function toGreen()
	{
		document.getElementById('div1').style.width='300px';
		document.getElementById('div1').style.height='300px';
		document.getElementById('div1').style.background='green';
	}
	function tocolor()
	{
		document.getElementById('div1').style.background='yellow';
		document.getElementById('div1').style.width='200px';
		document.getElementById('div1').style.height='400px';
	}
	</script>
	</head>
	<body>
	
		<div id="div1"
		onmouseover="toGreen()"
		onmouseout="tocolor()
		">
		
			</div>
	</body>
</html>

重用

函数

function toGreen()
	{
		var oDiv=document.getElementById('div1');
		oDiv.style.width='300px';
		oDiv.style.height='300px';
		oDiv.style.background='green';
	}

变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS效果</title>
	<style>
	#div1{
		width:200px;
		height:200px;
		background:red;
		border:1px solid;
color:#999;}
	</style>
	<script>
	function toGreen()
	{
		var oDiv=document.getElementById('div1');
		oDiv.style.width='300px';
		oDiv.style.height='300px';
		oDiv.style.background='green';
	}
	function tocolor()
	{   var oDiv=document.getElementById('div1');
		oDiv.style.background='yellow';
		oDiv.style.width='200px';
		oDiv.style.height='400px';
	}
	</script>
	</head>
	<body>
	
		<div id="div1"
		onmouseover="toGreen()"
		onmouseout="tocolor()
		">
		
			</div>
	</body>
</html>

网页换肤

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS效果</title>
		<link id="l1" rel="stylesheet" type="text/css"
		href="./happy.css">

<script>
function skin1()
{
	var oL=document.getElementById('l1')
	oL.href='happy.css';
}
function skin2()
{
	var oL=document.getElementById('l1')
	oL.href='happy2.css';
}

</script>
	</head>
	<body>
	
			<input type="button" value="皮肤1" onclick="skin1()">
			<input type="button" value="皮肤2" onclick="skin2()">
			
	</body>
</html>