js小知识点

数组

js中数组的长度是可变的，数组中可以存储各种数据类型。
var arr=[1,2,3,4,true,'hello'];
1.快速清空数组有两种方法。
①arr=[]；
②arr.length=0;
2.向数组中添加数据有两种方法。
①在原数组的末尾添加arr.push(5，6，7);
②在原数组的开始位置添加arr.unshift('新数组第一个元素'，'新数组第二个元素')。
3.从数组中删除数据有两种方法。
①删除数组中的最后一个元素，产生新数组，并返回最后一个元素的值。arr.pop();
②删除数组中的第一个元素，产生新数组，并返回第一个元素的值。arr.shift();
4.splice可对数组进行增删改
①增加数据：arr.splice(2,0,'e');
解释：在索引值为2的位置，增加e，其余元素位置后移。
②修改数据：arr.splice(2,3,'e');
解释：在索引值为2的位置，将从该位置的起的三个元素，替换成e。
③删除数据：arr.splice(1,1)；
解释：第一个参数为索引，第二各参数为个数。将索引值为1的元素开始，删除一个元素。

利用splice去重数组中的重复数据

省市级联动（数组和DOM）

DOM操作（节点操作）（document object model 文档对象模型）

我们可以把每个标签都看作一个节点，标签兄弟标签，父级标签，子标签。即父节点、子节点、兄弟节点等，对他们的操作称为节点操作。
①获取节点：获取节点的方式有很多，常用的有通过ID、标签名、类名称、name属性获取。
通过ID：document.getElementByID()
通过标签名：document.getElementsByTagName()
通过类名称：document.getElementsByClassName()
通过name属性：document.getElementsByName()
②获取全部子节点：返回操作节点的所有子节点数组。
var oList = document.getElementById('list');
var aLi = oList.children；//获取子节点数组
③获取第一个子节点：
var oFlist=oList.firstElementChild;
④获取最后一个子节点：
var oLlist=oList.lastElementChild;
⑤获取某节点的下一个兄弟节点：
var oSlist=oList.firstElementChild.nextElementSibling;(获取第二个子节点：先获取第一个子节点，通过第一个子节点获取他的下一个节点)
⑥获取某节点的上一个兄弟节点：
var oTlist=oList.lastElementChild.previousElementSibling;(获取倒数第二个子节点：先获取倒数第一个子节点，通过倒数第一个子节点获取他的上一个节点)
⑦获取父节点
var oFther=oList.parentNode;
⑧获取有定位的父节点
oList.offsetParent
⑨距离有定位的父节点有多少距离
offsetLeft，offsetTop，offsetRight，offsetBottom

!!!!!创建节点和追加子节点
var oElement=document.createElement('li');//创建li标签的对象。li标签可以是任意标签div、a等等。
oLi.appendChild(oElement);//将创建的标签插入oLi对象所在标签的子标签中。

取消默认事件和confirm提示框

用Botton举例：创建一个表单，表单中输入内容，如果内容不为空，则跳转到链接地址，否则不跳转。
confirm和alert作用相似，但是会返回true或false。

BOM操作（browser object model 浏览器对象模型）

说白了就是打开、跳转、关闭浏览器窗口

焦点事件和焦点函数
获取焦点函数：对象.focus();
获取焦点事件：

对象.onfocus = function() { //焦点事件
                //oInput.value = 'dwa';
              }

失去焦点函数：对象.blur();
失去焦点事件：

对象.onblur = function() { //焦点事件
                //oInput.value = 'dwa';
              }

全选函数、计算函数

全选函数描述：设置一个按钮和一个文本框，当在文本框中输入文字，点击按钮，使文字变成全部选中状态。
带文本框的对象.select()
全选函数：eval能计算可运算的计算表达式的结果
var num =eval(1+2*3/4);

事件的扩展

onmousemove；鼠标移动事件
onmousedown；鼠标按下事件
onmouseup；鼠标弹起事件
onkeydown；//ev.keyCode获取键盘码

document.onkeydown=function(ev){
                var ev =ev||event;
                //ev.keyCode 获取键盘码
                alert(ev.keyCode);
            }

事件流

事件冒泡：所有的事件都具有穿透性,直到穿透到document(子级接收了一个事件，他的父级同样接收这个事件),这种机制叫穿透冒泡.
通过event对象,阻止穿透ev.stopPropagation();



    
        
        点按钮图片显示，点空白图片消失

Event对象

当一个对象触发一个事件时，事件function中设置形参event，event对象会返回描述该事件的所有信息。
代码描述：当点击空白窗口时，观察consle控制台输出了什么