.js知识点

ECMAScript(js核心)描述基本语法

1.NaN

isNaN()：非数（not number），可确定值是否为非数字，是非数字（不是数字）输出true，不是非数（是数字）输出fluse

NaN 表示 “不是一个数字”，但是 NaN 的 typeof 结果却是 number

2.replace方法

x.replace（原文本需要更改的部分，被更改为）

3.外部文件：可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<script src="myScript.js"></script>
注释：myFunction 保存在名为 "myScript.js" 的外部文件中。

4.对象也是一个变量，但对象可以包含多个变量，每个值以 name:value 对呈现。

var car = {name:"Fiat", model:500, color:"white"};

5.对象方法作为一个函数定义存储在对象属性中。对象也是变量，但是对象包含多个变量属性

对象方法是一个函数定义,并作为一个属性值存储。

var person = {
    firstName: "John",
    lastName : "Doe",
    fullName : function() //对象方法（作为函数定义储存在对象属性中）
    {
       return this.firstName + " " + this.lastName;
    }

对象方法通过添加 () 调用 (作为一个函数)。

接上：
document.getElementById("demo").innerHTML = person.fullName();

6.作用域是可访问变量的集合。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

function myFunction() {
    carName = "Volvo";//么欸有使用给关键字var，为全局变量
}

7.Math.random()

是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值

8.for/in 语句循环遍历对象的属性

function myFunction(){
    var x;
    var txt;
    var person={fname:"Bill",lname:"Gates",age:56}; 
    for (x in person){
        txt=txt + person[x];//结果：BillGates56
    }

9.do/while 循环：

该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：

do
{
    需要执行的代码
}
while (条件);

10.break和continue的区别：

break：break 语句可用于跳出循环。

continue：continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代

11.typeof(数据类型）和indexOf（返回指定字符串在字符串中首次出现的位置）

typeof 操作符来检测变量的数据类型

数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。

使用typeof检测：对象{ }和数组[ ]的数据类型都是object(对象)

null 值为空，但是数据类型是object。 undefined值为 undefined, 类型为 undefined。

typeof 一个没有值的变量会返回 undefined

null 和 undefined 的值相等，但类型不等：

typeof undefined       // undefined
typeof null         // object
null === undefined      // false
null == undefined      // true

12.js的 6 种不同的数据类型：

• string

• number

• boolean

• object

• function

• symbol

13.js三种对象类型：

• Object

• Date：数据类型为object

• Array：数据类型为object

2 个不包含任何值的数据类型：

• null：数据类型为object

• undefined：数据类型为undefined

NaN：数据类型为number

14。强转为数字

：字符串包含数字(如 "3.14") 转换为数字 (如 3.14)。空字符串转换为 0。其他的字符串会转换为 NaN (不是个数字)。

Number("3.14")  // 返回 3.14
Number(" ")    // 返回 0
Number("")    // 返回 0
Number("99 88")  // 返回 NaN

15.变量后跟一个+：变量的数据类型会转换为数字型

将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字：

Number(false)   // 返回 0
Number(true)   // 返回 1

日期方法 getTime()和Number() 都可将日期转换为数字：d = new Date(); Number(d) d.getTime()

16.正则基础

正则表达式可以匹配某些特定的数据，可以从庞大的文字信息中提取出一小段你需要的数据

（1）字符组（[]）允许匹配一组可能出现的字符。匹配Java和 java：[Jj]ava

（2）连字符(-)代表区间.

匹配数据所有的数字、小写字母和大写字母:[0-9a-zA-Z]

（3）在正则中使用 \ 就可以进行对特殊符号进行转义 匹配-：-

（4）[]字符组中可以放多个条件例如，想要匹配数字和小写字母可以这样写：[0-9a-z]

（5）字符串开头使用^实现取反

在字符数组开头使用 ^ 字符实现取反操作 n【^e】 的意思就是n后面的字母不能为 e

（6）\w:任意字符

\w:与任意单词字符匹配：即【0-9】，【a-z】，【A-Z】，_(下划线)

（7）\d:与任意数字匹配

（8）\s:匹配空格

\s快捷方式可以匹配空白字符，比如空格，tab、换行等。

（9）\s【^D】：空白字符后面不跟D

（10）\b 匹配的是单词的边界

（11）快捷方法取反：小写改大写

快捷方式也可以取反，例如对于\w的取反为\W，将小写改写成大写即可，其他快捷方式也遵循这个规则。

（12）^区间内取反，^区间外表字符串开始

^在区间里面是取反，在区间外边表示一个字符串的开始 ^字符串

（13）$表示字符串结尾

在区间外部后边写$,表示一个字符串的结尾 字符串$

（14）.为任意字符

.是任意字符，只能出现在方括号之外，.字符只有一个不能匹配的字符，也就是换行符（\n）

（15）？是可选字符

，字符后加？，表示该字符可出现可不出现，即？用于匹配它之前的字符0次或1次

（16）{M，N}：重复区间

不知道具体要匹配字符组要重复的次数时使用重复区间，语法：{M,N}，M是下界而N是上界

\d{3,4} 既可以匹配3个数字也可以匹配4个数字，不过当有4个数字的时候，优先匹配的是4个数字，这是因为正则表达式默认是贪婪模式，即尽可能的匹配更多字符，而要使用非贪婪模式，我们要在表达式后面加上 ?号。

（17）开区间：\d{n,} 闭区间不写即可表示匹配一个或无数个。

+ 匹配1个到无数个，使用 *代表0个到无数个

+等价于{1,}，*等价于{0,}。

正则总结：

实例	描述
[Pp]ython	匹配 “Python” 或 “python”。
rub[ye]	匹配 “ruby” 或 “rube”。
[abcdef]	匹配中括号内的任意一个字母。
[0-9]	匹配任何数字。类似于 [0123456789]。
[a-z]	匹配任何小写字母。
[A-Z]	匹配任何大写字母。
[a-zA-Z0-9]	匹配任何字母及数字。
[^au]	除了au字母以外的所有字符。
[^0-9]	匹配除了数字外的字符。

实例	描述
.	匹配除 “\n” 之外的任何单个字符。要匹配包括 ‘\n’ 在内的任何字符，请使用象 ‘[.\n]’ 的模式。
？	匹配一个字符零次或一次，另一个作用是非贪婪模式
+	匹配1次或多次
*	匹配0次或多次
\b	匹配单词的边界
\d	匹配一个数字字符。等价于 [0-9]。匹配多个数字字符：\d{n}
\D	匹配一个非数字字符，等价于 0-9。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 \f\n\r\t\v。
\w	匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’。
\W	匹配任何非单词字符。等价于 ‘A-Za-z0-9_‘。

17.正则进阶：

（1）使用（）提取分组：

提取分组使用()即可，分组的功能——捕获数据

（2）|是或者

或者：使用分组的同时还可以使用或者，即|

例如：正则表达式提取所有的视频文件的后缀 \w{0,8}(.mp4|.avi|.wmv|.rmvb)

（3）非捕获分组(?:表达式)，可使用可不用

当并不需要捕获某个分组的内容，但是又想使用分组的特性的时候就可以使用非捕获组(?:表达式)，从而不捕获数据，还能使用分组的功能。此时也可以使用|

（4）分组使用技巧：

(\d{4})[-./\s]?(\d{1,2})[-./\s]?(\d{1,2}) 就可以从文本中将年月日分别提取出来了。[-./\s]表示匹配三个可能出现的分隔符-./和空白，?表示匹配它们0次或者1次，其他年月日的数据使用\d{N}与分组结合就可以提取到目标数据。

（5）分组的回溯引用：

代码0123< font >提示< /font >abcd 的正则表达式为：<\w+> .*? </\w+>

他的回溯引用为：<\w+> (.*?) </\1>

分组的回溯引用，使用\N可以引用编号为N的分组

18.抛出（throw）错误（err）

错误：当错误发生时，js会生成一个错误消息，即JavaScript 将抛出（throw）一个错误。

try 语句测试代码块的错误。

catch 语句处理错误。 try 和 catch 是成对出现的

throw 语句创建自定义错误，结束处理。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

（1）err/error：错误。

err对象属性（是固定属性）：err.name(设置或返回一个错误名）和err.message（设置或返回一个错误信息）

var txt=""; 
function message() 
{ 
    try { //测试错误
        adddlert("Welcome guest!"); 
    } catch(err) { //处理显示错误，抛出错误
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述：" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

<button type="button" οnclick="myFunction()">点我</button>
<p id="p01"></p>
<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
}
</script>

18.变量提升：只有声明的变量可以提升，初始化过的变量无法提升

19.switch case 语句

switch case 语句：判断一个变量与一系列值中某个值是否相等，每个值称为一个分支

switch(expression){
    case value :
       //语句
       break; //可选
    case value :
       //语句
       break; //可选
    //你可以有任意数量的case语句
    default : //可选
       //语句
}

switch case 执行时，一定会先进行匹配，匹配成功返回当前 case 的值，再根据是否有 break，判断是否继续输出，或是跳出判断。

switch 语句会使用恒等计算符(===)进行比较，如果进行比较的两字符数据类型不相等，返回false

20.加法与连接：数字1+数字2输出加法，数字1+字符1=两字符连接。

1+2=3，1+“2”=12

21.出现return，自动默认结束语句，返回值

22.数组不支持使用名字作为索引，只支持使用数字进行索引，对象使用名字进行索引

定义数组元素时，数组最后不能添加逗号。var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

23.表单验证：

<script>
function validateForm() {//表单验证的方法函数
//document.forms，获取页面表单
    var x = document.forms["myForm"]["fname"].value;//获取表单输入的值，处理input输入的值
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;//阻止表单提交
    }
}
</script>
<body>
<form name="myForm" action="demo_form.php"
οnsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>

注释：form name="myForm":name值为“myForm”的表单
    action="demo_form.php":发送表单数据到文件中,连接外部文件（处理输入）
    οnsubmit="return validateForm()":onsubmit会在表单中的确认按钮被点击时发生（手动验证表单）
    表单自动验证：required="required"：点击提交按钮，如果输入框是空的，浏览器会提示错误信息。 如果表单字段 (fname) 的值为空, required 属性会阻止表单提交
    method="post"表示表单中的数据以post方法传递。Form提供了两种数据传输的方式——get和post。

indexOf() 和lastIndexOf() 方法：

indexOf() 方法：可返回某个指定的字符串值在字符串中首次出现的位置，如果要检索的字符串值没有出现，则该方法返回 -1。

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。如果要检索的字符串值没有出现，则该方法返回 -1。

24.API约束验证：

<input id="id1" type="number" min="100" max="300" required>
var demo = document.getElementById("id1");
if (demo.checkValidity() == false) {//checkValidity()如果 input 元素中的数据是合法的返回 true，否则返回 false。
   document.getElementById("demo").innerHTML = demo.validationMessage;//validationMessage:浏览器提示错误信息
        }

25.let和const

let：let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

const：const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后的值不可再修改，const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象属性或者数组是可变的

const不能对常量对象/数组重新赋值，但是可以对常量数组进行修改

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

const 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

26.id定位：

< a href="#pos">点我定位到指定位置!</a>

< p id="pos">尾部定位点</p>

27.异步编程

：setTimeout(第一个参数是个回调函数(箭头函数），第二个参数是毫秒数)

回调函数：
setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
箭头函数：
setTimeout(()=> {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);

28.函数自调用

：表达式后面紧跟 () ，则会自动调用

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

29.函数显式参数在函数定义时列出。函数隐式参数在函数调用时传递给函数真正的值。

函数可以自带参数

<script>
function myFunction(x, y = 10) {
    // 如果不传入参数 y ，则其默认值为 10
    return x + y;
}
// 输出 2
document.getElementById("demo1").innerHTML = myFunction(0, 2) ;
// 输出 15, y 参数的默认值
document.getElementById("demo2").innerHTML = myFunction(5);
</script>

30.arguments:通过索引引用参数的类数组对象

arguments：类似于数组，arguments对象是所有函数中可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，具有 length 属性，可以进行遍历。

如果一个函数传递了三个参数，你可以以如下方式引用他们：

arguments[0]
arguments[1]
arguments[2]

31.闭包：

32.constructor()：类的构造函数

类：类是用于创建对象的模板。使用 class 关键字来创建类，类体在一对大括号 {} 中， {} 中定义类成员的位置，如方法或构造函数。

每个类中包含了一个特殊的方法 constructor()，即类的构造器，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。使用前没有声明会报错

<script>
  class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}//创建了一个名为Runoob的类，初始化了name和url两个属性
let site = new Runoob("菜鸟教程",  "http://www.runoob.com");//定义好类之后使用new创建对象
document.getElementById("demo").innerHTML =
site.name + "：" + site.url;//对象可以使用类中初始化的属性
</script>

构造方法是一种特殊的方法：

• 构造方法名为 constructor()。

• 构造方法在创建新对象时会自动执行。

• 构造方法用于初始化对象属性。

• 如果不定义构造方法，JavaScript 会自动添加一个空的构造方法。

类声明和类表达式的主体都执行在严格模式下，不能使用没有声明的变量

33.super类继承

类继承：类继承使用extends关键字，super（）方法调用父类的构造函数，

// 基类
class Animal {
    // eat() 函数
    // sleep() 函数
};
 
 
//派生类
class Dog extends Animal {
    // bark() 函数
};

super() 方法引用父类的构造方法。
通过在构造方法中调用 super() 方法，我们调用了父类的构造方法，这样就可以访问父类的属性和方法
class Runoob extends Site {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

setter和getter

setter和getter：getter是获取属性的方法，setter是设置属性的方法。

class Runoob {
  constructor(name) {
    this.sitename = name;
  }
  get s_name() {
    return this.sitename;
  }
  set s_name(x) {
    this.sitename = x;
  }
}
 
let noob = new Runoob("菜鸟教程");
 
document.getElementById("demo").innerHTML = noob.s_name;

静态方法

静态方法：静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过 类名.方法名 调用静态方法。静态方法不能在对象上调用，只能在类中调用。实例对象调用静态方法会报错

，如果你想在实例对象 中使用静态方法，可以将实例对象作为一个参数传递给静态方法

DOM（文档对象模型）

通过HTML DOM ，可以访问 JS HTML的所有元素。使用js必须首先获取HTML

1.查找HTML元素方法：

（1）通过元素的id查询。

document.getElementById("demo").innerHTML=

（2）通过标签名查找。

例子：查找 div 的 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素

<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法：document.getElementsByTagName(指定标签)//可返回带有指定标签名的对象的集合
常用：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);

（3）通过类名查找

<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>

getElementsByClassName() ：获取所有指定类名的元素，getElementsByClassName() 方法返回文档中所有指定类名的元素集合，

NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

语法：document.getElementsByClassName(*classname*)//获取所有指定类名的元素

2.DOM可以改变HTML的内容

（1）在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<script>
document.write(Date());
</script>

（2）修改 HTML 内容的最简单的方法是使用 innerHTML 属性

document.getElementById(id).innerHTML=新的 HTML

（3）如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).属性=新属性值

（4）DOM可以改变HTML的样式，如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(*id*).style.样式类型=新样式

4.onchange：常结合队输入字段的验证使用

当用户改变输入字段的内容时，使用onchange事件

当元素的值发生改变时，会发生 onchange 事件。当用户更改 <select> 元素的所选选项时执行 JavaScript：

<select id="mySelect" οnchange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>
<script>
<p>当您选择一辆新车时，会触发一个函数，输出所选汽车的值。</p>
<p id="demo"></p>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

5.onmouseover和onmouseout用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmouseover事件：指鼠标移动到某个指点的HTML标签上，会出现什么效果。

onmouseout事件：指鼠标移出某个指点的HTML标签后，会出现什么效果。

鼠标事件：

1.onmousedown:当点击鼠标按钮触发事件

2.onmouseup ：释放鼠标按钮触发事件

3.onload：当页面完成加载时，显示一个提示框。

4.onfocus：当输入字段获得焦点时，改变其背景色。

6.事件监听/添加事件：使用addEventListener（）方法在按钮中添加点击事件

<button id="anniu">点我</button>
<p id="demo"></p>
<script>
document.getElementByld("anniu").addEventListener("click",函数名）
function 函数方法()
    document.getElementById("demo").innerHTML=想要实现的效果的方法
}

addEventListener() 方法可以更简单的控制事件（冒泡与捕获），你可以使用 removeEventListener() 方法来移除事件的监听。

removeEventListener() 方法移除事件监听

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

document.getElementById("anniu").removeEventListener("mousemove", myFunction);

onclick和click的区别：onclick只能添加一个事件，click可以添加多个事件

添加事件的语法：

document.getElementByld("需要监听的元素").addEventListener(*event, function, useCapture*);
​
第一个参数是事件的类型 (如 "click" 或 "mousedown").
​
第二个参数是事件触发后调用的函数。
​
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

用户重置窗口大小时添加事件监听：resize 事件是在浏览器窗口被重置时触发的。Math.random()：生成随机数

<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

7.事件传递：冒泡与捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, true/flase);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

8.DOM 节点

(1)appendChild()添加节点（添加新元素到尾部）

node.appendChild(node*)：node是需要添加的节点对象

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

你可以使用 appendChild() 方法把元素移到到另外一个元素。

document.getElementById("要移到的地方").appendChild(node);

（2）添加新元素到尾部：insertBefore（）

（3)移除已存在的节点：removeChild（）方法

（4）replaceChild() 方法来替换 HTML DOM 中的元素。

9.DOM集合(Collection)

（1）在 HTML DOM中, 所有的都是 节点：

• 文档是文档节点

• 所有 HTML 元素是元素节点

• 所有 HTML 属性都是属性节点

• 插入到 HTML 元素中的文本为文本节点

• 注释是注释节点

（2）getElementsByTagName() 方法返回 HTMLCollection 对象。

（3） length 属性定义了集合中元素的数量。例：myCollection.length

（4)HTMLCollection 不是一个数组！HTMLCollection 看起来可能是一个数组，但其实不是,你可以像数组一样，使用索引来获取元素。

DOM框架：

1.触发监听事件：addEventListener( )

document.getElementById("按钮").addEventListener("click",想要实现的函数方法)

可以添加多个事件话柄。

2.移除事件监听：removeEventListener() 方法

removeEventListener( )移除由 addEventListener() 方法添加的事件句柄

3.冒泡和捕获：

在冒泡中，先触发内部元素再触发外部元素。在捕获中，先触发内部元素再触发内部元素的事件

addEventListener() 方法可以指定参数来设置传递类型：addEventListener(event, function, flase/true);

默认值为flase，为冒泡传递，当值为true时，为捕获传递

4.DOM节点：如何添加或移除元素（节点）：创建新的元素节点：

(1).添加新元素到尾部：appendChild( )

appendChild() 方法向节点添加最后一个子节点，也可以从一个元素向另一个元素中移动元素。

方法：先创建一个元素，然后再已存在的元素中添加他

创建元素节点：createElement（） 创建文本节点:creatTextNode（）

(2.)添加新元素到开始部分：insert Before（ ）方法

先创建一个节点，把新的内容添加到节点上，然后定义成出需要添加新节点的节点，然后使用insertBefore（ ）

例如：insertBefore(para,child) para是要添加的新新节点，child是需要被添加的节点

(3).移除已存在的父元素：removeChild（ ）

(4).替换的元素： replaceChild() 方法 replaceChild（替换的元素，要被替换的元素）

5.DOM集合：

HTMLCollection 是 HTML 元素的集合。

HTMLCollection 对象类似一个包含 HTML 元素的数组列表。HTMLCollection 不是一个数组！，但是可以像数组一样使用索引来获取元素。

getElementsByTagName() 方法返回 HTMLCollection 对象，集合中的元素可以通过索引(以 0 为起始位置)来访问。

例如：获取文档所有的 <p> 元素

var x = document.getElementsByTagName("p");
​
集合中的元素可以通过索引(以 0 为起始位置)来访问。访问第二个 <p> 元素可以是以下代码:
​
y = x[1];

HTMLCollection 对象的 length 属性定义了集合中元素的数量

6.DOM节点列表：NodeList 对象是一个从文档中获取的节点列表 (集合) 。节点列表不是一个数组！，但通过索引来获取元素。

var myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。

NodeList 对象 length 属性定义了节点列表中元素的数量，可以用来显示节点列表的元素个数，length 属性常用于遍历节点列表。

7.HTMLCollection 与 NodeList 的区别

• HTMLCollection 是 HTML 元素的集合。

• NodeList 是一个文档节点的集合。

• NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

• NodeList 与 HTMLCollection 都有 length 属性。

• HTMLCollection 元素可以通过 name，id 或索引来获取。

• NodeList 只能通过索引来获取。

• 只有 NodeList 对象有包含属性节点和文本节点。

js高级教程：

1.js对象

（1）创建js对象：

使用Object定义并创建对象实例，

var person=new Object();
​
person.属性=“ ”

（2）函数changeName() 可以改变属性值

（3）for...in 语句循环遍历对象的属性

for(x in 需要循环遍历的对象)

2.原型对象(prototype)：prototype继承

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性

3.构造函数（constructor）

（1）构造函数是什么？将对象的共同属性当作构造函数的参数传递进去，创建函数以后，通过new关键字调用，这就是通过构造函数来创建对象。

对于已存在构造器的对象是不能添加新的属性的，添加新的属性需要在在构造器函数中添加

（2）给对象的构造函数添加新的属性和方法（使用prototype继承）：

• 在构造器函数中添加

• 使用prototype给对象的构造函数添加新的属性 函数名.prototype.属性=‘ ’

• 使用prototype给对象的构造函数添加新的方法 函数名.prototype.方法名（）{ return }

4.Number对象：

1.极大或者极小的数字可以通过科学计数法来写

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

2.在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型，采用64 位浮点格式表示数字

3.进制转换：这个函数只能将十进制数字转换为任意进制的字符串形式，同样，radix表示进制，取值2~36

进制转换：Number.toString(radix)：将十进制数字转换为任意进制的字符串形式，同样，radix表示进制，取值2~36

4.如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

实例

var y = 0377;   八进制
var z = 0xFF;   十六进制

5.无穷大：Infinity 负无穷大：-Infinity

6.NaN:非数字值，用于指示某个值不是数字

使用 isNaN() 全局函数来判断一个值是否是 NaN 值

7.数字初始化：var x=123; //x是一个数字

数字对象初始化：vay y=new Number(123); //y是一个对象

5.字符串（String) 对象：

