1，事件：
（1）onmouseover:鼠标移入某个对象等触发事件
（2）onmouseout:鼠标移出某个对象等触发事件
（3）alert()：显示信息到弹框
2,获取元素
通过Id获取只能获取一个对象：document.getElementById('id名')
获取一组同一类型的对象（类似数组，一种集合）：document.getElementsByTagName(‘div’）；获取所有的div，设置某个div的属性：document.getElementsByTagName(‘div’)[i]
3，函数
（1）function定义函数
function 函数名(){ }
引用：事件名（如onclick=“函数名()”）
（2）调用属性的方式：
1，xxx.xxxx.xxx，例如：document.getElementById(' ')
2,xxx[' '][' ']，例如：document['getElementById'](' ') ，这种方式比较好，比1方式可以接受变量值。
（3）改变对象属性的方式：
1，修改对象的style，例如：id.style.xxx ,相当于在对象的行间加入style属性
2，设置class，修改为class，例如：id.className='class'
js可以修改任何对象的属性
4，变量
var定义变量
5，使用
（1）a链接内放JavaScript：
<a href="javascript: ;">XXX</a>
（2）使用class时：document.getElementById(' ').ClassName='';
（3）加载事件（当script写在boad外使用2,3方式时，必须使用window.onload =function( ){ 要写的JavaScript代码 }）：
1，在要设置的按钮等的input中加载，例如：<input type="button" value="提交" onclick="aaa()" />
<head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function changeColor() { var div1=document.getElementById('div1'); div1.style.background='red'; } function retColor() { var div1=document.getElementById('div1'); div1.style.background='black'; } </script> </head> <style type="text/css"> #div1{ width: 100px; height: 100px; background-color:black; } </style> <body> <div id="div1" onmouseover="changeColor()" onmouseout="retColor()"></div> </body>
2，在script中设置事件属性，例如：
<head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function() //加载页面完成后调用该函数 { var div1=document.getElementById('div1'); div1.onmouseover=changeColor; div1.onmouseout=retColor; function changeColor() { var div1=document.getElementById('div1'); div1.style.background='red'; } function retColor() { var div1=document.getElementById('div1'); div1.style.background='black'; } } </script> </head> <style type="text/css"> #div1{ width: 100px; height: 100px; background-color:black; } </style> <body> <div id="div1"></div> </body>
***如果是带参数的函数在script中设置事件属性则：div1.onclick=function(){ 函数名(参数);} ；不带参数的函数为设置的事件属性：div1.onclick=函数名;
3，直接在属性后写函数：
<head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function() { var div1=document.getElementById('div1'); div1.onmouseover=function () { var div1=document.getElementById('div1'); div1.style.background='red'; } div1.onmouseout=function () { var div1=document.getElementById('div1'); div1.style.background='black'; } } </script> </head> <style type="text/css"> #div1{ width: 100px; height: 100px; background-color:black; } </style> <body> <div id="div1"></div> </body>
例子：1，选项卡
<script type="text/javascript"> window.onload=function() { var div1=document.getElementById('div1'); var button=div1.getElementsByTagName('input'); var div2=document.getElementById('div2'); var divs=div2.getElementsByTagName('div'); for(var i=0;i<button.length;i++) { button[i].num=i; button[i].onclick=function() { for(var i=0;i<button.length;i++) { button[i].className=' '; divs[i].style.display='none' } this.className='class'; //alert(this.num); divs[this.num].style.display='block'; } } } </script> <style type="text/css"> #div1 .class{ background-color: yellow; } #div2 div{ width: 200px; height: 200px; background-color:#ccc; border: 1px solid #999; float: left; } </style> <body> <div id="div1"> <input type="button" value="教育"> <input type="button" value="科技"> <input type="button" value="资源"> <input type="button" value="食品"> </div> <br> <div id="div2"> <div> <br><br> 小学教育<br> 中学教育<br> 大学教育<br> 成人教育 </div> <div> <br><br> 大数据<br> 云计算<br> 5G <br> </div> <div> <br><br> 钢铁<br> 煤炭<br> 稀有矿 </div> <div> <br><br> 肉类<br> 水果<br> 蔬菜 </div> </div> </body>
实现方法二（使用一个div，用innerHTML添加内容）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function() { var array=['<br><br>小学教育<br>中学教育<br>大学教育<br>成人教育','<br><br>大数据<br>云计算<br>5G <br>','<br><br>钢铁<br>煤炭<br>稀有矿','<br><br>肉类<br>水果<br>蔬菜'] //JS中定义数组 var div1=document.getElementById('div1'); var button=div1.getElementsByTagName('input'); var div2=document.getElementById('div2'); var div=div2.getElementsByTagName('div')[0]; for(var i=0;i<button.length;i++) { button[i].num=i; button[i].onclick=function() { for(var i=0;i<button.length;i++) { button[i].className=' '; } this.className='class'; //alert(this.num); div.innerHTML=array[this.num];//可以给非input对象添加文字内容，HTML代码等 } } } </script> </head> <style type="text/css"> #div1 .class{ background-color: yellow; } #div2 div{ width: 200px; height: 200px; background-color:#ccc; border: 1px solid #999; float: left; } </style> <body> <div id="div1"> <input type="button" value="教育"> <input type="button" value="科技"> <input type="button" value="资源"> <input type="button" value="食品"> </div> <br> <div id="div2"> <div> </div> </div> </body> </html>