2019-04-16 数组(splice)、数组去重、练习-省市联动（数组方法）、练习-省市联动（json方法）、DOM（节点）、onreset、onsubmit、焦点、、确认框、BOM、全选、...

数组

清空数组
arr=[];
arr.length=0
添加数组
arr.push(10);//在数组最后添加
arr.unshift(13,12);//在数组最前添加
arr.shift();//从开头删 会返回删除元素的值
arr.pop();//从最后删 会返回删除元素的值

splice
 删除
1. 第一个参数表示index,第二个参数表示长度   arr.splice(2,1);
2.替换     arr.splice(2,1,'e')
 3.增加    arr.splice(2,0,'e');

数组去重

var arr=[1,2,1,3,4,5,6,7,8,1,2,5,8,7,4];
for(var i=0;i<arr.length-1;i++){
    for(var j=i+1;j<arr.length;j++){
        if(arr[i]==arr[j]){
            // 删除后面重复的
//          arr.splice(j,1);
//          j--;
            //  删除前面重复的
            arr.splice(i,1);
            j=i;
                }
            }
        }

二维数组

var arr=[
          [1,2,3],
          [4,5,6],
          [7,8,9]
        ]

练习-省市联动（数组方法）

<body>
        <select name="" id="province">
            <option value="">省份</option>
        </select>
        
        <select name="" id="city">
            <option value="">城市</option>
        </select>
        <script type="text/javascript">
            var json = {
                '辽宁':['沈阳','大连','阜新','朝阳','营口','葫芦岛','锦州','盘锦'],
                '河北':['石家庄','天津','廊坊','承德'],
                '湖北':['武汉','襄阳','宜昌','黄石','十堰']
            }
            var oPro = document.getElementById('province');
            var oCity = document.getElementById('city');
            
            // 初始化省份下拉框
            for(attr in json){
                oPro.innerHTML += '<option value="'+attr+'">'+attr+'</option>';
            }
            oPro.onchange = function(){
                // 清空城市列表
                oCity.innerHTML = '<option value="">城市</option>';
                // 获取省份的value
                var proValue = oPro.value;
                for(attr in json){
                    if(attr == proValue){
                        for(j in json[attr]){
                            oCity.innerHTML += '<option value="'+json[attr][j]+'">'+json[attr][j]+'</option>';
                        }
                    }
                }
            }
        </script>
    </body>

练习-省市联动（json方法）

json  有键值对类似于集合
<body>
        <select name="" id="province">
            <option value="">省份</option>
        </select>
        
        <select name="" id="city">
            <option value="">城市</option>
        </select>
        <script type="text/javascript">
            var json = {
                '辽宁':['沈阳','大连','阜新','朝阳','营口','葫芦岛','锦州','盘锦'],
                '河北':['石家庄','天津','廊坊','承德'],
                '湖北':['武汉','襄阳','宜昌','黄石','十堰']
            };
            var oPro = document.getElementById('province');
            var oCity = document.getElementById('city');
            
            // 初始化省份下拉框
            for(attr in json){
                oPro.innerHTML += '<option value="'+attr+'">'+attr+'</option>';
            }
            oPro.onchange = function(){
                // 清空城市列表
                oCity.innerHTML = '<option value="">城市</option>';
                // 获取省份的value
                var proValue = oPro.value;
                for(attr in json){
                    if(attr == proValue){
                        for(j in json[attr]){
                            oCity.innerHTML += '<option value="'+json[attr][j]+'">'+json[attr][j]+'</option>';
                        }
                    }
                }
            }
        </script>
    </body>

DOM（节点）


    DOM : document object model 文档对象模型
    它提供了许多获取DOM节点的方法
    document.getElementById()
    document.getElementsByTagName()
    document.getElementsByClassName()
    document.getElementsByName()
    ....
    DOM操作 -- 节点操作
children 子节点
parentNode  他会找到它本身的父节点
offsetParent 他会找到它本身的有定位父节点
offsetLeft,offsetTop：当前元素到定位父级的距离

