初探JavaScript魅力（1）

初探JavaScript魅力 01 , 02

onclick = "alert('点击出现窗口的显示内容');" 点击事件；

onmouseover = " ;" onmouseout = " ;" 鼠标进入/出去；

当鼠标进入复选框时，显示div，当鼠标出去时，隐藏div；

<input type="checkbox" onmouseover="div.style.display='block';" onmouseout="div.style.display='none';" />

上面的代码会有浏览器兼容性问题，不能直接用div的ID，下面的代码才能兼容

<input type="checkbox" onmouseover="document.getElementById('div').style.display='block';" onmouseout="document.getElementById('div').style.display='none';" />

函数的定义和调用

function show(){
  alert('sss');
  }
 show();

使用函数

function toblock(){
  document.getElementById('bos').style.display='block';
  }
 function tonone(){
  document.getElementById('bos').style.display='none';
  }
<input type="checkbox"  onmouseover="toblock()" onmouseout="tonone()" />

按钮点击弹出警告框

<input type="button" value="按钮" onclick="alert('警告');"  />

两个div之间的变换（鼠标进入div1，会转换成div2，鼠标离开会变成div1）

<style>
 #div1{
  width:100px;
  height:100px;
  background:red;
  }
</style>
<script>
 function toblue(){
  var odiv=document.getElementById('div1');
  odiv.style.width='200px';
  odiv.style.height='200px';
  odiv.style.background='blue';
  }
 function tored(){
  var odiv=document.getElementById('div1');
  odiv.style.width='100px';
  odiv.style.height='100px';
  odiv.style.background='red';
  }
</script>
</head>

<body>
 <div id="div1" onmouseover="toblue()" onmouseout="tored()"></div>
</body>

网页换肤，通过按钮点击事件触发，需要提前写好css1,css2，通过改变的link完成换肤

<link id="ll" rel="stylesheet" type="text/css" href="css1.css" />
<script>
 function skin2(){
  var ol=document.getElementById('ll');
  ol.href='css2.css';
  }
 function skin1(){
  var ol=document.getElementById('ll');
  ol.href='css1.css';
  }
</script>
</head>

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

按钮点击显示和隐藏div（菜单）

<style>
 #div1{
  width:100px;
  height:200px;
  background:gray;
  display:none;
  }
</style>
<script>
 function showhide(){
  var od = document.getElementById('div1');
  if (od.style.display=='block')
   {
    od.style.display='none';
   }
  else
   {
    od.style.display='block';
   }
  }
</script>
</head>

<body>
<input  type="button" value="显示隐藏"  onclick="showhide()"/>
<div id="div1">
</div>
</body>

链接里加js

<a href="javascript:alert('a');">链接</a>

总结：

~第一个JS特效，鼠标提示框，原理：DIV的display，事件：onmouseover、onmouseout

~兼容性问题，document.getElementById()在任何浏览器下均可使用

~任何标签都可以加ID ，包括link

~任何标签的任何属性都可以修改

~HTML怎么写，JS就怎么写（className是唯一例外）