2016.11.28 JS

在html元素的对象上,有style这个属性,控制我们的样式
<script>
        var oLi=document.getElementsByTagName('li');
        var color=['red','yellow','blue'];
        // var colors='';
         for(var i=0;i<oLi.length;i++){
            oLi[i].style.background=color[i%3];
            oLi[i].index=i;
            oLi[i].onmouseover=function(){
                // colors=this.style.background;

                this.style.background='grey';
            }
            oLi[i].onmouseout=function(){
                this.style.background=colors[this.index%3];
            }
         }
    </script>
运算符:+,-,*,/
赋值:=,+=,-=,*=,/=,%=
比较运算符:<,>,<=,>=,==,!=,===
===: 严格相等;数据类型和值都必须相等
逻辑运算符:&&与,||或,!非
逻辑运算符跟boolean类型有关;&&,||:两边都要是布尔值
出了undefined,null,NaN,0,' ',其它的都可以看成真true
checked是单选框和复选框的特有属性,表示是否选中

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td><input type="checkbox" /></td>
                <td>AAAA</td>
                <td>AAAAAAAA</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>AAAA</td>
                <td>BBBBBBB</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>AAAA</td>
                <td>BBBBBBBB</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>AAAA</td>
                <td>BBBBBBB</td>
            </tr>
        </tbody>
    </table>
    <div>
        <input type="checkbox" id="all" />全选
    </div>
    <script>
        var oAll=document.getElementById('all');
        var oTable=document.getElementsByTagName('table')[0];
        var oInput=oTable.getElementsByTagName('input');
        oAll.onclick=function(){
            if(this.checked){
                for(var i=0;i<oInput.length;i++){
                    oInput[i].checked=true;
                    }
                }
            else{
                for(var i=0;i<oInput.length;i++){
                    oInput[i].checked=false;
                }   
            }
            
        }
    for(var i=0;i<oInput.length;i++){
        oInput[i].onclick=function(){
            for(var i=0;i<oInput.length;i++){
                var oCheckbox=true;
                if(!oInput[i].checked){
                    oCheckbox=false;
                    break;

                
                }

            }
            if(oCheckbox){
            oAll.checked = true;
            }
            else{
            oAll.checked = false;
            }   
        }
    }   
    </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容