9.1 一周学习总结

一、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;