數(shù)組
清空數(shù)組
arr=[];
arr.length=0
添加數(shù)組
arr.push(10);//在數(shù)組最后添加
arr.unshift(13,12);//在數(shù)組最前添加
arr.shift();//從開(kāi)頭刪 會(huì)返回刪除元素的值
arr.pop();//從最后刪 會(huì)返回刪除元素的值
splice
刪除
1. 第一個(gè)參數(shù)表示index,第二個(gè)參數(shù)表示長(zhǎng)度 arr.splice(2,1);
2.替換 arr.splice(2,1,'e')
3.增加 arr.splice(2,0,'e');
數(shù)組去重
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]){
// 刪除后面重復(fù)的
// arr.splice(j,1);
// j--;
// 刪除前面重復(fù)的
arr.splice(i,1);
j=i;
}
}
}
二維數(shù)組
var arr=[
[1,2,3],
[4,5,6],
[7,8,9]
]
練習(xí)-省市聯(lián)動(dòng)（數(shù)組方法）
<body>
<select name="" id="province">
<option value="">省份</option>
</select>
<select name="" id="city">
<option value="">城市</option>
</select>
<script type="text/javascript">
var json = {
'遼寧':['沈陽(yáng)','大連','阜新','朝陽(yáng)','營(yíng)口','葫蘆島','錦州','盤(pán)錦'],
'河北':['石家莊','天津','廊坊','承德'],
'湖北':['武漢','襄陽(yáng)','宜昌','黃石','十堰']
}
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>
練習(xí)-省市聯(lián)動(dòng)（json方法）
json 有鍵值對(duì)類(lèi)似于集合
<body>
<select name="" id="province">
<option value="">省份</option>
</select>
<select name="" id="city">
<option value="">城市</option>
</select>
<script type="text/javascript">
var json = {
'遼寧':['沈陽(yáng)','大連','阜新','朝陽(yáng)','營(yíng)口','葫蘆島','錦州','盤(pán)錦'],
'河北':['石家莊','天津','廊坊','承德'],
'湖北':['武漢','襄陽(yáng)','宜昌','黃石','十堰']
};
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（節(jié)點(diǎn)）
DOM : document object model 文檔對(duì)象模型
它提供了許多獲取DOM節(jié)點(diǎn)的方法
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByName()
....
DOM操作 -- 節(jié)點(diǎn)操作
children 子節(jié)點(diǎn)
parentNode 他會(huì)找到它本身的父節(jié)點(diǎn)
offsetParent 他會(huì)找到它本身的有定位父節(jié)點(diǎn)
offsetLeft,offsetTop：當(dāng)前元素到定位父級(jí)的距離
父節(jié)點(diǎn)小練習(xí)
<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 提交事件
焦點(diǎn)
獲取焦點(diǎn)
事件
oInp.onfocus = function(){
this.value = '';
}
自動(dòng)獲取焦點(diǎn)函數(shù)
oInp.focus();
失去焦點(diǎn)
事件
oInp.onblur = function(){
this.value = '123';
}
函數(shù)
oInp.blur();
確認(rèn)框
confirm(1);//彈出后會(huì)有 確定跟取消,會(huì)根據(jù)選項(xiàng)返回true跟false
小練習(xí)-確認(rèn)是否提交表單
<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('是否確認(rèn)修改信息?');
if(!bool){
return false;
}
}
document.oncontextmenu = function(){
return false;
}
</script>
</body>
BOM
<!--
BOM browser object model 瀏覽器
關(guān)閉窗口
打開(kāi)窗口
跳轉(zhuǎn)頁(yè)面
window
-->
<script type="text/javascript">
document.getElementsByTagName('input')[0].onclick=function(){
// window.open('http://www.baidu.com',"_self");
//有兼容問(wèn)題 _self在當(dāng)前窗口打開(kāi)
window.location.;
}
</script>
全選椎瘟、eval()函數(shù)
select()全選函數(shù)
eval(str) 將字符串運(yùn)算出結(jié)果,前提:字符串必須表達(dá)式
event
event 會(huì)記錄頁(yè)面的變化
event 瀏覽器兼容寫(xiě)法
document.onclick=function(ev){
var ev=ev || event;
for(attr in ev){
console.log(attr +"," + ev[attr]);
}
}
跟隨鼠標(biāo)移動(dòng)
<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 鼠標(biāo)滾動(dòng)
document.onscroll=function(){
alert(1);
}
document.onmousemove=function(ev){
var ev= ev || event;
// y軸的滾動(dòng)距離
var scrollTop=document.documentElement.scrollTop;
// x軸的滾動(dòng)距離
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>
鼠標(biāo)拖拽
<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;
// 獲取鼠標(biāo)距離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);
// }
/*
事件冒泡:
所有的事件都具有穿透性，向父級(jí)穿透直到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>
鍵盤(pán)事件
// onkeydown 鍵盤(pán)按下
// onkeyup 鍵盤(pán)抬起
// ev.keyCode 會(huì)返回鍵盤(pán)碼
// ctrlKey 鍵盤(pán)Ctrl按下后ctrlKey會(huì)返回true
獲取鍵盤(pán)事件
document.onkeydown=function(ev){
var ev=ev||event;
alert(ev.keyCode); //ev.keyCode 獲取鍵盤(pán)碼
}
鍵盤(pán)控制div移動(dòng)
<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>
