JS（四）

函数传参

• 可变参（不定参）arguments

   <script>
        function sum(){
            var result = 0;
            for(var i=0;i<arguments.length;i++){
                result += arguments[i];
            };
            return result;
        }
        alert(sum(123,234,56));
        alert(sum(12,2));
    </script>

• CSS函数
  css(oDiv, 'width')获取样式；
  css(oDiv, 'width','200px')设置样式；
• 取非行间样式（不能用来设置）(不能取复合样式)

  	 function getStyle(obj, name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj, 任意元素（null/flase/'abc'）)[name];
        }
    }

添加删除插入数组元素

• push(元素)从尾部添加;pop()删除
• unshift()元素从头部添加；shift()添加
• splice(开始位置, 长度, 元素);删除splice(开始位置, 长度);插入splice(开始位置, 0, 元素)

排序转换

• 数组连接a.concat(b);
• 分隔符join

<script>
   var arr = [1,2,3,4];

   alert(arr.join('-'));
</script>

• 数组排序
  sort
  排序数字时，系统默认为字符串。

<script>
   var arr = [12,23,15,67,18,26];
    arr.sort();
    alert(arr);
</script>

解决办法:

<script>
   var arr = [12,23,15,67,18];
    arr.sort(function (n1,n2){
        return n1-n2;
    });
    alert(arr);
</script>

定时器

• 开启定时器
  • setInterval 间隔型
  • setTimeout 延时型
• 停止计时器
  • clearInterval
  • clearTimeout
    
    
    
    
    
    
    
    
    
    
    每隔1s弹出a

<script>
   function show(){
       alert('a');
   }
   setInterval(show, 1000);      //1000ms
</script>

• 延时提示框

<script>
    window.onload = function(){
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var timer = null;

        oDiv1.onmouseover = function(){
            clearTimeout(timer);
            oDiv2.style.display = 'block';
        };
        oDiv1.onmouseout = function(){
            timer = setTimeout(function (){
                oDiv2.style.display = 'none';
            }, 500);
        }

        oDiv2.onmousemover = function(){
            clearTimeout(timer);
        };
        oDiv2.onmouseout = function(){
            timer = setTimeout(function(){
                oDiv2.style.display = 'none';
            }, 500);
        };

    };
 
</script>
   <div id="div1"></div>
   <div id="div2"></div>

• 无缝滚动
  offsetLeft/offsetTop

<div id="div1">
        <ul>
            <li><img src="1.jpg"></li>
            <li><img src="2.jpg"></li>
            <li><img src="3.jpg"></li>
            <li><img src="4.jpg"></li>
        </ul>
    </div>


    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');

            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;     //两组
            oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px';      //第三次滚到第一张图片时，图片组复位
            
            function move(){
                if(oUl.offsetLeft < -oUl.offsetWidth/2){
                    oUl.style.left = '0';
                }
                oUl.style.left = oUl.offsetLeft - 2 + 'px';
            }
            var timer = setInterval(move, 30);
            oDiv.onmouseover = function(){    //鼠标移上时停止滚动
                clearInterval(timer);
            }
            oDiv.onmouseout = function (){		//当鼠标移开时开始滚动
                timer = setInterval(move,30);
            }
        };
    </script>

DOM

• 获取子节点
  childNodes

<ul id="ul1">
        <li></li>
        <li></li>
    </ul>


    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1');
            alert(oUl.childNodes.length);
        };
    </script>

这个5，是错误的，它包含了ul与li之间的空格
应该是

<ul id="ul1">
        <li></li>
        <li></li>
    </ul>


    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1');
            for(var i=0;i<oUl.childNodes.length;i++){
                if(oUl.childNodes[i].nodeType == 1){
                    oUl.childNodes[i].style.background = 'red';
                }
            }
        };
    </script>

nodeType == 3 文本节点（上面多出来的两个子节点就是文本节点）
nodeType == 1 元素节点

另一种写法将childNides，变成children
获取子节点，获取的只是第一层

• 查找父节点

<ul id="ul1">
        <li></li>
        <li></li>
    </ul>


    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1');
            alert(oUl.parentNode);
        };
    </script>
    

例子；隐藏li

   <ul id="ul1">
        <li>1234 <a href="javascript:;">隐藏</a></li>
        <li>5678 <a href="javascript:;">隐藏</a></li>
        <li>3245 <a href="javascript:;">隐藏</a></li>
        <li>9568 <a href="javascript:;">隐藏</a></li>
    </ul>


    <script>
        window.onload = function(){
            var aA = document.getElementsByTagName('a');

            for(var i=0;i<aA.length;i++){
                aA[i].onclick = function(){
                    this.parentNode.style.display = 'none';
                };
            };
        };
    </script>

• offsetParent
• 首尾/兄弟子节点
  firstChild firstElementChild首
  lastChild lastElementChild尾
  nextSibling,nextElementSibling
previousSibling ,previousElementSibling

 <ul id="ul1">
     <li>1</li>
     <li>2</li>
     <li>3</li>
 </ul>


 <script>
     window.onload = function(){
        var oUl = document.getElementById('ul1');

        if(oUl.firstElementChild){
            oUl.firstElementChild.style.background='red';
        }else{
            oUl.firstChild.style.background='red';
        }
     };
 </script>

操作元素属性

• 获取getAttribute(名称)
• 设置setAttribute(名称,值)
• 删除removeAttribute(名称)

<input id="txt1" type="text">
<input id="btn1" type="button" value="按钮">

 <script>
     window.onload = function(){
        var oTxt = document.getElementById('txt1');
        var oBtn = document.getElementById('btn1');

        oBtn.onclick = function(){
            oTxt.setAttribute('value','abcd');
        }
     };
 </script>

使用DOM灵活查找

用className选择元素