JavaScript 基本知识点整理

1.导入JS的三种方式:

a) 在HTML标签中,直接内嵌JS,如:<button οnclick=”func()”></button>;

b) 在HTML页面中使用<script></script>包裹JS代码,如:<script>JS代码</script>

c) 引入外部的JS文件,如<script  language=”javascript”  src=”js路径”></script>

2.JS常用的数据类型:

a) String字符串  ”str”  ’str’;

b) Boolean 布尔类型  true / false

c) Number  数值

d) Object  对象

e) Null  特殊的空值

f) Undefined  未定义(var声明了,但未赋值)

3.常用的数值函数:

a) isNaN(): 检测一个变量是否是非数值.先用Number()函数尝试转换,如果不能转为数值,则为NaN

b) Number(): 转换任何数据类型为数值, 字符串含有其它字符,不能转:null->0  true->1  false->0  纯数值字符串=相应的数字  空字符串=0  undefined->NaN

c) parseInt(): 将字符串转为整数类型: 纯数值=数值(会抹去小数点)  空字符串=NaN  包含其它字符的字符串,会截取第一个非数值字符串前面的部分;  parseInt()只能转字符串,转其它类型,全是NaN;

d) parseFloat(): 将字符串转为浮点数类型,不抹除小数点,其它作用类同于parseInt();

4.JS中运算符的优先级:

()

小括号最高

!  ++  --

单目运算符

 *  /  %

 +  - 

 

>  <  >=  <=

 ==  !=

&&

&&和||同时存在,&&比||高

 ||

 =  +=  -=  *=  /=

最低的是各种赋值

5.if结构  循环结构  支持的判断结果:

a) Boolean:  false假;  true真;

b) String: 空字符串为假;  一切非空字符串为真;

c) Number:  0为假;  一切非0为真;

d) Null / Undefined / NaN : 全为假;

e) Object: 全为真;

6.JS中的DOM:

a) Document.getElementById/Name/TagName/ClassName(); // 取元素的节点;

b) GetAttribute(“属性名”); // 获得属性节点;

c) SetAttribute(“属性名”,”属性值”); // 设置属性节点;

d) InnerText[=”文本”]; // 获得/设置 文本节点;

e) InnerHTML[=”html代码”]; // 获得/设置 元素内部的html代码;

f) tagName: 获得当前节点的标签名;

6.1修改样式系列:

.style.样式 = “样式值”;

.style.cssText = “多个CSS键值对”;

.className = “class名称”;

6.2 层次节点系列:

1.childNodes: (数组)获取元素的所有子节点; (.children);

2.firstChild: 获取元素的第一个子节点; (firstElementChild);

3.lastChild: 获取语速的最后一个子节点; (lastElementChild);

4.parentNode: 获取当前节点的父节点;

5.previousSibling: 获取当前节点的前一个兄弟节点;

6.nextSibling: 获取当前节点的后一个兄弟节点;

7.Attributes: 取到所有属性节点[数组];

6.3 创建新增节点:

1..createElement("标签名”); 创建一个节点;

2..setAttribute(“ ”,” ”); 给新节点设置属性;

3.父节点.appendChild(node); 父节点最后追加新节点;

4.父节点.insertBefore(newNode,oldNode); 在父节点的oldNode之前插入newNode;

5.需克隆的节点.cloneNode(true/false); 默认为false: 只克隆当前节点,不克隆子节点; true: 克隆所有子节点.

6.4 删除替换节点:

1.父节点.removeChild(childNode); 从父节点删除子节点;

2.父节点.replaceChild(newNode,oldNode); 用newNode 替换掉oldNode;

6.5 HTML-DOM 操作表格

1.表格对象:

a) Rows: 获取到所有行对象,数组格式;

b) insertRow(index); 在index后面插入一个新行;

c) deleteRow(index); 删除表格第index+1行;

2.行对象:

a) Cells: 获取到所有的单元格对象,数据格式;

b) rowIndex: 返回当前行的索引值;

c) insertCell(index); 在index个单元格后,插入一个新单元格;

