5.BOM

1-1可视区域 屏幕信息

        var screenWidth =window.screen.availWidth;
        //获取可视区域的width
        var viewwidth=document.body.clientWidth;
        console.log(screenWidth)
        console.log(viewwidth)

1-2 内联事件 自定义属性名

<button id="btn" data-aid="123456" onclick="go(event)">btn</button>
    <script>
        function go(event){
            console.log("hello world");
            console.log(event.target.dataset.aid)
        }
    </script>

1-3

    <!-- firstChild  获取第一个子节点
    firstElementChild  获取第一个元素子节点
    lastChild  
    lastElementChild  -->
    <!-- nextSibling
    nextElementSibling
    previousSibling
    previousElementSibling -->
    <div>hello</div>
    <ul id="app">
        <li>html</li>
        <li>css</li>
    </ul>
    <div>
        world
    </div>
    <script>
        var app=document.getElementById("app");
        console.log(app.nextElementSibling)
    </script>

1-4 classlist

    <!-- add(); addclass(); -->
    <!-- remove(); removeclass();   -->
    <p id="app">hello world</p>
    <button id="btn">移除class</button>
    <script>
        var app=document.getElementById("app");
        var btn=document.getElementById("btn");
        app.onclick=function(){
            this.classList.add("current")
        }
        btn.onclick=function(){
            app.classList.remove("current")
        }
    </script>

1-5

<!-- toggle toggleclass();
    contains  hasclass() 判断是否包含某个class -->
    <p id="app">hello world</p>
    <script>
        var app=document.getElementById("app");
        app.onclick=function(){
            if(this.classList.contains("current")){
                this.classList.remove("current")
            }else{
                this.classList.add("current")
            }
            // this.classList.toggle("current")
        }
    </script>

1-6 函数

                function go(a){
            console.log(a)
        }
        go(10,12);

1-7 argument

                function go(a){
            console.log(arguments)
            console.log(a);
        }
        go(10,12);

1-8 重载

                function go(a){
            console.log(a);
        }
        function go(a,b){
            console.log(a+b);
        }
        go(10);
        go(10,20)

1-9

        function go(){
            if(arguments.length==1){
                console.log(arguments[0])//10
            }else if(arguments.length==2){
                console.log(arguments[0]+arguments[1])//30
            }
        }
        go(10)
        go(10,20)

1-10 函数的返回值

                function go(){
            return "hello world";
            console.log("good")
        }
        console.log(go())//hello world

1-11 对象的方法

                        var obj ={
            name:"meng",
            sayName:function(){
                console.log(this.name);//meng
            }
        }
        obj.sayName();

1-12 todolist

<input type="text" id="input">
    <ul id="app">
    </ul>
    <script>
        // indexOf 判断数组下标 值为-1 不存在
                    //var arr=["html","css"];
        //console.log(arr.indexOf("js"))  -1
        var arr=[];
        var input=document.getElementById("input");
        var app=document.getElementById("app");
        input.onkeydown=function(event){
            if(event.keyCode==13){
                if(arr.indexOf(this.value)==-1 && this.value!="")
                arr.push(this.value);
                var li=document.createElement("li")
                li.innerHTML=this.value;
                app.append(li);
            }
            console.log(arr);//["tui ", "you", "he"] 输入空值及重复值不显示
        }
    </script>

1-13 data

        var obj=[
            {name:"cheng",age:18,skill:"html"},
            {name:"meng",age:21,skill:"css"},
            {name:"sheng",age:17,skill:"js"},
        ]
        var arr=[];
        for(var i=0;i<=obj.length;i++){
            var name = obj[i].name;
            var skill =obj[i].skill;
            arr.push({
                name:name,
                skill:skill
            })
        }
        console.log(arr);

1-19 解构

        var obj={
            name:"li",age:18,skill:"vue",s:{
                sex:"male"
            }
        };
        // var name=obj.name;
        // var age=obj.age;
        // var skill=obj.skill;
        var {name,s}=obj;
        console.log(name)
        console.log(s.sex)

1-20 tab

style 
.current{
  color:red;
}
<ul>
        <li class="current">html</li>
        <li>css</li>
    </ul>
    <div class="parent">
        <div class="html">html</div>
        <div class="css">css</div>
    </div>
    <script>
                var lis=document.getElementsByTagName("li");
        var divs=document.querySelectorAll(".parent div");
        for(let i=0;i<lis.length;i++){
            lis[i].index=i;
            lis[i].onclick=function(){
                                //遍历让所有的li移除class="current"
                for(let i=0;i<lis.length;i++){
                    lis[i].classList.remove("current");
                }
                                //让当前元素添加class="current"
                this.classList.add("current")
                console.log(this.index)
                /* 3.让所有的div隐藏 */
                for(let i=0;i<divs.length;i++){
                    divs[i].style.display = "none"
                }
                /* 4.让对应的下标的div去显示 */
                divs[this.index].style.display = "block";
            }
        }
    </script>