絮叨絮叨
今天给大家分享一下这两天自己整理的JavaScript部分的笔记，下面都是我觉得比较常用的，希望能帮助到大家！
|
1、 导入JS的三种方式 |
①在HTML标签中，直接内嵌JS。<button onclick=”func()”></button>
②在HTML页面中使用<script></script>包裹JS代码。<script> JS代码 </ script >
③引入外部的JS文件。<script language=”javascript” src=”JS路径”></ script >
|
2、 JS的常用数据类型 |
String 字符串 “str” ‘str’
Boolean true/false
Number 数值
Object 对象
Null 特殊的空值
Undefined未定义(var声明了，但未赋值)
|
3、 常用的数值函数 |
isNaN()：检测是一个变量，是否是非数值。先用Number()函数尝试转换，如果不能转为数值，则为NaN
Number():
转换任何数据类型，为数值。 字符串含有其他字符，不能转。 null -> 0
True=1 false=0 纯数值字符串=相应的数字 空字符串=0。 Undefined -> NaN
ParseInt():将字符串转为整数类型。
纯数值=数值，会抹掉小数点 空字符串 = NaN
包含其他字符的字符串，会截取第一个非数值字符串前面的部分
ParseInt只能转字符串，转其他类型，全是NaN
|
4、JS中的运算符的优先级 |
| （） | 小括号最高 |
| ！ ++ -- | 单目运算符 |
| * / % | |
| + - | |
| > < >= <= | |
| == != | |
| && | 与或同时存在时，&&比||高 |
| || | |
| = += -= *= /= | 最低的是各种赋值 |
|
5、if结构、循环结构、支持的判断结果 |
Boolean：false假 true真
String：空字符串为假 一切非空为真
Number： 0为假 一切非0为真
Null、Undefined、NaN： 全为假 Object：全为真
|
6、JS中的DOM |
Document.getElementById/Name/TagName/ClassName(); //取元素节点
GetAttribute(“属性名”); setAttribute(“属性名”,”属性值”); // 取到、设置属性节点
InnerText[=“文本”] : 取到/设置 文本节点
InnerHTML[=”html代码”]: 取到/设置 元素内部的html代码
tagName： 取到当前节点的标签名
【修改样式系列】
.style.样式 = “样式值” .style.cssText = “多个CSS键值对” .className=”class名”
【层次节点系列】
1 .childNodes：(数组)获取元素的所有子节点 .children
2 .firstChild：获取元素的第一个子节点； firstElementChild
3 .lastChild:获取元素的最后一个子节点； lastElementChild
4 . parentNode:获取当前节点的父节点；
5 .previousSibling:获取当前节点的前一个兄弟节点
6 .nextSibling:获取当前节点的后一个兄弟节点
7 . attributes:取到所有属性节点[数组]。
【创建新增节点】
- .createElement(“标签名”) 创建一个节点 .setAttribute(“”,””)给新节点设置属性
- 父节点.appendChild(node) 父节点最后追加新节点；
- 父节点.insertBefore(newNode,oldNode) 在父节点的oldNode之前插入newNode
- 需克隆节点.cloneNode(true/false);默认false：只克隆当前节点，而不克隆子节点；true：克隆所有子节点。
【删除替换节点】
- 父节点.removeChild(childNode); 从父节点删除子节点
- 父节点.replaceChild(newNode,oldNode); 用newNode替换掉oldNode；
【HTML-DOM 操作表格】
1、表格对象
①Rows: 取到所有行对象，数组格式；
②InsertRow(index); 在index后面插入一个新行
③DeleteRow(index); 删除表格第index+1行；
2、行对象
①Cells: 取到所有单元格对象，数组格式； rowIndex:返回当前行索引；
②InsertCell(index): 在index个单元格后，插入一个新单元格；
③DeleteCell(index): 删除index+1个单元格；
3、单元格对象
①cellIndex: 返回当前单元格索引；
②InnerText、InnerHTML：设置单元文字内容。
|
7、键盘事件&确定键盘按键 |
1、键盘事件：keyDownàkeyPressàkeyUp
2、长按时：不断的执行keyDownàkeyPress
有keyDown，不一定有keyUp(当按键时，鼠标将焦点点走，就没有keyUp事件)
3、确认一个按键的方法
Dom.keyDown = function(e){ Var evn = e||window.event; Var code = evn.keyCode||evn.charCode||evn.which; If(code==13){ 回车 }}
4、判断组合键原理：声明多个组合键对应的标志变量(全局变量，默认为0)，当按键keyDown时，对应的标志变量为1；当按键Up时，对应的标志变量置0；通过判断多个标志变量，是否同时为1，进而判断按键是否同时按下。
|
8、事件冒泡&事件捕获&阻止默认事件 |
【事件冒泡】
当触发某DOM元素的事件时，如果祖先元素存在同类型事件。则，事件会从当前元素开始，逐个往上触发所有祖先元素的同类型事件。
>>> 如何添加事件，会导致事件冒泡：
DOM0模型，均为事件冒泡；
IE中使用.attachEvent()添加的事件，均为冒泡；
其他浏览器，.addEventListener添加的事件，当第三个参数为false时，为冒泡；
>>> 如何阻止事件冒泡：
IE浏览器中：将e.cancelBubble属性设为true；
其他浏览器：调用e.stopPropagation();方法
【事件捕获】
与冒泡相反，当触发某元素事件时，会从根节点开始，逐个向下触发祖先元素的同类型事件，直到当前DOM为止。
>>> 如何产生事件捕获：
使用addEventListner()添加事件，并且将第三个参数设置为true
【阻止各种标签的默认事件】
IE浏览器中：将e.returnValue属性设为false；
其他浏览器：调用e.preventDefault();方法
|
9、JS中数组的常用方法 |
.splice(index,num)：从index开始，删除num个元素；
push(n):数组最后插入一个元素 pop():删除数组最后一个元素
unshift(n):在数组第0位插入一个元素 shift():删除数组第一个元素
sort([functuion]): 默认按照ASCII码值排序，可以传入回调函数进行排序；
升序降序排列： function(a,b){ Return a-b; //升序 return b-a;//降序 }
Reverse: 数组反转
Join([‘分隔符’])：将数组以指定分隔符链接为字符串，不填默认用“,”
Concat(arr1,arr2,[arr3,[arr4,[……]]]):链接多个数组(如果数组为多维数组，只拆第一层[])
indexOf(n):查询元素在数组的第一个下标 lasrIndexOf(n):查询元素在数组最后一个下标
slice(begin,end); 截取数组从begin开始，到end的子数组，左闭右开。
|
10、Number类常用方法 |
.toString():转为字符串 ， 相当于num+””
.toFixed(n):将数字转为字符串，保留n位小数，四舍五入
.valueOf():返回Number对象的基本数字值
|
11、String类常用方法 |
.split(“char”); 将字符串通过指定字符分割为数组;如果传入””,则将所有字符放入数组；
.indexof(char): 查询某个字符，在字符串的下标；
.charAt(index): 截取字符串的第index个字符
. substring(begin,end):截取字符串从begin开始，到end的子串。左闭右开
.replace(old,new):将字符串的old部分子串，替换为new(如果old是字符串，只替换第一个符合要求的子串；如果old是正则，则按照正则要求替换 //g ,替换全局)
.toLowerCase() 所有字符转为小写；
.toUpperCase() 所有字符转为大写;
|
12、Date类常用方法 |
.getFullYear(): 获取4位年份
.getMonth(): 获取月份 0~11
.getDate(): 获取一月中的某一天 1~31
.getDay(): 获取一周中的某一天 0~6
.getHours() 返回 Date 对象的小时 (0 ~ 23)
.getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
.getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
|
13、 正则表达式的声明 |
① 字面量声明： /[正则表达式]/[表达式模式g/i/m]
② new关键字实现：var reg = new regExp(“正则表达式”,”表达式模式”);
[表达式模式]：
g:全局匹配。默认只匹配第一项符合要求；
i: 忽略大小写。默认要求大小写一致；
m:多行匹配。(当字符串分为多行时，多行匹配默认，会有多个开头结尾。默认，一个字符串不管分多少行，只有一个开头一个结尾。)
|
14、正则表达式的常用规则 |
匹配的数据：
/d 数字0-9 相当于[0-9] /D 非数字0-9 相当于[^0-9]
/w 字母、数组、下划线 [0-9a-zA-z_] /W 非字母、数字、下划线 [^0-9a-zA-z_]
/s 任何空字符 /S 非空字符 . 除了换行符的任意字符
特殊符号：
[] 需要匹配的数据 () 分组，使用|的时候进行分组
| 或，两边都可以。默认从头到尾分两块，如果用(a|b)，则只匹配()里面部分
^ 在[]内部，表示整个[]内部取非；在正则表达式开头，表示整个字符串的开始；
$ 表示整个正则模式的结束。
匹配次数：
{} 表示匹配前面部分的次数。 {3,5} 3-5次 {3,} 3或多次 {3} 匹配3次
？ 匹配前面部分0-1次 +： 1或多次 *：匹配任意次数
|
15、JS中的面向对象和面向过程 |
面向过程是指专注于如何去解决一个问题的过程步骤。
面向对象是指专注于由哪一个对象来解决这个问题。
|
16、面向对象的三大特征 |
继承、封装、多态
|
17、什么叫封装？ |
封装分为方法的封装和属性的封装
方法的封装是指将类内部的函数进行私有化处理，不对外提供调用接口，无法在类外部使用
属性的封装是指将类中的属性进行私有化处理，对外不能直接使用对象名访问，而是提供set/get方法，让外部使用set/get方法，来对属性进行操作
|
18、JS中的this指向问题 |
总的来说，就是谁最终调用函数，this就指向谁！
This指向的规律:
①通过函数名()调用的，this永远指向window
②通过对象.方法调用的，this指向这个对象
③函数作为数组的一个元素，用数组下标调用的，this指向这个数组
④函数作为window内置函数的回调函数(setTimeout,setInterval)使用，this指向window
⑤函数作为构造函数，使用new关键字声明，this指向新new出的对象
|
19、什么叫做继承？实现继承的几种方法？ |
继承:使用一个子类，继承另外一个父类，那么子类就可以自动拥有父类的所有属性和方法
①通过扩展object实现继承
②使用原型实现继承
③使用call、apply、bind实现继承
通过扩展object实现继承:
通过循环，将父类对象的所有属性和方法，全部赋给子类对象。关键点在于for-in循环，及时不扩展object，也能通过简单的循环实现操作
使用原型实现继承:
将父类对象，赋值给子类的prototype，那么父类对象的属性和方法就会出现在子类的prototype中。那么，实例化子类时，子类的prototype又会到子类对象的__proto__中，最终，父类对象的属性和方法，会出现在子类对象的__proto__对象中。
使用call、apply、bind实现继承:
通过函数名调用这三个函数，可以强行将函数中的this指定为某个对象
| 20、什么叫做闭包？ |
在函数内部，定义一个子函数，子函数可以访问父函数的私有变量。可以在子函数中进行操作，最后将子函数return返回
posted on
