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返回.