js鼠标事件，节点，回车添加

1.鼠标事件

主要学习了用js去写下拉菜单事件，改变了传统css的写法，简化了代码：

 <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a>
                        经过
                    </a>
                </li>
                <li>
                    <a>
                        经过
                    </a>
                </li>
                <li>
                    <a>
                        经过
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a>
                        经过
                    </a>
                </li>
                <li>
                    <a>
                        经过
                    </a>
                </li>
                <li>
                    <a>
                        经过
                    </a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        var nav = document.querySelector('.nav');
        var lis = nav.children;//得到三个小li
        鼠标经过事件
        for(var i = 0;i<lis.length;i++){
            lis[i].onmouseover = function(){
                this.children[1].style.display='block';
            }
            鼠标移走事件
            lis[i].onmouseout = function(){
                this.children[1].style.display='none';
        }
    }
    </script>
     

2.节点（重点学习了，父子节点、创建、添加、删除、克隆节点）

<script>
        // 父节点
        var er = document.querySelector('.er');
        // 得到的是离元素最近的父级节点
        // node.parentNode
        console.log(er.parentNode);

        // 子节点
        // parentNode.chilNodes
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // childNodes所有的子节点 包含元素节点，文本节点等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // children获取所有的子元素节点
        console.log(ul.children);


        // 创建节点
        // node.appendChild(child);node是父元素，child是子集追加元素
        var li = document.createElement('li');
        var ul = document.querySelector('ul');
        ul.appendChild(li);

        // 添加节点node.insertBefore(child,指定元素)
        var lili = document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);


        // 删除节点node.removeChild(child);


        // 克隆节点
        var ul = document.querySelector('ul');
        //1.node.cloneNode();括号为空或者里面是false，浅拷贝，只复制标签不复制里面的内容
        //2.none.cloneNode(true),深拷贝，复制标签复制里面的文字
        var lilis = ul.children[1].cloneNode(true);
        ul.appendChild(lilis);
    </script>

补充的兄弟节点：

3.回车添加事件

    <textarea id="txt1" cols="3" rows="10"></textarea>
    <input type="text" id="txt2">
    <input type="button" id="btn1" value="提交留言">
    <h2>JavaScript 能做什么</h2>
    <script>
        window.onload=function(){
            var A = document.getElementById('txt1');
            var B = document.getElementById('txt2');
            var C = document.getElementById('btn1');           
            // C.onclick=function(){
            //     A.value+=B.value+'\n';
            //     B.value='';
            // }
            B.onkeydown=function(event){
                var oEvent=event;
                if(oEvent.keyCode==13){
                    A.value+=B.value+'\n';
                    B.value='';
                }
            }
        }
    </script>

常见的一些鼠标码值：