JS（二）

js事件

• 当鼠标点击时onclick
• 当鼠标移入时onmouseover
• 当鼠标移出时onmouseout

getElementById(’’)

获取html的id
HTML中任何标签都可以加id并且被js获取
HTML中任何属性都可以被js修改

函数

基本样式

	<script>
        function function-name (){          //定义
            

        }

        function-name();                  //调用
    </script>

循环（同java）

• if循环例子

    <script>
        window.onload=function (){
            var oBut = document.getElementById('but');
            var oBox = document.getElementById('box');
            oBut.onclick = function (){
                if(oBox.style.display=='block'){
                    oBox.style.display='none';
                }else{
                    oBox.style.display='block'
                }
            };
        } 
    </script>

操作属性的两种方法

• 一
  oBox.value = 'abcd'
• 二（当修改的属性不固定时使用）
  oBut ['value'] = 'abcd'

 	<input id="but" type="button" value="变宽" onclick="setStyle('width','400px')">
    <input id="but" type="button" value="变高" onclick="setStyle('height','400px')">
    <div id="box" class="box"></div>


    <script>
         function setStyle(name, value){
             var oBox = document.getElementById('box');
             oBox.style[name] = value;
         }
    </script>

全选，不选，复选

   <input id="but1" type="button" value="全选"><br>
   <input id="but2" type="button" value="不选"><br>
   <input id="but3" type="button" value="反选"><br>
   <div id="box">
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
    </div>

    <script>

        window.onload = function(){
            var oBut1 = document.getElementById('but1');
            var oBut2 = document.getElementById('but2');
            var oBut3 = document.getElementById('but3');
            var oBox = document.getElementById('box');
            var aCh = oBox.getElementsByTagName('input');

            oBut1.onclick = function(){
                for(var i=0;i<aCh.length;i++){
                    aCh[i].checked = true;
                }
            }
            oBut2.onclick = function(){
                for(var i=0;i<aCh.length;i++){
                    aCh[i].checked = false;
                }
            }
            oBut3.onclick = function(){
                for(var i=0;i<aCh.length;i++){
                    if(aCh[i].checked == true){
                        aCh[i].checked = false;
                    }else{
                        aCh[i].checked = true;
                    }
                }
            }
        }
        
    </script>