数组
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去重数组中的重复数据
<script type="text/javascript">
var arr =[1,2,3,4,5,6,2,1,4,5,2];
//选择排序
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;i<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
j--;
}
}
}
</script>
省市级联动（数组和DOM）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="" id="province">
<option value="省份" >省份</option>
</select>
<select name="" id="city">
<option value="" >城市</option>
</select>
<script type="text/javascript">
var oPro=document.getElementById('province');
var oCity=document.getElementById('city');
var aPro=['辽宁','河北','湖北'];
var aCity=[
['沈阳','大连','鞍山','抚顺','本溪','锦州'],
['石家庄','天津','廊坊','承德'],
['武汉','襄阳','宜昌','黄石','十堰']
];
for(i in aPro){
oPro.innerHTML +='<option value="'+aPro[i]+'">'+aPro[i]+'</option>';
}
// 触发改变事件
oPro.onchange=function(){
oCity.innerHTML = '<option value="">城市</option>';
var provalue= oPro.value;
for(i in aPro){
if(aPro[i]==provalue){
for(j in aCity[i]){
// 创建一个节点
var oPtion =document.createElement('option');
oPtion.value=aCity[i][j];
oPtion.innerHTML=aCity[i][j];
// 追加一个节点
oCity.appendChild(oPtion);
}
}
}
}
</script>
</body>
</html>
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。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="https://www.baidu.com" method="" id="form">
<input type="text" id="" value="" name="username" />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<script type="text/javascript">
var oForm = document.getElementById('form');
var oBtn = oForm.getElementsByTagName('button')[0];
oForm.onsubmit = function() {
if (oForm.username.value != null && oForm.username.value != '') {
oForm.submit();
} else {
return false; //取消默认事件
}
}
oForm.onreset = function() {
if (!confirm("确定重置？")) {
return false;
}
}
</script>
</body>
</html>
BOM操作（browser object model 浏览器对象模型）
说白了就是打开、跳转、关闭浏览器窗口
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button1">打开窗口1</button>
<button type="button2">打开窗口2</button>
<a href="https://www.baidu.com" target="_blank">打开窗口</a>
<!--
Bom browser object model
关闭窗口
打开窗口
跳转页面
-->
<script type="text/javascript">
document.getElementsByTagName('button')[0].onclick=function(){
// 打开窗口(挑IE或者其他浏览器的版本，兼容性差)
window.open("https://www.baidu.com","_self");
}
document.getElementsByTagName('button')[1].onclick=function(){
// 打开窗口(跟上面一样，但是兼容性更好)
window.location.href="https://www.baidu.com";
}
</script>
</body>
</html>
焦点事件和焦点函数
获取焦点函数：对象.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();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点按钮图片显示，点空白图片消失</title>
<style type="text/css">
#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(子级接收了一个事件，他的父级同样接收这个事件),这种机制叫穿透冒泡.
document.getElementsByTagName('button')[0].onclick=function(ev){
var ev =ev||event;
document.getElementById('box').style.display='block';
// 通过event对象,阻止穿透.
ev.stopPropagation();
}
document.onclick=function(){
document.getElementById('box').style.display='none';
}
</script>
</body>
</html>
Event对象
当一个对象触发一个事件时，事件function中设置形参event，event对象会返回描述该事件的所有信息。
代码描述：当点击空白窗口时，观察consle控制台输出了什么
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
触发该事件的所有信息都会被记录
-->
<script type="text/javascript">
document.onclick=function(ev){
var ev = ev||event;
for(attr in ev){
console.log(attr+","+ev[attr])
}
}
</script>
</body>
</html>
网友评论