1.indexOf()在字符串中查找字符串：

使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置，如果没找到对应的字符函数返回-1

lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

2.match()函数内容匹配：

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符，找不到就返回null

3.replace() 替换内容：

replace()方法在字符串中用某些字符替换另一些字符

4.大小写转换： toUpperCase() /toLowerCase()

字符串大小写转换使用函数 toUpperCase() / toLowerCase()

5.字符串使用split()函数转为数组

txt="a,b,c,d,e"   // String
txt.split(",");   // 使用逗号分隔
txt.split(" ");   // 使用空格分隔
txt.split("|");   // 使用竖线分隔 

6.charAt() 方法用于返回指定索引处的字符。索引范围为从 0 到 length() - 1。

例：

 String s = "www.runoob.com";
        char result = s.charAt(6);
        System.out.println(result);

数组：所有的JavaScript变量都是对象。数组元素是对象。函数是对象。数组中有不同的变量类型,包含对象元素、函数、数组

创建Boolean对象：var myBoolean=new Boolean();

如果布尔对象无初始值或为0，-0，null，“”（空字符串），flase,undefined,NaN,那么对象为flase，否则为true。

0为false，1为true

6.Math（算数）对象：

1.获取随机数：Math.random()

2.获取两个给定的数中的较大的数：Math.max(5,10)

