(一)JS中的事件分类
1、鼠标事件
click/dblclick/onmouseover/onmouseout
2、HTML事件
onload/onscroll/onsubmit/onchange/onfocus
3、键盘事件
keydown: 键盘按下时触发
keypress:键盘按下并松开的瞬间触发
keyup: 键盘抬起时触发
[注意事项]
① 执行顺序:keydown->keypress->keyup
② 当长按时,会循环执行keydown->keypress
③ 有keydown并不一定有keyup,当事件触发过程中,鼠标将光标移走,
将导致没有keyup
④ keypress只能捕获键盘上的数字、字母、符号键,不能捕获各种符号键,
而keydown和keyup可以。
⑤ keypress支持区分大小写,keydown和keyup并不支持。
[确定触发的按键]
① 在触发的函数中,传入一个参数e,表示键盘事件;
② 使用e.keyCode,取到按键的Ascll码值,进而确定触发按键;
③ 所有浏览器的兼容写法(一般并不需要):
var evn = e || event;
var code = evn.keyCode || evn.which || evn.charCode;
(二)JS中的DOM0事件模型
1、内联模型(行内绑定):直接将函数名作为HTML标签的某个事件属性的属性值;
eg:<button onclick="func()">DOM0内联模型</button>
优点:使用方便。
缺点:违反了w3c关于HTML与JavaScript分离的基本原则;
2、脚本模型(动态绑定):在JS脚本中,取到某个节点,并添加事件属性;
优点:实现了HTML与JavaScript的分离;
缺点:同一个节点只能绑定一个同类型事件。如果绑定多个,最后一个生效。
(三)JS中的DOM2事件模型
1、添加事件绑定方式:
① IE8之前:btn2.attachEvent("onclick",函数);
② 其他浏览器:btn2.addEventListener("click",函数,true/false);
参数三:false(默认):表示事件冒泡 true:表示事件捕获
③ 兼容写法:if (btn2.attachEvent) {
btn2.attachEvent();
}else{
btn2.addEventListener();
}
优点:① 可以给同一节点,添加多个同类型事件;
② 提供了可以取消事件绑定的函数。
3、取消DOM2事件绑定:
注意:如果要取消DOM2的事件绑定,那么在绑定事件时,处理函数必须
要使用有名函数,而不能使用匿名函数。
btn2.removeEventListener("click",func2);
btn2.detachEvent("onclick",func2);
(四)JS中的事件流
1、事件冒泡:当某DOM元素触发一种事件时,会从当前节点开始,逐级往上触发其祖
先节点的同类型事件,知道DOM根节点。
>>> 什么情况下会产生事件冒泡:
① DOM0模型绑定的事件,全部都是冒泡;
② IE8之前,使用attachEvent()绑定的事件,全部都是冒泡;
③ 其他浏览器,使用addEventListener()添加事件,当第三个参数省略或为
alse时,为事件冒泡;
2、事件捕获:当某DOM元素触发一种事件时,会从文档根节点开始,逐级向下触发其
祖先节点的同类型事件,直到该节点自身。
>>> 什么情况下会产生事件捕获:
① 使用addEventListener()添加事件,当第三个参数为true时,为事件捕获;
3、阻止事件冒泡:
在IE浏览器中,使用e.cancelBubble()=true;
在其他浏览器中,使用e.stopPropagation();
兼容所有浏览器的写法:
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}
4、取消事件默认行为
在IE浏览器中,使用e.returnValue = false;
在其他浏览器中,使用e.preventDefault();
兼容所有浏览器的写法:
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
(一)JS中的数组
1、数组的基本概念?
数组是在内存空间中连续存储的一组有序数据的集合。
元素在数组中的顺序,成为下标。可以使用下标访问数组的每个元素
2、如何声明一个数组?
① 使用字面量声明:var arr = [];
在JS中,同一数组,可以存储各种数据类型。
例如:var arr=[1,"绾",true,null,func];
② 使用new关键字声明:var arr = new Array(参数);
>>> 参数可以是:
a. 参数省略,表示创建一个空数组;
b. 参数为一个整数,表示声明一个length为指定长度的数组,
但是这个length可以随时可变可追加。
c. 参数为逗号分隔的多个数值,表示数组的多个值。
new Array(1,2,3)==[1,2,3]
3、数组中元素的读写/增删
① 读写:通过下标访问元素。下标从0开始 arr[1]="hahaha";
② 增删:
a. 使用delete关键字,删除数组的某一个值。删除之后,数组的长度不变
对应位置变为Undefined。 eg:delete arr[1];
b. arr.pop():删除数组的最后一个值。相当于arr.length -= 1;
c. arr.shift():删除数组的第一个值。
d. arr.unshift(值):在数组的第0个位置新增一个值;
e. arr.push(值):在数组的最后一个位置新增一个值;
f. 直接访问数组没达到的下标,可以动态追加。
arr[100]=1; 中间如果有空余下标,将存入Undefined。
4、数组中的其他方法:
① join("分隔符号"):将数组用指定分隔符链接为字符串。当参数为空时,
默认用英文逗号分隔
② concat():【原数组不会被改变】将数组,与两个或多个数组的值链接为新数组
oncat连接时,如果有二维数组,则至多能拆一层[]
[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]
[1,2].concat([3,4,[5,6]])->[1,2,3,4,[5,6]]
③ push() 数组最后增加一个,unshift(值) 数组开头增加一个。-返回数组的长度;
pop() 数组最后删除一个,shift() 数组开头删除一个。-返回被删除的值
【上述方法,均会改变原数组】
④ reverse():【原数组会改变】将数组翻转,倒序输出;
⑤ slice(begin,end):【原数组不会被改变】截取数组中的某一部分,并返回
被截取的新数组将
>>> 传入一个参数,表示开始区间,默认截到数组最后;
>>> 传入两个参数,表示开始和结束的下标,左闭右开区间(包含begin,不包含end
>>> 两个参数可以为负数,表示从右边开始数,最后一个值为-1;
⑥ sort():【原数组被改变】将数组进行升序排列;
>>> 默认情况下,会按照每个元素首字母的ASCII值进行排序;
[3,1,5,12].sort()->[1,12,3,5];
>>> 可以传入一个比较函数,手动指定排序的函数算法;
函数将默认接收两个值a,b 如果返回值>0,则证明a>b;
arr.sort(function(a,b){
return a-b;//升序排列
return b-a;//降序排列
});
⑦ indexOf(value,index):返回数组中第一个value值所在的下标,如果没有找到返回-1
lastIndexOf(value,index):返回数组中最后一个value值所在的下标,如果没有找到
返回-1;
>>> 如果没有指定index,则表示全数组查找value;
>>> 如果指定了index,则表示从index开始,向后查找value;
⑧ forEach():专门用于循环遍历数组。接收一个回调函数,回调函数接受两个参数,
第一个参数为数组每一项的值,第二个参数为下标。
【IE8之前,不支持此函数】
arr.forEach(function(item,index){
console.log(item);
console.log(index);
});
⑨ map():数组映射。使用方式与forEach()相同。不同的是,map可以有return
返回值,表示将原数组的每个值进行操作后,返回给一个新数组。
【IE8之前,不支持此函数】
var arr1=arr.map(function(item){
console.log(item);
return item+2;
});
5、二维数组与稀疏数组(了解)
① 二维数组:数组中的值,依然是一个数组形式。
eg:arr = [[1,2,3],[4,5,6]];//相当于两行三列
读取二维数组:arr[行号][列号];
② 稀疏数组:数组中的索引是不连续的。(length要比数组中实际的元素个数大)
6、基本数据类型&引用数据类型:
① 基本数据类型:赋值时,是将原变量中的值,赋值给另一个变量。赋值完成后,两个
变量相互独立,修改其中一个的值,另一个不会变化。
② 引用数据类型:赋值时,是将原变量在内存中的地址,赋值给另一个变量。赋值完成
后,两个变量中存储的是同一个内存地址,访问的是同一份数据,修改其中一个的
值,另一个也会变化。
③ 数值型、字符串、布尔型等变量属于基本数据类型;
数组,对象属于引用数据类型
(二)内置对象
1、Boolean类
也有两种声明方式:
可以使用字面量方式声明一个单纯的变量。用typeof检测为Boolean类型;
也可以使用new Boolean() 声明一个Boolean类型的对象。用typeof检测为Object类型
2、Number类
Number.MAX_VALUE 返回Number类可表示的最大值;
Number.MIN_VALUE 返回Number类可表示的最小值;
toString():将数值类型转换为字符串类型
toLocaleString():将数值按照本地格式顺序转换为字符串,一般从右开始,
三个一组加逗号分隔;
toFixed(n):将数字保留n位小数,并转为字符串格式;
toPrecision(n):将数字格式化为指定长度。n表示不含小数点的位数长度。
如果n<原数字长度,则用科学计数法表示;
如果n>原数字长度,则小数点后补0;
valueOf():返回Number对象的基本数字值;
3、String 类
3.1、属性:str.length 返回字符串的长度,字符数
字符串支持类似数组的下标访问方式:str[0];
3.2、方法:
toLowerCase():将字符串所有字符转成小写;
toUpperCase():将字符串所有字符转成大写;
charAt(n):截取数组的第n个字符,相当于str[n];
indexOf("str","index"):查找字串在字符串中出现的位置,如果没有找到返回-1;
其他同数组的indexOf方法;
lastIndexOf():同数组
substring(begin,end):从字符串中截取子串
>>> 传入一个参数,表示从begin开始,到最后;
>>> 传入两个参数,表示从begin到end的区间,左闭右开;
split("分隔符"):将字符串以指定分隔符分隔,存入数组中。传入空""表示将字符串
的每个字符分开放入数组;
replace("old","new"):将字符串中的第一个old替换为new;
>>> 第一个参数,可以是普通字符串,也可以是正则表达式;
>>> 如果是普通字符串,则只替换第一个old。
如果是正则表达式,则可以根据正则的写法要求,进行替换。
4、Date 日期类
4.1、new Date():返回当前最新时间;
new Date("2017,12,12,12:12:12"):返回指定的时间;
4.2、常用方法
getFullYear():获取4位年份;
getMonth():获取月份0-11;
getDate():获取一个月中的第几天 1-31;
getDay():获取一周中的第几天 0-6,0表示周天
getHours():获取小时
getMinutes():获取分钟
getSeconds():获取秒
function getTime(){
var dates=new Date();
var year=dates.getFullYear();
var month=dates.getMonth();
var date1=dates.getDate();
var day=dates.getDay();
var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]
var hours=dates.getHours()<10?"0"+dates.getHours():dates.getHours();
var minutes=dates.getMinutes()<10?"0"+dates.getMinutes():dates.getMinutes();
var seconds=dates.getSeconds()<10?"0"+dates.getSeconds():dates.getSeconds();
var div1=document.getElementById("div1");
div1.innerText=year+"年"+(month+1)+"月"+date1+"日"+weeks[day]
+hours+":"+minutes+":"+seconds;
}
setInterval(getTime,1000);
window.onload=function(){
getTime();
}
(三)自定义对象
1、基本概念:
① 对象:对象是拥有一系列无序属性和方法的集合。
② 键值对:对象中的数据,是以键值对的形式存在。对象的每个属性和方法,都对
应值得一个键名,以键取值。
③ 属性:描述对象特征的一系列变量,称为属性。【对象中的变量】
④ 方法:描述对象行为的一系列函数,称为方法。【对象中的函数】
2、对象的声明:
① 字面量声明: var obj = {
key1:value1,
key2:value2,
func1:function(){}
}
>>> 对象中的数据是以键值对形式存储,键与值之间用:分隔。多个键之间用,分隔。
>>> 对象中的键,可以是除了数组/对象以外的任何数据类型。但是,一般我们只用
普通变量名作为键。
>>> 对象中的值,可以是任何数据类型。包括数组和对象。
② 使用new关键字声明:var obj= new Object();
obj.key1=value1;
obj.key2=value2;
obj.function=function(){}
3、对象中属性和方法的读写:
① .运算符:
对象内部:this.属性 this.方法()
对象外部:对象名.属性 对象.方法();
② 通过["key"]调用:对象名.["属性名"] 对象名.["方法名"]();
>>> 如果键中包含特殊字符,则只能使用第②种方式;
>>> 对象中,直接写变量名,默认为调用全局变量。如果需要调用对象自身的属性或者方法。需要使用对象名.属性,或者this.属性。
person.age this.age 都可以,但推荐使用this关键字。
③ 删除对象的属性和方法:delete 对象.属性名/方法名
delete person.age;
ps:不足之处,请多多指教(#^.^#)