day02

A今天学到了什么

1.实现勾选

 <button id="btn">btn</button>
    <input type="checkbox">篮球
   
    <script>
        var btn=document.getElementById("btn");
        var input=document.getElementsByTagName("input")[0];
        console.log(input);
        btn.onclick=function(){
            // input.checked=(input.checked==true)?false:true;
            input.checked=!input.checked;
        }
    </script>

2.修改

2.1修改元素的样式

  <p id="p">hello world</p>
    <button id="btn">change</button>
    <script>
        var btn=document.getElementById("btn");
        var p=document.getElementById("p");
        btn.onclick=function(){
            p.style.background="red";
        }
    </script>

2.2隔行变色

  <style>
        /* odd奇数项
           even偶数项 */
          ul>li:nth-child(odd){
          color: red;
         
         }
         ul>li:nth-child(even){
             color: blue;
         }
             
         
    </style>

2.3JS实现隔行变色

 <script>
    var lis =document.getElementsByTagName("li");
    for(let i = 0 ; i<lis.length; i++){
        if(i%2==0){
            lis[i].style.color="red";
            // lis[i].style.backgroundColor="red";
        }
        else{
            lis[i].style.color="blue";
        }
    }
    </script>

3.显示隐藏

  <div id="div" style="display: block">

    </div>
    <button id="btn">
            toggle
    </button>
    <script>
        var div=document.getElementById("div");
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            // let value =div.style.display;
            // if(value=="block"){
            //     div.style.display="none";
            // }else{
            //     div.style.display="block";
            // }
            div.style.display=(div.style.display=="none")?"block":"none";
        }
    </script>

4.局限性

 <div id="test" style="width: 100px">

    </div>
    <script>
        // element.style.attr
        // 只能获取内联样式
        let test =document.getElementById("test");
        // let value=test.style.width;
        // console.log(value);

        // 1.在chrome下获取
        // getComputedStyle（元素，null）.属性
        let value=window.getComputedStyle(test,null).width;
        // 在IE浏览器
        let ieValue=test.currentStyle.width;
        console.log(value);
    </script>
    

5.通过className获取

 <p id="p">
        hello world
    </p>
    <button id="btn">btn</button>
    <script>
        var btn=document.getElementById("btn");
        var p=document.getElementById("p");
        btn.onclick=function(){
            p.className=(p.className=="current")?"none":"current"
        }
    </script>

6.node（节点）

6.1node用法

 <p>hello world <span>good</span></p>
    <script>
        // 获取节点中所有的文本内容
    
        var p=document.getElementsByTagName("p")[0];
        var nodeContent=p.textContent;
        console.log(nodeContent);
    </script>

6.2node value

 <!-- 注释节点 -->
    <!-- p标签是元素节点 -->
    <!-- hello world 是文本节点 -->
    <p> hello world</p>
    <!-- node value 只能获取注释节点和文本节点 -->
    <script>
        
    </script>
</body>

6.3node type

  <!--  -->
    <p class="one" id="p">hello world</p>
    <script>
        // node type
        // 1.元素节点
        // 2.属性节点 
        // 3.文本节点
        var p=document.getElementById("p");
        var eNode=p.nodeType;
        var tNode=p.firstChild.nodeType
        var attrNode=p.getAttributeNode("class").nodeType;
        console.log(eNode);
        console.log(tNode);
        console.log(attrNode);

    </script>

6.4 增加节点appendChild

   <div id="parent">
        <p id="one">hello world</p>
 
    </div>
    <button id="add">add</button>
    <script>
        // 增加节点  语法 parentNode.appendChild(childNode)
        // createElement()创建元素节点
        // createTextNode 创建文本节点
        var add=document.getElementById("add");
        var parent=document.getElementById("parent");
         add.onclick = function(){
            let p=document.createElement("p");
            let txt=document.createTextNode("first");
            p.appendChild(txt);
            // console.log(p);
            // parent.appendChild(p);(在后面增加)
            // insertBefore 语法 parentNode.insertBefore(元素,id)
            // parent.insertBefore(p,one);(在前面增加)
        }
    </script>

6.5 修改节点repalceChild

  <div id="parent">
        <p id="child"> hello world</p>
    </div>
    <button id="btn">btn</button>
    <script>
        // 语法parentNode.replaceChild(newNode,targetNode)
        var btn=document.getElementById("btn");
        var parent=document.getElementById("parent");
        var child=document.getElementById("child");

        btn.onclick=function(){
            let h4=document.createElement("h4");
            let txt=document.createTextNode("修改");
            h4.appendChild(txt);
            parent.replaceChild(h4,child);
        }
    </script>

6.6克隆节点cloneNode

 <p>hello world</p>
    <script>
        // 克隆节点语法
        // nodeElement.cloneNode(true);
        var p= document.getElementsByTagName("p")[0];
        var cp=p.cloneNode(true);
        document.body.appendChild(cp);
    </script>
    

7.事件

