javascript第二课练习

<script type="text/javascript">
   window.onload=function()   //网页全部加载完后执行
   {
     var aDiv=document.getElementById('div1');   //获取ID
aDiv.onmouseover=zx;   //当鼠标停留在div上执行此函数
   }; 
    function zx()
    {
      alert("测试OK");
    }

</script>

<div id="div1">1231223</div>

/*-------------------------------------------*/ 

<script type="text/javascript">

   window.onload=function()

   {

         var aDiv=document.getElementById("div1");   //获取DIV1，并给它命名

var aXc=document.getElementById('xc');  //获取xc，并给它命名

aDiv.onclick=function()   //鼠标点击时时执行此函数

{

if(aXc.style.display=="none")  //如果是隐藏，将它显示，如果是显示，将它隐藏

{

 aXc.style.display="block";

}

else

{

 aXc.style.display="none"

}

}

   }

 </script>

 <div id="div1">点击展开或者隐藏</div>

 <ul style="display:none;" id="xc">

   <li>1</li>

   <li>2</li>

   <li>3</li>

 </ul>

/*-------------------------------------------*/ 

<script type="text/javascript">

   window.onload=function()

   {

     var aDiv=document.getElementById("div1");

var ipt=document.getElementsByTagName('input');

aDiv.onclick=function()

{

  // alert(aInput.length)   //一共有多少个复选框

  for(i=0;i<=ipt.length;i++)

  {

    ipt[i].checked=true;  //循环全部为选中状态

  }

}

   }

 </script>

 <div id="div1">全选负选框</div>

 <input type='checkbox'/><br/>

 <input type='checkbox'/><br/>

/*-------------------------------------------*/ 

 <style type="text/css">

 input

 {

   background:#FFF;

   color:#FF0000;

   width:45px;

   height:35px;

 }

 .active

 {

   background:#000;

   color:#FFF;

 }

 </style>

 <script type="text/javascript">

   window.onload=function()

   {

     var but=document.getElementsByTagName('input');    //获取页面中的input

var i=0;

for(i=0;i<but.length;i++)  //循环下标，点击时候执行函数

{

but[i].index=i; //找出他的索引下标

  but[i].onclick=function()  

  {

for(i=0;i<but.length;i++) 

{

  but[i].className=""; //这个循环是为了把每个input 的 class为空掉！

adiv[i].style.display="none"; //循环把所有的div都隐藏掉

}

adiv[this.index].style.display="block"; //找到相对应的下标并显示

    this.className='active';  //完了吧当前的重新赋于class

  }

}

   }

 </script>

 <input class="active" type='button' value="1">  //默认第一个有class

 <input type='button' value="2">

 <input type='button' value="3">

<div style="display:block">111</div>  //第一个默认为显示

 <div>222</div>

 <div>333</div>