第一课鼠标提示框
代码
<html>
<head>
<metacharset="UTF-8">
<title>ghjtitle>
head>
<style>
#div1{
height:60px;
width:150px;
background:pink;
display:none;
}
style>
<body>
<inputtype="checkbox"onmouseover="document.getElementById('div1').style.display='block';"onmouseout="document.getElementById('div1').style.display='none';"/>
<divid="div1">请注意不要在公共电脑保留私人信息div>
body>
html>
1、样式,Div的display
2、事件即动作Onmouseover、onmouseout
3、doucument.getelemengtbyid(divid)处理兼容问题
4、属性即特点style.属性(身高、体重等)
5、函数function名字(){
}
6、重用,使布局更加清晰、效率更高
7、函数的定义和调用缺一不可
8、任何标签都可以加标签link
9、Html中怎么写,js就怎么写
10、作业设置文字完成
<html>
<head>
<metacharset="UTF-8">
<title>作业2title>
<style>
#div1{
height:100px;
width:100px;
background:pink;
display:none;
}
style>
<script>
functionshowhide(){
varOdiv=document.getElementById('div1');
if(Odiv.style.display=='none'){
Odiv.style.display='block';
}
else{
Odiv.style.display='none';
} }
script>
head>
<body>
<inputtype="button"value="显示/隐藏"onclick="showhide()"/>
<divid="div1">猜猜我是谁div>
body>
html>
11、a链接链接 #可以替代javascript:alert(a);告诉浏览器用js
12、Class不可以用,只能classname
13、参数、变量不需要加引号
<html>
<head>
<metacharset="UTF-8">
<title>Titletitle>
<style>
#div1{
height:200px;
width:70px;
background:lightpink;
}
style>
head>
<body>
<inputid="but1"type="button"value="全选"/>
<inputid="but2"type="button"value="返选"/>
<inputid="but3"type="button"value="不选"/>
<divid="div1">
<inputtype="checkbox"/>勾选1
<inputtype="checkbox"/>勾选2
<inputtype="checkbox"/>勾选2
<inputtype="checkbox"/>勾选3
<inputtype="checkbox"/>勾选4
<inputtype="checkbox"/>勾选5
<inputtype="checkbox"/>勾选6
div>
<script>
window.onload=function()
{
varOdiv1=document.getElementById('div1');
varbt1=document.getElementById('but1');
varbt2=document.getElementById('but2');
varbt3=document.getElementById('but3');
varoche=Odiv1.getElementsByTagName('input');
bt1.onclick=function()
{
for(vari=0;ilength;i++)
{
oche[i].checked=true;
}
}
bt3.onclick=function()
{
for(vari=0;ilength;i++)
{
oche[i].checked=false;
}
}
bt2.onclick=function()
{
for(vari=0;ilength;i++)
{
if(oche[i].checked==true)
oche[i].checked=false;
else{
oche[i].checked=true;
}
}
}
}
script>
body>
html>