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