笔记一

第一课鼠标提示框

代码

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容