JavaScript基本知识点整理（超实用）

  絮叨絮叨

                 

　今天给大家分享一下这两天自己整理的JavaScript部分的笔记，下面都是我觉得比较常用的，希望能帮助到大家！

①在HTML标签中，直接内嵌JS。<button onclick=”func()”></button>

②在HTML页面中使用<script></script>包裹JS代码。<script> JS代码 </ script >

③引入外部的JS文件。<script  language=”javascript” src=”JS路径”></ script >

String 字符串 “str” ‘str’

Boolean true/false   

Number 数值   

Object 对象

Null 特殊的空值          

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

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

Number():

　　转换任何数据类型，为数值。  字符串含有其他字符，不能转。  null -> 0

　　True=1 false=0    纯数值字符串=相应的数字  空字符串=0。   Undefined -> NaN

ParseInt():将字符串转为整数类型。

　　纯数值=数值，会抹掉小数点   空字符串 = NaN

　　包含其他字符的字符串，会截取第一个非数值字符串前面的部分

　　ParseInt只能转字符串，转其他类型，全是NaN

Boolean：false假  true真

String：空字符串为假 一切非空为真

Number： 0为假  一切非0为真

Null、Undefined、NaN： 全为假  Object：全为真

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:取到所有属性节点[数组]。

【创建新增节点】

1. .createElement(“标签名”) 创建一个节点  .setAttribute(“”,””)给新节点设置属性
2. 父节点.appendChild(node) 父节点最后追加新节点；
3. 父节点.insertBefore(newNode,oldNode) 在父节点的oldNode之前插入newNode
4. 需克隆节点.cloneNode(true/false);默认false：只克隆当前节点，而不克隆子节点；true：克隆所有子节点。

【删除替换节点】

1. 父节点.removeChild(childNode); 从父节点删除子节点
2. 父节点.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：设置单元文字内容。

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，进而判断按键是否同时按下。

【事件冒泡】

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

>>> 如何添加事件，会导致事件冒泡：

DOM0模型，均为事件冒泡；

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

其他浏览器，.addEventListener添加的事件，当第三个参数为false时，为冒泡；

>>> 如何阻止事件冒泡：

IE浏览器中：将e.cancelBubble属性设为true；

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

【事件捕获】

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

>>> 如何产生事件捕获：

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

【阻止各种标签的默认事件】

IE浏览器中：将e.returnValue属性设为false；

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

.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的子数组，左闭右开。

.toString():转为字符串 ， 相当于num+””

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

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

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

.indexof(char): 查询某个字符，在字符串的下标；  

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

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

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

.toLowerCase() 所有字符转为小写；

.toUpperCase() 所有字符转为大写;

.getFullYear(): 获取4位年份

.getMonth(): 获取月份 0~11

.getDate(): 获取一月中的某一天 1~31

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

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

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

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

① 字面量声明：  /[正则表达式]/[表达式模式g/i/m]

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

[表达式模式]：

　　g:全局匹配。默认只匹配第一项符合要求；

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

　　m:多行匹配。(当字符串分为多行时，多行匹配默认，会有多个开头结尾。默认，一个字符串不管分多少行，只有一个开头一个结尾。)

匹配的数据：

　　/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或多次  *：匹配任意次数

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

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

继承、封装、多态

封装分为方法的封装和属性的封装

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

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

总的来说，就是谁最终调用函数，this就指向谁！

This指向的规律:

　　①通过函数名()调用的，this永远指向window

　　②通过对象.方法调用的，this指向这个对象

　　③函数作为数组的一个元素，用数组下标调用的，this指向这个数组

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

　　⑤函数作为构造函数，使用new关键字声明，this指向新new出的对象

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

①通过扩展object实现继承

②使用原型实现继承

③使用call、apply、bind实现继承

通过扩展object实现继承:

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

使用原型实现继承:

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

使用call、apply、bind实现继承:

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有