事件
-
以 on前缀开始 on事件名
-
事件不会自己执行，需要触发(事件只要被触发之后才可以执行)
-
事件三要素：
- 事件对象
- 事件名称
- 事件处理函数
-
常见事件写法：
- 嵌入式(传统事件绑定)
- 优点：简单易懂
- 缺点：将JavaScript代码与html代码混为一起，不利于多人协作开发
- 嵌入式(传统事件绑定)
<button onclick="alert('hello')" onmouseover="console.log('over')" onmouseout="show()">点击</button>
- 脚本模型(现代事件绑定)
- W3C事件
脚本模型：现代事件绑定
在JavaScript中完成事件的绑定
obj.οnclick=function(){};
this 当前对象 作用域对象
onmouseover 经过 onmouseenter 进入
onmouseout 离开 onmouseleave 离开
<style type="text/css">
div{width: 100px;height: 100px;background: skyblue;}
.one{background: red;}
.two{background: skyblue;}
</style>
<body>
<button id="btn">点我</button>
<div id="box"></div>
<script type="text/javascript">
var btn=document.getElementById('btn');
//点击事件
btn.onclick=function(){
alert('click');
};
//鼠标经过
btn.onmouseover=function(){
console.log('over');
};
//鼠标离开事件
btn.onmouseout=function(){
console.log('out');
};
var o=document.getElementById('box');
//鼠标经过事件
o.onmouseover=function(){
// this 在事件内部指当前事件对象
// console.log(this);
this.className='one';
};
//离开事件
o.onmouseout=function(){
this.className='two';
};
</script>
//onmousedown、onmouseup 事件
<img src="images/1.jpg" alt="" id="pic">
oimg.onmousedown = function (){
this.src = 'images/2.jpg'
}
oimg.onmouseup = function (){
this.src = 'images/1.jpg'
}
W3C事件
添加事件：addEventListener(事件名,事件函数,false)
删除事件：removeEventListener(事件名,事件函数,false）
注意：事件名 不需要前缀
<button id="btn">点我</button>
<button id="btn1">移除</button>
<script type="text/javascript">
var btn=document.getElementById('btn');
function show(){
alert('我是点击事件');
}
//添加点击事件
btn.addEventListener('click',show,false);
//鼠标经过事件
btn.addEventListener('mouseenter',function(){
this.innerHTML='点他';
},false);
btn.addEventListener('mouseleave',function(){
this.innerHTML='点我';
},false);
//按钮2
var b1=document.getElementById('btn1');
b1.addEventListener('click',function(){
btn.removeEventListener('click',show,false);//注意：移除的事件处理函数应该与添加时保持一致
},false);
样式
- DOM样式的修改，对象.style.属性名=属性值;
- CSS样式和DOM样式在js用法区别
CSS DOM
width width
height height
background-color backgroundColor
font-size fontSize
border-color borderColor
... ...
- DOM样式值的获取：
1.对象.style.属性名 只能获取行内样式
2.window.getComputedStyle(对象,null) 获取指定对象的所有样式
3.对象.offsetLeft/Right/Top/Bottom 只读属性
<button id="btn">隐藏/显现</button>
<div id="box"></div>
<script type="text/javascript">
var os = document.getElementById('box');//获取页面元素
//样式设置
os.style.width='100px';
os.style.height='100px';
os.style.backgroundColor='red';
os.innerHTML='你好';
os.style.color='#';
os.style.textAlign='center';
os.style.lineHeight='100px';
os.style.borderRadius='50%';
//添加点击事件 //切换
document.getElementById('btn').onclick=function(){
var dis=window.getComputedStyle(os,null).display;//获取样式值
if (dis=='block') {
os.style.display='none';
}else{
os.style.display='block';
}
};
数组
-
什么是数组
数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 -
关于js中的数组特点
数组定义时无需指定数据类型数组定义时可以无需指定数组长度
数组可以存储任何数据类型的数据（比如说一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的）
-
数组定义：
1) new Array()
2)new Array(item,item,item…); 定义同时即初始化
3)new Array(length) 定义指定长度的数组
4） [ ] 数组
1 创建数组
var arr=new Array(item,item,item...); 定义同时即初始化
var arr=[item,item,item...];
var array=new Array(length); 定义指定长度的数组
1 //方法一
2 var arr1 = [1,3,5,7,9];
3 document.write(arr1[2] + '<br>');5
4
5 //方法二
6 var arr2 = new Array(2,4,6,8,10);
7 document.write(arr2[3] + '<br>');8
8
9 //方法三
10 var arr3 = new Array(3);//固定数组长度为3
11 arr3[0] = 1;
12 arr3[1] = 2;
13 arr3[2] = 3;
14 document.write(arr3[2] + '<br>');3
2 类型判断 instanceof
var arr=new Array();
console.log(arr instanceof Array);//true
3 数组遍历
for
var arr=[1,2,3,5,9,7];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
var name;
while((name=prompt('请输入学生姓名：'))!='exit'){
arr[arr.length]=name;//将数据存入数组末尾
}
//输出
for(var j=0;j<arr.length;j++){
console.log(arr[j]);
}
for in
var arr=['Nih','哈哈','黑','白'];
for(var i in arr){
console.log(arr[i]);
}
新方法
forEach(fn) 遍历
fn函数有三个参数
item 数组元素
index 索引
arr 数组自身
var arr = [1,2,3,4,5,6,'f']
arr.forEach(function(item,index,arr){
console.log(item);//数组元素
console.log(index);//索引
console.log(arr);//数组自身
});
- 数组内置方法
1.shift()把数组的第一个元素删除
var movePos=[11,22];
movePos.shift()
console.log(movePos)//[22]
2.unshift()将元素添加到原数组开头
var arr =[111,222,333,444];
arr.unshift("55555")
document.write(arr)//55555,111,222,333,444
3.concat() 方法：用于连接两个或多个数组,并返回一个新数组，
var movePos=[11,22];
var arr = [4,5]
var arr0=movePos.concat(arr);
console.log(arr0);//[11, 22, 4, 5]
4. pop() 方法：用于删除并返回数组的最后一个(删除元素)元素,如果数组为空则返回undefined
var movePos=[11,22,33];
var arr=movePos.pop();
console.log(movePos);//[11, 22]
console.log(arr); //33
5.push() 方法：可向数组的末尾添加一个或多个元素，并返回新的长度，
var movePos=[11,22,5,9];
var arr=movePos.push("333");
console.log(movePos) //[11, 22, 5, 9, "333"]
console.log(movePos.length) //返回的结果就是数组改变后的长度：5
6.slice(start,end) 截取数组 [start,end) 未修改原数组
var arr = [1,2,3,4,56,7,8];
var arr0 = arr.slice(1,4);
console.log(arr);//[1, 2, 3, 4, 56, 7, 8]
console.log(arr0);//[2, 3, 4]
7.splice: 可截取任意位置 修改原数组
//splice(index,howmany) 删除数组元素
//splice(index,howmany,item...) 先删除，再添加
var arr = ['a','b',1,3,5];
var arr0 = arr.splice(1,2,'item');//截取位置添加内容
console.log(arr);//截取之后数组["a", "item", 3, 5]
console.log(arr0);//截取部分 ["b", 1]
8.reverse() 倒叙 用于颠倒数组中元素的顺序。
var movePos=[11,22,4,9,8];
var arr=movePos.reverse();
console.log(arr) //返回新的数组：[8, 9, 4, 22, 11]
console.log(arr.length) //返回数组长度5
9.排序方法 sort 排序(默认按照字符串排序)
var arr=[9,21,101,89,77,12];
var arr0 = ['ac','ch','gjk','bas','dfo']
arr.sort();
arr0.sort();
console.log(arr);//[101, 12, 21, 77, 89, 9]默认按照ASCII码排序
console.log(arr0);//["ac", "bas", "ch", "dfo", "gjk"]
数字升序排列
arr.sort(function(a,b){
if(a>b){
return 1;
}else if(a<b){
return -1;
}
return 0;
});
console.log(arr);//[9, 12, 21, 77, 89, 101]
降序
arr.sort(function(a,b){
if(a>b){
return -1;
}else if(a<b){
return 1;
}
return 0;
});
console.log(arr);//[101, 89, 77, 21, 12, 9]
10.join() 使用指定字符将数组元素拼接为字符串
var arr = ['how','are','you'];
var arr0 = arr.join(' ')//how are you
var arr0 = arr.join('*')//how*are*you
var arr0 = arr.join(',')//how,are,you
console.log(arr0);
11.indexOf 查找元素在数组中的位置
var arr = [1,2,3,4,5,6,'f']
var s1 = arr.indexOf('f');//找到返回位置6
var s2 = arr.indexOf(8);//找不到返回-1
console.log(s1);
console.log(s2);
12.lastIndexOf 从后向前查找数组中是否包含元素
var arr = [1,4,5,6,'f',6,6,6]
var arr0 = arr.lastIndexOf(6);//找到返回位置7
var arr1 =arr.lastIndexOf('a');//找不到返回-1
console.log(arr0);
console.log(arr1);
13.some(fn) fn 有三个参数 //判断数组中是否有满足规则的(有一个即可)
var arr=[19,20,25,18,22];
//判断数组中是否有满足规则的(有一个即可)
var re1=arr.some(function(item,index,arr){
return item>28;
});
console.log(re1);//false
14.every(fn) fn 有三个参数 // 判断数组中是否均满足规则的
// 判断数组中是否均满足规则的
var arr=[19,20,25,18,22];
var re2=arr.every(function(item,index,arr){
return item>2;
});
console.log(re2); //true
15. map 数组的映射
var arr=[1,2,3,4,5]
var s1= arr.map(function(x){
return x+10;
});
console.log(s1);//11,12,13,14,15未修改原数组
console.log(arr);//1,2,3,4,5
16.filter 过滤数组
var arr=[1,2,3,4,5,6,7,8,9,10]
var arr0=arr.filter(function(x,index){
return index%3===0||x>=8;
}); //index 是对索引取余
console.log(arr)// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr0) //[1, 4, 7, 8, 9, 10]未修改原数组
17. reduce
var arr=[1,2,3,4,5,6,7,8,9,10]
var sum=arr.reduce(function(x,y){
// return x*y 3628800
// return x/y 2.7557319223985894e-7
// return x+y 56
//return x-y -54
},1);
console.log(sum);
var arr=[1,2,3]
var sum=arr.reduce(function(x,y){
console.log(x+'|'+y);
return x>y?x:y;
});
// 1|2
// 2|3
console.log(sum) 3
二维数组
var arr = [
['李四','二年级',25],
['王五','一年级',23],
['丽丽','二年级',25],
['小明','一年级',23],
];
console.log(arr.length);
arr.forEach(function (item) {
if (item[1]=='二年级'&&item[2]>20) {
console.log(item[0]);
}
})
扫一扫
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