3.返回两个数中较小的数：Math.min(5,10)

7.正则（RegExp）对象：（RegExp：正则表达式）

1.修饰符:

/ / i：修饰符用于执行不区分大小写的匹配

/ / g：修饰符是用于执行全文的搜索

//i-修饰符用于执行不区分大小写的匹配
var str = "Visit RUnoob";
var patt1 = /runoob/i;

//g-修饰符用于执行全文的搜素（找到全文所有的匹配）
var str="Is this all there is?";
var patt1=/is/g;

//全文查找和不区分大小写搜索 "is"
var str="Is this all there is?";
var patt1=/is/gi;

2.test()方法搜索字符串指定的值，根据结果并返回真或假。

3.当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）

var re = new RegExp("\\w+");

4.exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

BOM（浏览器对象模型）：

1.window

（1）确定window尺寸，显示浏览器高度或宽度

（2）开关窗口，移动窗口或调整窗口尺寸

• window.open() - 打开新窗口

• window.close() - 关闭当前窗口

• window.moveTo() - 移动当前窗口

• window.resizeTo() - 调整当前窗口的尺寸

2.Window Screen（有关用户屏幕的信息）

（1）screen.availWidth 属性返回访问者屏幕的宽度

（2）screen.availHeight 属性返回访问者屏幕的高度