父节点小练习

    <body>
        <ul>
            <li>张三111 <a href="javascript:;">删除</a></li>
            <li>张三222 <a href="javascript:;">删除</a></li>
            <li>张三333 <a href="javascript:;">删除</a></li>
            <li>张三444 <a href="javascript:;">删除</a></li>
            <li>张三555 <a href="javascript:;">删除</a></li>
            <li>张三666 <a href="javascript:;">删除</a></li>
            <li>张三777 <a href="javascript:;">删除</a></li>
            <li>张三888 <a href="javascript:;">删除</a></li>
        </ul>
        <script type="text/javascript">
            var aA = document.getElementsByTagName('a');
            for(i in aA){
                aA[i].onclick = function(){
                    this.parentNode.style.display = 'none';
                }
            }
        </script>
    </body>

onreset、onsubmit

onreset      重置事件
onsubmit    提交事件

焦点

获取焦点
事件
oInp.onfocus = function(){
    this.value = '';
}
自动获取焦点函数
 oInp.focus();

失去焦点
事件
oInp.onblur = function(){
    this.value = '123';
}
函数
 oInp.blur();

确认框

confirm(1);//弹出后会有 确定跟取消,会根据选项返回true跟false

小练习-确认是否提交表单
    <body>
        <form id="form" action="http://www.baidu.com">
            <input type="text" name="username" value="张三">
            <input type="password" name="password" value="123456">
            <button>提交</button>
        </form>
        <script type="text/javascript">
            var oForm = document.getElementById('form');
            oForm.onsubmit = function(){
                var bool = confirm('是否确认修改信息?');
                if(!bool){
                    return false;
                }
            }
            document.oncontextmenu = function(){
                return false;
            }
        </script>
    </body>

BOM

<!-- 
    BOM browser object model   浏览器
    关闭窗口
    打开窗口
    跳转页面
    window
 -->
 <script type="text/javascript">
document.getElementsByTagName('input')[0].onclick=function(){
    // window.open('http://www.baidu.com',"_self");
        //有兼容问题 _self在当前窗口打开
    window.location.href='http://www.baidu.com';
            }
</script>

全选、eval()函数

select()全选函数
 eval(str) 将字符串运算出结果,前提:字符串必须表达式

event

event 会记录页面的变化
event 浏览器兼容写法
document.onclick=function(ev){
    var ev=ev || event;
    for(attr in ev){
    console.log(attr +"," + ev[attr]);  
     }
}

跟随鼠标移动

        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 8px;
                top: 8px;
            }
        </style>
    </head>
    <body style="width: 2000px; height: 2000px;">
        <div id="box">
            
        </div>
        <script type="text/javascript">
            var oBox=document.getElementById('box');
            // onscroll 鼠标滚动
            document.onscroll=function(){
                alert(1);
            }
            
            document.onmousemove=function(ev){
                var ev= ev || event;
                // y轴的滚动距离
                var scrollTop=document.documentElement.scrollTop;
                // x轴的滚动距离
                var scrollLeft=document.documentElement.scrollLeft;
//              console.log('x:'+ev.clientX);
//              console.log('Y:'+ev.clientY);
                oBox.style.left=ev.clientX+scrollLeft+'px';
                oBox.style.top=ev.clientY+scrollTop+'px';
            }
        </script>
    </body>

鼠标拖拽

        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: #000000;
                position: absolute;
                left: 10px;
                top: 10px;
                cursor: pointer;
            }
        </style>
    </head>
    <body style="width: 1000px; height: 1000px;">
        <div id="box" >
            
        </div>
        <script type="text/javascript">
            var oBox=document.getElementById('box');
            
            oBox.onmousedown=function(ve){
                var ev= ev || event;
                // 获取鼠标距离div边框的值
//              var oX=ev.clientX-this.offsetLeft;
//              var oY=ev.clientY-this.offsetTop;
                var oX=ev.clientX-parseInt(getComputedStyle(oBox).left);
                var oY=ev.clientY-parseInt(getComputedStyle(oBox).top);
                document.onmousemove=function(ve){
                    var ev= ev || event;
                    oBox.style.left=(ev.clientX-oX)+'px';
                    oBox.style.top=(ev.clientY-oY)+'px';
                }
            }
            document.onmouseup=function(){
                document.onmousemove=function(ve){
                    return ;
                }
            }
        </script>
    </body>

事件冒泡

<style>
    #box{
        width: 100px;
        height: 100px;
        background: red;
        display: none;
        }
</style>
</head>
<body>
    <p><button type="button">按钮</button></p>
    <div id="box"></div>
    <script type="text/javascript">
        document.getElementsByTagName('button')[0].onclick = function(ev){
            var ev = ev || event;
            document.getElementById('box').style.display = 'block';
            ev.stopPropagation(); // 阻止事件冒泡
            }
            
