JavaScript基本知识点整理(超实用)

时间:2022-11-17 15:08:51

  絮叨絮叨

                 

 今天给大家分享一下这两天自己整理的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为真

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

【创建新增节点】

  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: 返回当前单元格索引;

②InnerTextInnerHTML:设置单元文字内容。

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

 

今天就给大家分享到这儿吧~~~JS中常用的知识点基本都概括了,大家如果觉得写的不详细的话,可以查看菜鸟教程或者查看帮助文档,有什么不足的地方请大家留言~~~谢谢大家了~~