3.Window Location：页面地址的返回以及加载新的文档

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

（1）location.href 属性返回当前页面的 URL

（2）location.pathname 属性返回 URL 的路径名。

（3）location.assign() 方法加载新的文档。

4.Window History：浏览器的历史，可用来加载前一个URL或后一个URL

（1）history.back() 方法加载历史列表中的前一个 URL

（2）history forward() 方法加载历史列表中的下一个 URL。

6.Window Navigator：有关访问者浏览器的信息（名称/版本等）

7.弹窗：警告框alert()、确认框confirm()、提示框promrt()

（1）警告框：window.alert()

（2）确认框：window.confirm()

确认框通常用于验证是否接受用户操作

（3）提示框：window.prompt()

（4）弹窗设置换行：弹窗使用 \n 来设置换行。

8.计时事件：

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

使用计时事件的关键方法：

（1）setInterval()设置间隔，间隔指定的毫秒数不停地执行指定的代码。clearInterval() 方法用于停止 setInterval() 方法执行的函数代码

（2）setTimeout() - 在指定的毫秒数后执行指定代码。是异步函数。clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

9.BOM方法（部分）：

1.window.innerHeight：浏览器窗口的内部高度（包括滚动条）

window.innerWidth：浏览器窗口的内部宽度（包括滚动条）