//      document.getElementsByTagName('p')[0].onclick = function(){
//          alert(1);
//      }
        /*
            事件冒泡:
                所有的事件都具有穿透性，向父级穿透直到document -- 事件冒泡
        */
        document.onclick = function(){
            document.getElementById('box').style.display = 'none';
        }
    </script>
</body>

事件冒泡-广告

<style type="text/css">
            #box{
                width: 100px;
                height: 250px;
                background: #0000FF;
                position: absolute;
                left:-100px;
                top: 200px;
            }
            #adver{
                width: 16px;
                height: 50px;
                background: red;
                position: absolute;
                right: -16px;
                top: 60px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="adver">
                教程
            </div>
        </div>
        <script type="text/javascript">
            document.getElementById('box').onmouseover=function(){
                this.style.left='0px';
            }
            document.getElementById('box').onmouseout=function(){
                this.style.left='-100px';
            }
        </script>
    </body>

键盘事件

// onkeydown 键盘按下
// onkeyup 键盘抬起
// ev.keyCode 会返回键盘码
// ctrlKey 键盘Ctrl按下后ctrlKey会返回true
获取键盘事件
document.onkeydown=function(ev){
    var ev=ev||event;
    alert(ev.keyCode);  //ev.keyCode 获取键盘码
}

键盘控制div移动

        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: #0D5B95;
                position: absolute;
                left:8px;
                top:8px;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script type="text/javascript">
            var oDiv = document.getElementById('box');
            // document.onkeydown = function(ev){
//              var ev = ev || event;
//              if(ev.keyCode == 37){
//                  oBox.style.left = parseInt(getComputedStyle(oBox).left) - 10 + 'px';
//              }
//              if(ev.keyCode == 38){
//                  oBox.style.top = parseInt(getComputedStyle(oBox).top) - 10 + 'px';
//              }
//              if(ev.keyCode == 39){
//                  oBox.style.left = parseInt(getComputedStyle(oBox).left) + 10 + 'px';
//              }
//              if(ev.keyCode == 40){
//                  oBox.style.top = parseInt(getComputedStyle(oBox).top) + 10 + 'px';
//              }
            // }
            
            
            
            var dir = {left:null,top:null,right:null,bottom:null};
            setInterval(function () {
                if(dir.left){
                    oDiv.style.left = oDiv.offsetLeft - 10 +'px';
                }
                if(dir.top){
                    oDiv.style.top = oDiv.offsetTop  - 10 +'px';
                }
                if(dir.right){
                    oDiv.style.left = oDiv.offsetLeft + 10 +'px';
                }
                if(dir.bottom){
                    oDiv.style.top = oDiv.offsetTop + 10 +'px';
                }
            },30);
            document.onkeydown = function (ev) {
                var ev = ev || event;
                switch(ev.keyCode){
                    //左37,上38,右39,下40
                    case 37:
                        dir.left = true;
                        break;
                    case 38:
                        dir.top = true;
                        break;
                    case 39:
                        dir.right = true;
                        break;
                    case 40:
                        dir.bottom = true;
                        break;
                }
            }
            document.onkeyup = function (ev) {
                var ev = ev || event;
                switch(ev.keyCode){
                    //左37,上38,右39,下40
                    case 37:
                        dir.left = false;
                        break;
                    case 38:
                        dir.top = false;
                        break;
                    case 39:
                        dir.right = false;
                        break;
                    case 40:
                        dir.bottom = false;
                        break;
                }
            }
        </script>
    </body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,873评论 1赞 11
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 10,648评论 0赞 21
  • javaScript
    [TOC] 课程内容回顾 什么是JavaScript，有几个部分组成脚本语言，浏览器，ECMAScript BO...
    chcvn阅读 3,483评论 0赞 0
  • 2018-05-29JS基础
    js javascript脚本语言解释性基于对象事件驱动函数 js的组成: ECMAScript(语法) ...
    ROC_XU的日记本阅读 1,508评论 0赞 0
  • 01-DOM(节点内容操作)
    DOM操作一 HTML DOM是HTML Document Object Model(文档对象模型)的缩写HTML...
    Viarotel阅读 3,693评论 0赞 0