d) deleteCell(index): 删除index+1个单元格;

3.单元格对象:

a) cellIndex: 返回当前单元格索引;

b) innerText / innerHTML: 设置单元位置内容

7.键盘事件 & 确定键盘按键

a) 键盘事件: keyDown / keyPress / keyUp ;

b) 长按时: 不断的执行keyDown / keyPress,  有keyDown,不一定有keyUp, 当按键时,鼠标将焦点点走,就没有keyUp事件

c) 确认一个按键的方法:

Dom.keyDown = function(e) {

Var evn = e || window.event;

Var code = evn.keyCode || evn.charCode || evn.which;

If (code == 13){ 回车 }};

d)  判断组合键原理: 声明多个组合键对应的标志变量(全局变量,默认为0),当按键keyDown时,对应的标志变量为1; 当按键keyUp时,对应的标志变量置0; 通过判断多个标志变量是否同时为1,进而判断按键是否同时按下;

8. 事件冒泡 & 事件捕获 & 阻止默认事件

8.1 事件冒泡:

当触发某DOM元素的事件时,如果祖先元素存在同类型事件, 则事件会从当前元素开始,逐个往上触发所有祖先元素的同类型事件;

8.1.1 如何添加事件,会导致事件冒泡:

DOM0模型,均为事件冒泡;

IE中使用.attachEvent()添加的事件,均为冒泡;

其它浏览器,.addEventListener()添加的事件,当第三个参数为false时,为冒泡;

8.1.2 如何阻止事件冒泡:

IE浏览器中: 将e.cancelBubble属性设为true;

其他浏览器: 调用e.stopPropagation()方法;

8.2 事件捕获:

与冒泡相反,当触发某个元素事件时,会从根节点开始,逐个向下触发祖先元素的同类型事件,直到当前DOM为止;

8.2.1 如何产生事件捕获:

使用addEventListener()添加事件,并且将第三个参数设置为true;

8.3 阻止各种标签的默认事件:

IE浏览器: 将e.returnValue属性设为false;

其他浏览器: 调用e.preventDefault();方法;

9. JS中数组的常用方法:

a) .splice(index,num); 从index开始,删除num个元素;

b) .push(n); 数组最后插入一个元素;

c) .pop(); 删除数组最后一个元素;

d) .unshift(); 在数组第0位插入一个元素

e) .shift(); 删除数组最后一个元素;

f) .sort([function]); 默认按照ASCII码值排序,可以传入回调函数进行排序;

g) 升序降序排列: function(a,b){return a-b;//升序 return b-a;//降序}

h) Reverse: 数组反转;

i) Join([‘分隔符’]); 将数组以指定的分隔符连接为字符串,不填默认为” , ”;

j) Concat(arr1,arr2,[arr3,[arr4,[......]]]); 连接多个数组,如果数组为多维数组,只拆第一层[  ];

k) indexOf(n); 查询元素在数组的第一个下标;

l) lastIndexOf(n); 查询元素在数组的最后一个下标;

m) Slice(begin,end); 截取数组,从begin开始,到end数组,左闭右开;

10. Number类常用方法:

a) .toString(); 转为字符串,相当于num + ””;

b) .toFixed(n); 将数字转为字符串,保留n位小数,四舍五入;

c) .valueOf(): 返回Number对象的基本数字值;

11. String类常用方法:

a) .split(“char”); 将字符串通过指定字符分割为数组; 如果传入””,则将所有字符放入数组;

b) .indexOf(char); 查询某个字符在字符串的下标;

c) .charAt(index); 截取字符串的第index个字符;

d) .substring(begin,end); 截取字符串从begin开始到end的子串;左闭右开;

e) .replace(old,new); 将字符串的old部分子串,替换为new(如果old是字符串,只替换第一个符合要求的子串; 如果old是正则,则按照正则要求替换 //g,替换全局);

f) toLowerCase(); 所有字符转为小写;

g) ToUpperCase(); 所有字符转为大写;

12. Date类常用方法:

a) .getFullYear(); 获取4位年份;

b) .getMonth(); 获取月份0~11;