2.window方法

• window.open() - 打开新窗口

• window.close() - 关闭当前窗口

• window.moveTo() - 移动当前窗口

• window.resizeTo() - 调整当前窗口的尺寸

3.screen.availWidth 属性返回访问者屏幕的宽度。screen.availWidth 属性返回访问者屏幕的宽度

4.location.href 属性返回当前页面的 URL，即网页链接

10.Cookie：用于存储web页面的用户信息。

1.Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。

• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

2.JavaScript 使用 document.cookie 属性来创建 、读取、及删除 cookie

document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

异步编程（setTimeout函数：第一个参数是回调函数）：

1.程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

2.异步操作函数需要通过回调函数实现异步任务的结果处理

3.异步编程就是子线程与主线程分离开，启动异步任务，给子线程一个任务，让其自动调用，同时不影响主线程的任务

4.setTimeout函数是异步函数，他的第一个参数是回调函数，第二个参数是毫秒数

本地存储：

1.本地存储（localStorage ）：刷新页面不会丢失数据

数组对象格式：var todolist=[{title:'xxx',done:flase}，{title:'xxx’，done：flase}]，格式是数组，不可以直接

title用户在文本框里输入的内容，done正在进行还是已经完成，默认为flase

注意：1.本地存储localStorage只能存储字符串格式，因此需要把数组对象转化为字符串格式：JSON.stringify（data）

localStorage.setItem("todo"，JSON.stringify(todolist)) "todo":是存储到本地存储时为数组对象命名的名字

JSON：键值对格式（key:value）

调用本地存储的时候需要使用数组对象，但是本地存储的为字符串，因此需要把数组对象转化为字符串格式：JSON.parse（data）

##

1、把数据添加到本地存储中，保存本地储存数据

2.把本地储存数据渲染到网页页面上，记得打开页面自动渲染

1. 遍历之前要先清空ol里的元素内容

2. 给连接自定义属性记录当前索引号，利用splice（i，1）方法，修改后要重新存储