7.1 onfocus 和oblur

   <input type="text" id="input">
    <script>
        // onfocus  获取焦点
        // oblur 失去焦点
        // 在事件中 this指向正在执行事件的对象
        var input=document.getElementById("input");
        input.onfocus=function(){
            this.style.background="red";
        }
        input.onblur=function(){
            this.style.background="green";
        }
    </script>

7.2 鼠标事件

    <p id="test">hello world</p>
    <script>
        // var test= document.getElementById("test");
        // onmouseover 鼠标移动到某元素上
        // onmouseout 鼠标移出
        test.onmouseover=function(){
            this.style.color="red";

        }
        test.onmouseout=function(){
            this.style.color="blue"
        }
    </script>

7.3 DOM事件

<title>Document</title>
    <script src="JS/index.js">
        // window.onload
        // 整个DOM树以及相关的图片资源加载完成之后执行相关的代码
      
    </script>

8.onchange

 <input type="text" name="" id="">
    <script>
            // onchange 域的内容发生改变的时候触发
        var input=document.getElementsByTagName("input")[0];


        input.onchange=function(){
            this.value="改变"
        }
    </script>

9.onsubmit

   <form action="">
        <input type="text">
        <button type="submit">提交</button>
    </form>
    <script>
        // onsubmit 表单被提交的时候发生
        var submit = document.getElementsByTagName("form")[0];
        submit.onsubmit=function(){
            alert("提交菜单")
        }
    </script>

10.onresize

   <div>

    </div>
    <script>
        window.onresize=function(){
            alert("浏览器窗口发生改变时触发");
        }
        window.onscroll=function(){
            alert("窗口滚动时触发")
        }
    </script>

    <style>
        div{
           
            height: 1000px;
            background: red;
        }

    </style>

11.key的用法

    <!-- 显示对应的键盘号 -->
    <!-- onkeydown 键盘按下时触发
          event.keyCode 按下的键盘对应的键盘码-->
          <!--onkeypress 按着键盘的时候  -->
          <!-- onkeyup拿起来的时候 -->
    <script>
        document.onkeydown=function(event){
            alert(event.keyCode)
        }
    </script>

12.em的用法

    <p>你还可以输入<em id="show">0</em>/150个字</p>
    <textarea id="txt" cols="30" rows="10"></textarea>
    <script>
        let show=document.getElementById("show");
        let txt =document.getElementById("txt");
        txt.onkeyup=function(){
            let length=txt.value.length;
            show.innerHTML=length;
        }
    </script>

13.window的用法

13.1 window的属性

  <script>
        // js的顶级作用域就是window
        // 全局变量是window的属性
        // 方法是widnow的方法
    var a= 10;
    console.log(window.a);
    function b(){
        console.log(this);
    }
    // this指向window
    window.b();
    </script>

13.2 window confirm

 <div>
        <span id="mi">小米8</span> <button id="btn"> btn</button>
    </div>
    <script>
        // 确定 返回 true     取消返回 false
       var result= window.confirm("是否取消");
       console.log(result);
       let btn =document.getElementById("btn");
       let mi=document.getElementById("mi");
       btn.onclick=function(){
           var result=window.confirm("你确定不要小米8吗");
           if(result){
               mi.style.display="none";
           }else{
               mi.style.display="block";
               
           }
       }
    </script>

B.小米登录页面的实现

1.css部分

   <style>
        *{margin: 0;padding: 0}
        .form{
            width: 400px;
            border: 1px solid #333;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            box-shadow: 0 0 10px 5px #333;
        }
        li{
            list-style: none;
            display: inline-block;
        }
        ul{
            line-height: 50px;
        }
        .content{
            position: relative;
            height: 200px;
        }
        .content>div{
            position: absolute;
            height: 100%;
            width: 100%;
        }
        .saoma{
            display: none;           
        }
        input{
            width: 360px;
            height: 40px;
            margin-top: 20px;
        }
        .current{
            color: orange;
        }
    </style>

2.html部分

 <div class="form">
        <ul>
            <li class="current">账号登录</li>
            <li>扫描登录</li>
        </ul>
    

    <div class="content ">
        <div class="account child">
            <div><input type="text"></div>
            <div><input type="password"></div>
            <div><input type="submit" value="立即登录"></div>

        </div>
        <div class="saoma child">
            <img src="images/01.png" alt="">
        
        </div>
        
    </div>
    </div>

3.JS部分

      <!-- 1.给每个li一个点击事件
            2.给每个li一个index属性
            3.让对应参数的contents显示，其他隐藏 -->
        <script>    
            var lis=document.getElementsByTagName("li");
            // var contents=document.getElementsByClassName("child");
            var contents=document.querySelectorAll(".content>div");
            // console.log(contents);
            // 点击li 让正在被点击的class=current  其他的class=""
            for(let i=0;i<lis.length;i++){
                lis[i].index=i;
                lis[i].onclick=function(){
                    // 先将所有的li className 清空
                    for(let i=0;i<lis.length;i++){
                        lis[i].className="";
                    }
                    // 当前项的li class=current;
                    this.className="current";
                    for(let i =0;i<contents.length;i++){
                        contents[i].style.display="none";
                    }
                    // console.log(i);
                    contents[this.index].style.display="block";
                }
            }
        </script>