3字符串

1-1 行高

        body{
            font-size: 20px;
             line-height: 40px;//40px(div)
            line-height: 3;//54px(div)
            line-height:200%;//40px(div)
        }
        div{
            font-size: 18px;
        }
        <div>
        hello world
        </div>

1-2 em,rem,vw,vh

        html{
            font-size: 10px;
        }
        .parent{
            width: 200px;
            height: 200px;
            background-color:darkcyan;
            font-size: 20px;
        }
        .child{
            width: 2em;//40px相对于父元素的font-size而言
            height: 2em;//40px
            background-color:darkorange;
        }

        html{
            font-size: 10px;
        }
        .parent{
            width: 200px;
            height: 200px;
            background-color:darkcyan;
            font-size: 20px;
        }
        .rem{
            width: 10rem;//100px 相对于根元素html的font-size
            height: 10rem;//100px
            background-color: crimson;
        }

1-3 vw,vh

        *{margin: 0;padding: 0;}
        div{box-sizing: border-box;}
        .parent{
            display: grid;
            grid-template-columns: repeat(5,20vw);
            grid-template-rows: repeat(2,20vw);
        }
        .parent div{
            border: 1px solid #333333;
        }

1-4 控制语句

        var a=10;
        var b=20;
        if(b<a){
            console.log("123")
        }
        console.log("00") //00

1-5 if-else

        var age=20;
        if (age>=22){
            console.log("50")
        }else{
            console.log("00")//00
        }

1-6 if-elseif

        var age=8;
        if (age>=18){
            console.log("成年人")
        }else if(age>=12){
            console.log("青少年")
        }else if(age>=6){
            console.log("少年")
        }else{
            console.log("小孩")
        }  //青少年

1-7while

        var a=10;
        while(a){
            alert("hello world");
        }//网页出现hello world

1-8while-for

                 var a=0;
        while(a<=3){
            console.log(a);
            a++;
        }
        //0
            1
            2
               3

1-9 for循环

        for(var i=0;i<=3;i++){
            console.log(i)
        }//0 1 2 3

1-10 for-in

        var obj ={
            name:"meng",
            age:21,
            skill:"123"
        }
        for(var item in obj){
            console.log(obj[item]) //meng 21  123
        }

1-11 break 跳出循环

        for(var i=0;i<=6;i++){
            console.log(i);//0 1 2 3
            if(i==3){
                break;
            }  
        }
        console.log(i)//3

1-12 continue

        for(var i=0;i<=6;i++){
            if(i==3){
                continue;
            }
            console.log(i)//0 1 2 4 5 6
        }

1-13 dom

    <div class="abc">
    hello world
    </div>
    <div class="test">
    good
    </div>
        var app=document.getElementsByTagName("div");app是名字
        console.log(Array.isArray(app)) //true
        console.log(app.length) //2
        for(var i=0;i<app.length;i++){
            console.log(app[i]) 
   //<div class="abc">
    hello world
    </div>
    <div class="test">
    good
    </div>如果加上等于号第三个元素会出现undefined
        }

1-14 switch

         var x="111";//其他
         var x="女";//女 其他
         var x="男";//男 女 其他
        switch(x){
            case "男":{
                console.log("男");
            }
            case "女":{
                console.log("女");
            }
            default:
            console.log("其他")
        }

1-15 class

    <div class="one">hello 1</div>
    <div class="one">hello 2</div>
    <div class="one">hello 3</div>
    <div class="one">hello 4</div>
    <script>
        var all=document.getElementsByClassName("one")
         console.log(all); //hello 1, hello 2, hello 3, hello 4,
        for(var i=0;i<all.length;i++){
            all[i].onclick=function(){
                console.log("hello")//点击任意一行，工作台会出现hello(叠加)
                this.style.display="none"点击任意一行，此行消失
            }
        }
     </script>

1-16 id

    <div id ="app">
        app
        <div class="one">one1</div>
        <div class="one">one1</div>
        <div class="one">one1</div>
    </div>
    <script>
        var app=document.getElementById("app");
        console.log(app);
        var all =document.querySelectorAll(".one");
        console.log(all)
    </script>
   1. console.log(app);//    
    <div id ="app">
        app
        <div class="one">one1</div>
        <div class="one">one1</div>
        <div class="one">one1</div>
    </div>
    2.console.log(all);//
    NodeList(3) [div.one, div.one, div.one]
      0: div.one
      1: div.one
      2: div.one
      length: 3

1-17 btn

    <input id="input" type="checkbox">篮球
    <script>
        var input =document.getElementById("input")
        input.checked=false;//false:不选篮球，true:选择篮球
        console.log(input.id)；//input
    </script>

1-18 多选框 （全选 不选 反选）

    <button id="all">全选</button>
    <button id="notAll">不选</button>
    <button id="reverse">反选</button>
    <div>
        <input  type="checkbox">足球
        <input  type="checkbox">篮球
        <input  type="checkbox">lol
        <input  type="checkbox">王者
    </div>
    <script>
        // var all =document.getElementById("all");
        // var notAll=document.getElementById("notAll");
        var inputs =document.getElementsByTagName("input");
        // var reverse=document.getElementById("reverse");
        all.onclick=function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=true;
            }
        }
        notAll.onclick=function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=false;
            }
        }
        reverse.onclick=function(){
            for(var i=0;i<inputs.length;i++){
                console.log(inputs[i].checked)
                inputs[i].checked=(inputs[i].checked)?false:true;
                //inputs[i].checked=!(inputs[i].checked)
            }
        }

1-19 隔行变色

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
            /* 
        odd 奇数
        even 偶数
         */
        /* li:nth-child(even){
            background-color:pink;
        }
        li:nth-child(odd){
            background-color: aqua;
        } */
    <* i%2  0 1 2 3 4 
                    0 1 0 1 0
     *>
    <script>
        var lis=document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++){
            if(i%2==0){
                lis[i].style.backgroundColor="pink"
            }else{
                lis[i].style.backgroundColor="darkcyan" 
            }
        }

1-20 toggle 切换

    <div style="display: block;">
        div
    </div>
    <button id="btn">btn</button>
    <script>
        var div=document.getElementsByTagName("div")[0];
        var btn =document.getElementById("btn");
        btn.onclick=function(){
            var d=div.style.display;
            // if(d=="block"){
            //     div.style.display="none"
            // }else{
            //     div.style.display="block"
            // }
            div.style.display=(d=="block")?"none":"block";
        }
    </script>