c) .getDate(); 获取一个月中的某一天 1~31;

d) .getDay(); 获取一周中的某一天 0~6;

e) .getHours(); 返回Date对象的小时(0~23);

f) .getMinutes(); 返回Date对象的分钟(0~59);

g) .getSeconds(); 返回Date对象的秒数(0~59);

13. 正则表达式的声明:

a) 字面量声明: /[正则表达式]/[表达式模式g/i/m];

b) new关键字实现: var reg = new regExp(“正则表达式”,”表达式模式”);

c) [表达式模式]: g: 全局匹配; 默认只匹配第一项符合要求;

i: 忽略大小写; 默认要求大小写一致;

M:多行匹配; 当字符串分为多行时,多行匹配默认,会有多个开头结尾; 默认, 一个字符串不管分多少行,只有一个开头一个结尾;

14.正则表达式的常用规则:

a) 匹配的数据:

/d 数字0-9 相当于[0-9]

/D 非数字0-9 相当于[^0-9]

/w 字母,数组,下划线 [0-9a-zA-Z_]

/W 非字母,数组,下划线 [^0-9a-zA-Z_]

/s 任何空字符

/S 非空字符

.  除了换行符的任意字符

b)  特殊符号

[]需要匹配的数据

()分组,使用|的时候进行分组

| 或,两边都可以.默认从头到尾分两块,如果用(a|b),则只匹配()里面部分;

^ 在[]内部,表示整个[]内部取非; 在正则表达式开头,表示整个字符串的开始;

$ 表示整个正则模式的结束;

C)  匹配次数

{} 表示匹配前面部分的次数.如{3,5}表示3-5次, {3,}表示3或多次,{3} 匹配3次;

? 表示匹配前面部分0-1次;

+:  1或多次;

*:  匹配任意次数;

15. JS中的面向对象和面向过程:

a) 面向过程是指专注于如何去解决一个问题的过程步骤;

b) 面向对象是指专注于由哪一个对象来解决这个问题;

16. 面向对象的三大特征:

a) 继承

b) 封装

c) 多态

17.什么叫封装?

a) 封装分为方法的封装和属性的封装:

b) 方法的封装: 是指将类内部的函数进行私有化处理,不对外提供调用接口,无法在类外部使用

c) 属性的封装: 是指将类中的属性进行私有化处理,对外不能直接使用对象名访问,而是提供set/get方法,让外部使用set/get方法,来对属性进行操作;

18.JS中this指向问题:

a) 总的来说,就是谁最终调用函数,this就指向谁!

b) This指向的规律:

i. 通过函数名()调用的,this永远指向window;

ii. 通过对象方法调用的,this指向这个对象;

iii. 函数作为数组的一个元素,用数组下标调用的,this指向这个数组;

iv. 函数作为window内置函数的回调函数(setTimeout,setInterval)使用,this指向window;

v. 函数作为构造函数,使用new关键字声明,this指向新new出的对象;

19.什么叫继承?实现继承的几种方法?

a) 继承: 使用一个子类,继承另外一个父类,那么子类就可以自动拥有父类的所有属性和方法

i. 1. 通过扩展object实现继承;

ii. 2. 使用原型实现继承

iii. 3. 使用call  apply  bind 实现继承

19.1 通过扩展object实现继承:

通过循环,将父类对象的所有属性和方法,全部赋给子类对象; 关键点在于for-in循环,即使不扩展object,也能通过简单的循环实现操作;

19.2 使用原型实现继承:

将父类对象,赋值给子类的prototype,那么父类对象的属性和方法就会出现在子类的prototype中,那么,实例化子类时,子类的prototype又会到子类对象的_proto_中,最终,父类对象的属性和方法,会出现在子类对象的_proto_对象中;

19.3 使用call  apply  bind  实现继承:

通过函数名调用这三个函数,可以强行将函数中的this指定为某个对象.

20. 闭包初级理解:

a) 在函数内部,定义一个子函数,子函数可以访问父函数的私有变量.可以在子函数中进行操作,最后将子函数return返回.