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>
- 任何标签都可以加ID
- 任何标签的属性都可以更改