1小时0基础带你 Javascript入门建议收藏~

最新推荐文章于 2023-08-06 08:23:15 发布

贪吃ღ大魔王

最新推荐文章于 2023-08-06 08:23:15 发布

阅读量852

点赞数 35

分类专栏：新星计划 javascript 总结文章标签：新星计划 javascript

本文链接：https://blog.csdn.net/weixin_44070254/article/details/117308093

版权

javascript 同时被 3 个专栏收录

23 篇文章 7 订阅

订阅专栏

新星计划

21 篇文章 1 订阅

订阅专栏

总结

15 篇文章 1 订阅

订阅专栏

javaScript

1、背景介绍

为了提高网速而由网景公司的布兰登·艾奇来解决，他用10个工作日设计了js

1、`js`标准

ECMAScript是一个标准，而JavaScript是语言

2、`js`的基础概念

1、什么是`js`

一个支持面向对象的、跨平台的、脚本语言，依赖与html才能实现。

2、应用场景：

表单验证：规范用户输入数据，和后台数据进行交互 2. 网页特效：给页面内容加行为，让页面动起来 3. 游戏开发：飞机大战、打砖块
js的组成示意图
物联网：https://zhuanlan.zhihu.com/p/45509947
h5，是html的下一个版本，很强大，就目前而言，我们知道的h5只是一些标签，并不能完美的展示出他的强大之处，加入js后，才能激活这些标签深层次的功能。

3、`js`的组成

ECMAScript：核心

BOM：文档对象模型，提供了访问和操作网页类容的方法和接口

DOM：浏览器对象模型，提供了与浏览器交互的方法和接口

3、`js`的基础使用

1、`js`的写入位置

1、标签：script

<body>

<script>
//js代码的书写位置（建议）
</script><-这是表示结束的标签，不能乱写，除了用转译 符->
<noscript>
<p>本页面需要浏览器支持（启用）JavaScript。</p>
</noscript>  
</body>

传统的标准是写在head里面
实际上style和script写在哪里都是可以的
现代的web是放在body里面
但是出现了require.js后都大部分写在head里面，实现异步加载以及依赖关系处理
6个属性：⭐
- async:（可选）表示不影响其他操作立即下载脚本（异步操作）（填写布尔）
- charset(可选) 表示通过src属性指定的代码的字符集。大多浏览器忽略了
- defer:(可选) 表示延迟到文档全部解析完显示后执行(属性==属性值)
- src(可选) 表引入的js文件地址
- type:(可选) 可以看出是language属性，即脚本语言属性。

异步脚本一定会在页面的load事件之前执行，但可能在事件触发前后执行

实现XHTML的识别

<script>
    //<![CDATA[
        
    //]]>
</script>

2、引入`js`文件

软件使用外部文件，方便维护，缓存加载快，未来趋势

<script src="main.js"></script>

3、注释

//js的一行注释
/*
	js的多行注释
*/

2、严格模式

在js代码顶部添加“user strict”

或者在函数内部的顶部添加

function (){
    "user strict";
    //函数体
}

在严格模式下，ECMAScript3中的一些不确定就会得到处理，对某些不安全的操作抛出错误

不能匿名生产变量，函数没有this指向，不允许删除变量或对象，不允许删除函数，形参不能从重名

3、`js`的输出

文档对象熟成

document.write("hollo world");
//输出标签元素类容
document.write("<b>文字加粗</b>")；
document.write("<i>")；
document.write("文字倾斜")；
document.write("</i>")；

弹窗的形式显示
```
alert("hollo world");
```
弹出判断框显示
```
confirm("are you sure");
```
弹出输入框显示
```
prompt("hollo world");
```
调试窗口输出
```
console.log("hollo world");
```

4、变量的定义

ECMAScript的变量是松散类型的

1、var定义变量

var x;//var关键字后面是表示符或变量名。
/*表示符的规则：字母、数字、下划线组成，
    不能用数字开头---驼峰命名法
    不能与关键字和保留字冲突
*/

var a=12；//赋值
console.log(a);

 var a,b;//一次定义多个变量  声明
 var c=1,b=2;

 e= 13;//隐式声明
 console.log(e);

2、let定义

let a=12;//只能在所在的范围域内使用

3、常量定义

const a=1;

5、变量的类型

数字类型：var num=1;
字符串类型：var str="hollo world";
布尔类型：var t="true",f="false";
未定义类型：var under="undefined";
空对象类型：null;
对象类型：
特殊形式：function,这个特殊的类型
```
var arr=[1,2,3];
var age=12;
var obj={
    name:"obj",
    sex:"男",
    age
}
```
得注意的是：数组和对象都是对象类型的

前5个为简单类型或者是基础类型，后一个为复杂类型又叫引用类型。

误区：null==undefined返回的是true，但这两个完全不一样。
查看数据类型：console.log(typeof 表示符) typeof是一个操作符不是函数

1、Boolean类型

操作符：Boolean

数据类型	转换为true值	转换为false值
Boolean	true	false
Sreing	任何字符串	”“(空字符串)
Number	任何非零数值	0和NaN
Object	任何对象	null
Undefined	n/a	undefined

2、Number类型

1、进制

var a = 0b10；//二进制 
var a = 010;//八进制
var b = 0xA；//16进制
var c = 0xb；//小写字母或大写字母都可以，也为16进制
    console.log(a); //8
    console.log(b); //10
    console.log(c); //b

2、科学计数法

var num = 5e+5;  //5乘以10的5次方 （变大）
var num = 3e-3;//3乘以10的-3次方（小数）

3、浮点精度丢失

这是基于IEEE754数值的浮点计算的通病

var a=0.1+0.2;console.log(a);//结果为0.30000000000000004
var b=(0.1*10+0.2*10)/10;console.log(b);//解决精度丢失

4、范围

[5e-324，1.797e+0]超过就是-Infinity(负无穷)和Infinity(正无穷)

无穷是无法进行计算的

5、`NaN`

例：

var a = 1;
var b = '二';
var c = a - b;
console.log(c); // NaN   不是一个数字
console.log(typeof c); // NaN: not a number  不是一个数字

在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN

NaN的注意事项：

NaN的类型是number类型的，表示一个非数字
NaN不等于任何值，包括NaN本身
通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字

6、`NaN`的运用

var a = 123; 
var b = "abc"; 
console.log(isNaN(a)); // false 
console.log(isNaN(b)); // true 
console.log(isNaN(c)); // true

isNaN()函数用与检测数据是否为非数字类型

7、转换

操作符：Number

3、字符类型

1、转义字符

console.log("\"");
/*
单引号不能包单引号，只能包双引号，就是自己不能包自己。
 实在不行用反斜杠\转义字符（\）
 */

符号	意义
\n	换行
\t	制表符
\b	空格
\	斜杠
‘’	单引号
‘	双引号

2、字符拼接

var lang="Java";lang+="Script";console.log(lang);
var lang="num";lang+=1;console.log(lang);

3、`toString()`

除了null和undefined其他类型都可以使用toString转换成字符串

但对象转字符串输出为[object Object]

var str=true.toString();

特殊运用

十进制转其他进制，输出结果为字符串

let num=10;
console.log(num.toString());//"10"
console.log(num.toString(2));//"1010"
console.log(num.toString(8));//"12"
console.log(num.toString(10));//"10"
console.log(num.toString(16));//"a"

4、`String()`

和toString()概念相同，用法不同

var str=String(true);

5、模板字符串

let a=97;
let str=`a=${a}`;
console.log(str);//a=97;
//不仅如此，还能将空格输出
console.log(`a       b`);//a      b

4、object类型⭐⭐

1、概念⭐⭐⭐

ECMAScript中的对象其实就是数据和功能的集合，凡是new出来的变量类型都是对象。

2、对象的创建

let obj=new Object();//不建议省略括号
let arr=new Array();//创建一个数组对象

3、属性和方法⭐

每一个object类型的数据都具有一下的属性和方法(宿主对象DOM&BOM除外)

constructor：保留着用于创建当前对象的函数，即构造函数(constructor)就是Object()；
hasOwnProperty(propertyName)：用于检测给的的属性在当前的实例中是否存在，作为参数的属性名(propertyName)必须以字符串形式指定，如obj.hasOwnProperty("name")
isPrototypeOf(object)：用于检测传入的对象是否是当前的原型
propertyIsEnumerable(propertyName)：用于检测给定的属性是否能够使用for-in语句来枚举
toLocaleString()：返回对象的字符串表示；
toString()：返回对象的字符串表示；
valueOf()：返回对象的字符串、数值或布尔值显示❓❓❓

5、6都是输出[object Object]

6、取整保留

1、`parseInt`取整关键词

1.1、小数取整

var a=89/5;
c=parseInt(a);//c=a的取整

1.2、取字符串最前面的数

正常情况

var a="123abc"
var c=parseInt(a);//c=a前面的数

特殊情况

var a="a12a12"
var c=parseInt(a);//c=NaN

2、`parseFloat`取浮点

var a="3.14";
var b=parseFloat(a);

效果不明显。

3、取小数后几位`toFixed`(位数)：

var a=3.141592453589;
var c=a;
console.log(c.toFixed(2))
//既保留两位小数
//输出的结果为字符串
//输出的是字符串

7、运算操作符

1、赋值“=”

var a=1;
a=10;console.log(a);

2、四则运算：

+ - * / ++ -- += -= *= /=

特殊使用

var str="10.1";
str=+str;console.log(str);//此时将str转换成Number类型，减号也能这样使用；

除+外，其他的均可将包含有效数字字符串转换成数字类型

3、字符运算(字符串的拼接)

var a="hollo",b="world",c=a+b;console.log(c);//holloworld
var a="a的值=",b=1,c=a+b;console.log(c);//a的值=1

4、比较运算(关系运算)

> < >= <= == ===

三元运算：a>b?a:b

== （判断值是否相对，不判断也不管是不是同类型）

=== (先判断是否同类型，再判断值是否相等)

var a=12,b="12";
console.log(a==b,a===b)//true false

5、逻辑运算

& | ! ~ && ||

按位非

var num1=25;
var num2=~num1;
console.log(num2);//-26

按位与

var result=25&3;console.log(result);//1

按位或

var res=25|3;console.log(res);//27

按位异

var res=25^3;console.log(res);//26

左移

var oldValue=2;//二进制的10
var newValue=oldValue << 5;//二进制的1000000，十进制的64；

有符号的右移动

var oldValue=64;//二进制的1000000
var newValue=oldValue >> 5;//二进制的10，十进制的2；

无符号的右移动

var oldValue=64;//二进制的1000000
var newValue=oldValue >>> 5;//二进制的10，十进制的2；
var oldValue=-64;
var newValue=oldValue >> 5;

短路操作⭐⭐

var res=true&&false;console.log(res);
var res=true||false;console.log(res);

可以用来解决兼容问题

8、语句

1、`if-else`语句:略

2、`do-while`语句

var  i = 0;
do{
    i += 2;
}while(i<10);
console.log(i);

3、`while`语句

var i=0;
while(i<10){
    i+=2;
}

4、`for`语句

for(var i=0;i<5;i++){console.log(i);}
for(let i=0;i<5;i++){
    for(let j=0;j<4;j++){
        console.log(i+j);
    }
}
for(;;){console.log("hollo world")}//无限循环
//注意，for里的参数可以提出去，但要在里面加判断条件使循环停止

5、`for-in`语句

用来枚举遍历对象类型的数据的迭代语句

for(let i in arr){console.log(i,arr[i])};
for(let key in obj){console.log(key,obj[key])};

注：不能对null和undefined使用

6、`label`语句

使用label语句可以在代码中添加标签，以便将来使用

start:for(var i=0;i<count;i++){console.log(i);};

7、`break`和`continue`语句

break是结束当前的语句，后面的语句将不再执行；
continue是跳过某个执行步骤，然后执行下一步代码；
outermost在双for循环中，里面的跳过外面的循环;(没用过)

8、`with`语句⭐

var qs=location.search,substring(1);
var hostName=localtion.hostname;
var url=localion.href;
//使用with语句，将localtion提出来公用
with(location){
    var qs=search,substring(1);
    var hostName=hostname;
    var url=href; 
}

9、`switch`语句

let num=2;
switch(num){//这个参数可以是字符串，或者是true。
	case num=1:
        console.log(num);
    break;
    case num=2:
        console.log(num);
    break;
    case num=3:
        console.log(num);
	break;
}

注：switch具有穿透的性质，没有break的话会从上往下，只要符合case条件便执行

可以合理使用这个性质

10、函数

function fn(){
    console.log("hollo world");
}
fn();
//解构赋值+默认值的函数调用
function add(num,{a,b},[c,d],e=15){
    console.log(num+a+b+c+d+e);
    //返回结果是return
    return num+a+b+c+d+e；
    //return 后面的所有代码都不再执行。函数结束
}
console.log(add(1,{a:2,b:3},[4,5])+15);//30 45
//匿名函数即调用
(function(){})();
function(){}();
var fn=function(){};
div.onclick=function(){};
~function(){}();//看不懂的神奇的调用，真的能用哦

/*****箭头函数*****/
let fn=()=>{};fn();
let fn=res=>console.log(res);fn(20);//单个参数或单条函数体不需要括号
let fn=(a,b)=>a+b;console.log(fn(1,2));//直接返回a+b

/*****函数默认值****/
let fn=(a,b=10)=>a+b;console.log(fn(1));

注：可以通过arguments对象来访问一个函数的参数数组，

一个函数可以多次赋值，多次调用，没有重载

11、`for-of`语句

和for-in的使用和效果是一样的，但是不能遍历对象，能对数组使用

12、try-catch语句

先执行try中的内容，如果try中内容发生了错误，再执行catch中的内容。

try {
    adddlert("欢迎光临！");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}

4、量,域,内存

1、量的引用

只能给引用类型添加属性，给基础类型添加不上
当复制或保存一个变量时，操作的是对象的引用，但添加属性或方法时，操作的是实际的对象。
函数不能按引用访问，只能按值访问（对象特例）
函数的参数是函数的局部变量

函数传参对象

let obj=new Object({a:1,b:2});
//情况一
function fn({a,b}){
    a+=2,b+=3;
    return {a,b};
    //填不添加return，研究的效果一样
}
fn(obj);
console.log(obj);
//此时的obj没有改变，这是解构赋值，函数按值访问

//情况二
function fn1(obj){
    obj.a=5;
}
fn1(obj);
console.log(obj);
//此时的obj发生改变，这里是按引用访问

//情况三
function fn2(obj){
    obj.a=3;
    obj=new Object();
    //当函数里的参数重新创建一个对象的时候，就变成了局部变量，不再是与外面的对象公用一个对象引用地址。且这个对象在函数执行完毕后自动销毁⭐⭐⭐⭐⭐
    obj.name='jack';
}
fn(obj);
console.log(obj);
//此时的obj的a属性发生变化，但没有添加name属性

2、数据类型检测:

typeof：略
instanceof：检测数据是否是指定的类型
```
console.log("231" instanceof Array);//false
```
注：所有的引用类型数据都是Object的实例
console.dir(元素)：返回元素的全部详细信息

3、环境及作用域

执行环境(环境—execution context):

window对象被认为是全局执行环境,(top对象始终指向window对象,两者完全相等)
一个函数体内也是一个执行环境
一个环境内的代码执行完毕后，环境被销毁，变量也被销毁，window对象的全局执行环境是在浏览器关闭时销毁
作用域链及活动对象
```
let color="blue";//创建全局变量
function fn(){
    if(color==="blue"){color="red";}
    else{color="blue";}
}
fn();
console.log(color);
```
这里的函数被无参调用，但里面要用到color变量，可是函数内部的执行环境里没有color这个变量，便会向上一级寻找，直到全局执行环境中，如果全局环境中也没有，就会报错。
```
function fn(){
    var color="red";
    if(color==="blue"){color="red";}
    else{color="blue";}
}
fn();
console.log(color);
```
这时的函数执行环境里创建了一个color变量，但能在全局环境中进行使用(除了将变量return出去)，所有在全局中无法输出这个color变量，且这个color变量在函数执行完后就被销毁掉了。
延迟作用域链🌙

原理是因为有些语句在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除。
- try-catch语体的catch块
- with语句
？？？
没有块级作用域

就是if和for语体里var出来的变量可以在全局使用，函数就不行

4、垃圾收集

1、简介

javaScript具有自动垃圾收集机制。

原理：找出那些不再继续使用的变量，然后释放其占用的内存，是有时间间隔的，具有周期性。

方式一：标记清除
方式二：应用计数

性能问题：IE浏览器的垃圾收集周期短，导致垃圾收集频繁，这是IE6因此名声狼藉的性能原型。IE7重写了垃圾收集机制。

2、使用

调用window.CollectGarbage()方法会立即执行垃圾收集

3、管理

解除引用：一旦数据不再用于，最好通过将其值设置为null来释放其引用。

作用：便于垃圾回收机制下次将它清除

5、引用类型(方法合集）

常被称为类或对象定义，但和类不是同一个概念

由于官方中的介绍比较啰嗦，直接上干货

类型检测在第四章哦

1、`Object`类型

1、实例

var person = new Object();
var person = {
    name:'jack',
    age:20,
    eat:function(){
        console.log('吃不起');
    },
};

2、属性和方法

var age=20;
person.age;//比较特殊

person.name='jack';
person.eat=function(){
    console.log('能吃')；
}
//属性和方法是覆盖式写入，即修改重新设置
//新添加式属性名或方法名不能重复

delete person.age//删除一个属性
//没有length属性读取长度哦⭐⭐⭐

3、属性的读取

console.log(person);
person.eat();//调用一个属性的方法

var str='name';
var nume=person.name;
var userName=person['name'];
var theName=person[str];
//这三个变量存储的式同样的数据

4、对象转换数组

1、属性名生成数组：

Object.keys(person)

2、属性值生成数组：

Object.valuse(person)

5、遍历

遍历可以使用for in遍历法遍历

for in遍历法

for(let i in obj){
    console.log(obj[i])
}
//此时的每个i存储的obj的每个属性的字符串

6、`JSON`转换

只要是Object实例出来的都可以使用

let str=JSON.stringify(obj)对象转字符串
let obj=JSON.pares(str)字符串转对象

7、解构赋值⭐

var {a,b,c=3}={a:2,b:3};
console.log(a,b,c);
//或者
const a=1;
const obj={a,b:2,c:5};
cobsole.log(obj);

8、展开合并

let obj={a:1,b:2};
let oaj={...obj,c:4,d:5};//展开obj
console.log(oaj);

2、`Array`类型

1、实例

let arr=new Array();
let arr=[];
//注意，如果Array()里只有一个值，则是定义这个数组的长度为这个值
let arr=[1,2,3];
let arr=new Array(1,'hollo world',{name:'jack'});
let arr=[1,'hollo world',{name:'jack'}];

2、数组的读取

console.log(arr);
console.log(arr[0]);//数组第一个元素的下标是0
console.log

3、数组的长度

let len=arr.length;//使用length属性获取长度
//数组长度设置小于原长度，将会删除差个数的元素数据，大于原长度，会添加undefined补充

4、数组的方法

array.splice(第几位开始,删除个数[,替换内容1,替换内容2,...]);
array.splice(1,2)

array.push(新元素);//从最后添加

```
array.pop();//从最后删除一个
```

array.unshift(新元素)//从头添加

```
array.shift();//从头删除一个
```

array.sort();//元素按ascill码从小到大排序

array.sort(function(a,b){return a-b});
//元素按值从小到大排序

array.sort(function(a,b){return b-a});
//元素按值从大到小排序

```
array.reverse();//将array反序
```

array.concat(另个数组);//将另个数组拼接到array后面

array.join('字符');//将元素间添加'字符'，返回字符串

array.toString();//将数组转字符串

array.slice(第几位开始,第几位结束);
//指定位置读取，含开始位置，不含结束位置

array.indexOf(元素);
//从头查找元素第一次出现位置下标，元素不存在反回-1；

array.lastIndexOf(元素);
//从尾查找元素第一次出现位置下标，元素不存在反回-1；

array.forEach(function(v,i,array){
    //函数体，
});
//参数1：元素；参数2：下标；参数3：当前数组；
//用于遍历数组

array.every(function(v,i,array){
    //判断函数体
});
//判断每个元素是否都满足判断条件，全满足反true，否则反false

array.some(function(v,i,array){
    //判断函数体
});
//判断每个元素是否都满足判断条件，有一个满足反true，全都否则反false

array.map(function(v,i,array){
    //函数体
});
//对数组的每个元素都进行改变，并生成一个新的数组，原数组不变

array.filter(function(v,i,array){
    //判断函数体
});
//筛选符合判断条件的元素，返回都一个新的数组，原数组不变

array.find(function(v,i,array){
    //判断函数体
});
//筛选符合判断条件的元素，找到返回第一个元素，找不到返回false

array.findindex(function(v,i,array){
    //判断函数体
});
//筛选符合判断条件的元素，找到返回第一个元素下标，找不到返回-1

array.include(v);//判断array是否含v，反布尔值

5、数组的遍历

可以使用for in遍历，使用forEach等方法遍历更简便

6、解构赋值

const [a,b,c,d=8,[e,f]]=[1,2,3,5,[6,8]];
console.log(a,b,c,d,e,f);

7、展开合并

arr=[1,2,3];
console.log(...arr);//1,2,3
//即将arr展开
fn(1,2,3);
let fn=(...arr)=>console.log(arr);//将数字合并成数组

3、Data时间类型

UTC国际协调时间

1、获取时间

即创建一个时间对象

let data= new Data();//获取当前时间
let data=new Data("2015-2-18");//获取指定日期
let data=new Data("2015-2-18 06:05:52");//获取指定时间日期
let data=new Data(1543499394644);//获取指定时间戳时间
let data=+new Data();//获取当前的时间戳

也可以通过创造的data对象获取指定的时间,这个方法不常用

data.parse("2015-2-18 06:05:52");//获取指定时间日期
data.UTC(1543499394644)//获取指定时间戳时间

2、处理时间

通过获取不同前后当前时间的时间差获取时间段

3、时间格式化

toDateString() —以特定于实现的格式显示星期几、月、日和年
toTimeString()—以特定于实现的格式显示时、分、秒和时区
toLocaleDateString()—以特定于地区的格式显示星期几、月、日和年
toLocaleTimeString()—以特定于实现的格式显示时、分、秒
toLocaleString()-–-以特定于实现的格式显示UTC日期

4、时间对象方法

1、获取时间是`get`开头

//都是返回值，时间戳就是毫秒数
data.getTime();//时间转毫秒数
data.setTime();//毫秒数转时间
data.getFullyear();//取4为年份
data.getUTCFullYeat();//年份转毫秒数,后面只要加UTC的都是获取UTC日期
data.getMonth()//;获取月，注意，返回值比当前月份小1
data.getDate();//获取日期🌙
data.getDay();//获取星期🌙
data.getHours();//获取小时
data.getMunutes();//获取分钟
data.getSecinds();//获取秒
data.getSeconds();//获取毫秒
//难以用到的
data.getMilliseconds();//日期中的毫秒数
data.getTimezoneOffset();//返回本地时间与UTC时间的分钟差

2、设置/修改时间是`set`开头

即将get换成set,方法从返回值变成设置值

5、时间本地化

let allTime=data.toLocalString();//全部本地化
let dateTime=data.toLocalDateString();//只本地化日期
let Time=data.toLocalTimeString();//只本地化时间

4、`RegExp`正则类型

1、正则表达式书写

let reg=/正则体/[标志];
let reg=/at/g;
let reg=new RegExp(/at/i);

2、标志

g：全局模式，模式应用于被查字符串的所有字符，且发现就返回第一个
i：不分大小写
m：多行模式

可以一起写

let reg=/at/gi

3、正则元字符

匹配数字：\d
匹配任意非数字的字符：\D
匹配字母或数字或下划线：\w
匹配任意不是字母，数字，下划线：\W
匹配任意的空白符：\s
匹配任意不是空白符的字符[^备注1]：\S
匹配除换行符以外的任意单个字符：.
表示匹配行首的文本(以谁开始)[^备注2]：
表示匹配行尾的文本(以谁结束)[^备注3]：$

4、正则限定符

重复零次或更多次：*
重复一次或更多次：+
重复零次或一次：?
重复n-1次：{n}
重复n次或更多次：{n,}
重复n到m-1次：{n,m}

5、正则其它

字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思：[]
匹配除中括号以内的内容：[^]
转义符：\
或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱：| 例：let reg=/(男|女)/;
从两个直接量中选择一个，分组[^备注4]：()
匹配汉字：[\u4e00-\u9fa5]
小括号()：匹配小括号内的字符串，可以是一个，也可以是多个，常跟“|”（或）符号搭配使用，是多选结构的

6、#正则使用⭐

匹配—正则表达式.test(字符串)；反布尔值
查找—字符串.search(正则)；筛选满足条件的部分，反下标，无结果反-1；
提取—字符串.match(正则)；提取满足条件的部分，反数组；
提取—正则.exec(字符串)；提取满足条件的第一个，反结果；
替换—字符串.replace(正则,新内容)；将符合正则的内容换成新内容

模糊查找—字符串.search(正则)；

var text='cat bat sat fat';
var pos=text.search(/at/);//返回at第一次出现的位置，无返回-1
console.log();//1
result=text.search(/.at/g,'word($1)');
console.log(result);//查找.at位置，替换从word(.at)
//word(cat),word(bat),word(sat),word(fat)

引用替换

var str = '8/1/2019';
var reg = /(\d)\/(\d)\/(\d+)/;
var res = str.replace(reg,"$3/$1/$2");
console.log(res);//2019/8/1

7、官方中补充

var text='this ha a short summer';
var pattern=/(.)hort/g;
if(patter.text(text)){
    console,log(RegExp.input);//this has been a short summer
    console,log(RegExp.leftContext);//this has been a
    console,log(RegExp.rightContext);//summer
    console,log(RegExp.lastMatch);//short
    console,log(RegExp.lastParen);//s
    console,log(RegExp.multiline);//false
}
/*
input返回原始字符串
leftContext返回结果左边的
rightContext返回结果右边的
lastMatch返回结果
lastParen返回小括号匹配捕获的
最后一个没得了😅
*/

5、函数类型

1、没有重载

就是函数重名覆盖。

2、一个坑

sum();
var sum=function (){
    console.log(1);
}
//报错，sum is not function
fn()
function fn(){
    console.log(2);
};
//此时不会报错

3、作为值的函数

ECMAScript中函数本身就是变量，说一函数也可以作为值来使用

4、函数内部属性

1、arguments属性，

没见过没用过、严格模式下还报错。递归的函数

function fn(n){
    if(n<1){
        return 1;
    }else{
        return n*fn(n-1);
    }
}
//进行改写
function fn(n){
    if(n<1){
        return 1;
    }else{
        return n*arguments*callee(n-1);
    }
}

解释是说这样改写能解除函数执行与函数名fn紧密的耦合关系

2、this属性

函数内指针的指向，默认指向window。

绑定事件时，一般情况下时指向此事件。但由事件函数触发的函数指向就不是此事件了。可以通过es6的call、apply、bind进行修改（跳转）

3、改变this指向

作用:都是改变this的指向,只是传参的形式不同

1、call方法

作用: 调用该函数,并修改函数中this的指向

参数详解:

第一个参数: 要让函数中this指向谁,就写谁

后面的参数: 被调用函数要传入的实参,以逗号分隔

2、apply 方法

作用: 调用该函数,并修改函数中this的指向

**语法: ** 函数名. apply(对象,数组);

参数详解:

第一个参数: 要让函数中this指向谁,就写谁

第二个参数: 要去传入一个数组,里面存放被调用函数需要的实参

3、bind方法

作用: 不调用函数,克隆一个新的函数,并修改新函数中this的指向,将新的函数返回

**语法: ** 函数名. bind(对象[,实参]);

参数详解:

第一个参数: 要让函数中this指向谁,就写谁

后面的参数: 被调用函数要传入的实参,以逗号分隔

3、prototype构造原型

函数名.prototype()访问函数原型

4、函数包装

代码外面套个未调用的有名函数，将需要的参数设置给这个有名参数，这段代码就封装完成。

5、解构赋值

function fn({a,b}){
    console.log(a,b,123);
}
fn({a:1,b:3});

6、boolean类型

6+、number类型

格式化数值的方法：toExponential(),转成e表示法
toFixed()、toPrecision()待查

7、string类型

直接方法，都是返回值，字符串正则方法在正则介绍已经全部罗列。

str.charAt(下标);//查找下标位置字符
str.charCodeAt(下标);//查找下标位置字符的ASCII码
str.concat(另个字符串);//追加字符串，不用这个属性，用+
//下面的三个方法的第二个参数可以为负。
str.slice(开始位置,结束位置);//从开始位置截取到结束位置，不含结束位置
str.substring(开始位置,结束位置);//从开始位置截取到结束位置，不含结束位置
str.substr(开始位置,截取个数);//从开始位置截取指定个数
/***********************/
str.indexOf("s");//从头查询s在字符中第一个的下标位置，找不到反-1；
str.lastIndexOf("s");//从尾查询s在字符中第一个的下标位置，找不到反-1；
str.trim();//清除" o o "两边多余的空格，中间的清除不掉
str.toUpperCase();//字符转大小
str.toLowerCase();//字符转小写
/*含有两个不常用的
toLocaleUpperCase();和toLocaleLowerCase();
是针对于特点的地区使用，如（土耳其语）
*/
//split返回的是一个数值
str.split(","[,个数]);
//以逗号","将字符串裂开，【获取指定的个数，】并拼接为一个数值，顺序不变
str.split(正则[,个数]);//以正则裂开。

str.localeCompare(列个字符串);//比较第一个字符的asicll码的大小，不常用
String.formCharCode(asicll码[,可填多值]);//返回asicll码转字符串
str.startsWith("字符");//判断是否以“字符”开头,返回布尔值
str.endsWith("字符");//判断是否以“字符”结尾,返回布尔值
str.include("字符");//判断是否含“字符”，反布尔值

//对字符串进行加密   
function compileStr(code){
    var c=String.fromCharCode(code.charCodeAt(0)+code.length);  
    for(var i=1;i<code.length;i++){        
        c+=String.fromCharCode(code.charCodeAt(i)+code.charCodeAt(i-1));  
    }     
    return escape(c);
}
//字符串进行解密   
function uncompileStr(code){
    code = unescape(code);        
    var c=String.fromCharCode(code.charCodeAt(0)-code.length);        
    for(var i=1;i<code.length;i++){        
        c+=String.fromCharCode(code.charCodeAt(i)-c.charCodeAt(i-1));        
    }        
    return c;
}

8、`Golbal`对象

Golbal(全局）对象是最特殊的对象，一个咋看都不存在的对象

1、`url`的编码和解码

通过encodeURL()和encodeURLComponent()对URL进行编码

var uri="http://www.wrox.com/illegal calue.htm#start";
console.log(encodeURL(uri));
//结果为："http://www.wrox.com/illegal calue.htm#start"
console.log(encodeURLComponent(uri))
//结果为：
//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm$23start"

第一个不会对URL的特殊字符进行编码，第二个会，但第二个保密啊

对应的解码是decodeURL()和encodeURLComponent()

2、`eval`方法在线编译

建立一个JavaScript的运行区，直接运行js代码，在线编译就是这样完成的。

eval("alert('hi')");
//这段代码相当于
alert('hi');

尽量不要使用此方法接收数据，否则会发生恶意代码输入，即代码注入

3、是所有的原型

是所有的构造函数的原型，即它是null，而且undefined，none，Object，Array等等都是它的属性。window和它的关系写的很模糊看不懂，需要另外查询资料

9、Math对象

前面都要加Math.

Math.random();//这是一个随机数，赋值给变量

都是返回值

1、取值

E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

2、方法

abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

10、枚举技术

枚举是通过对象进行枚举的

const jieHunEnum={
            "1":"已婚",
            "2":"未婚",
        };
if(obj.isJieHun){//从外面传来的obj对象
    obj.isJieHun=jieHunEnum[obj.isJieHun];
}
//通过obj.isJieHun返回的1/2值进行解构赋值

const arr=["1","2"];
const hobbyEnum={
    "1":"学习",
    "2":"抽烟",
    "3":"泡妹子"
};
const brr=arr.map(v=>hobbyEnum[v]).join("、");
//通过map方法遍历枚举处理arr数组的值，并返回新数组再用join处理。
console.log(brr);

6、面向对象的程序设计

面向对象的语言有一个标志，那就是它们都有类的概念

一下的和官方中内容有出入，这里是总结操作方法，避开复杂原理，需要查阅资料。

药引子：经典的大象进冰箱问题

面向过程：
就是我把冰箱门打开，我再把大象装进去，最后我把冰箱门关上，整个过程都是我在工作。
面向对象：
我命令冰箱门‘门打开’，让冰箱门自己打开。我命令大象‘装进去’，让大象把自己装冰箱里。我命令冰箱门‘门关上’，让冰箱门自己关上。整个过程我只命令，不工作。我面对向我的冰箱门，大象在工作
误区：大象和冰箱必须是纯在的对象，没有对象怎么命令？且大象和冰箱工作是它门内在的方法。

1、对象操作方法设置

Configurable：表示能否通过delete删除属性从而重新定义，默认true
Enumerable：表示能否使用for-in循环，默认true
Writable：表示能否修改属性的值。默认true
Value：表示一个属性的默认值，默认undefined
Get：在读取属性时调用的函数，默认underfunded
Set：在写入属性时调用的函数，默认underfunded

let person={
    Object.defineProperty(person,"name",{//这个defineProperty是啥？
    	writable:false,//将writable修改为false
    	value:'jack',
    });
person.name='rose';//非严格模式下会忽略，严格模式下报错

2、新增方法

defineProperties()：定义多个属性
configurable
enumerable
get和set

var book={};
Object.defineProperties(book,{
    name:{
        writable:true,
        name:'jack',
    },
    age:{
        value:1,
    },
	year:{
        get:function{
            return this.name;
        },
    },
});

3、工厂模式

就是用function写一个构造函数constructor，又叫工厂函数，能大批量new出相同的对象

构造函数注意事项：

构造函数天生就是用来创建对象的，所以必须和new配合使用，否则就不具备创建对象的能力
构造函数内部不能有return关键字，因为构造函数会自动返回对象。如果返回基本数据类型，和不加效果一样，如果返回复杂数据类型，构造函数就没意义了。
如果new的时候，不需要参数，那么小括号可以省略
人们通常将构造函数的首字母大写

此时的构造函数有个缺点：

方法占用内存造成浪费

这也就是原生对象的最大的问题

function Fn(name,age){
    this.name=name;
    this.age=age;
    this.eat=function(){
        console.log("能吃");//占内存
    }
}
let fn=new Fn("jack",20);

注意：⭐⭐⭐⭐⭐

正儿八经的工厂函数

function Person(){
    Person.prototype.name='jack';
    Person.prototype.age=20;
}

4、原型模式

将构造函数的原型prototype添加公共函数，让实例化的对象能够使用公共函数，不造成内存浪费。

/将能吃函数设置到原型上
fn.protorype.eat=function(){console.log('能吃');};

1、关系图

2、`in`操作符⭐

检测一个属性是否在对象里面，返回布尔值

let obj={'name':'jack'};
console.log('name' in obj);//结果返回true

设置在protorype上的属性也是返回true

function Fn(){
    this.name='jack';
}
Fn.prototype.age=20;
let fn=new Fn();
console.log('age' in fn);

延申：obj.getOwnPropertyNames(),obj.keys()的升级版，无论是否能枚举都能用。

3、更简单的原型语句

function Person(){
    
}
Person.prototype={
    name:'jack',
    age:20,
}

4、原型的动态性

就是在运行上价格方法函数

Person.prototype.fn=function(){console.log('我是动态性');};
Person.prototype={
    fn:function(){console.log('穷啊');},
}

5、寄生模式

就在在构造函数里面创造一个对象，然后设置对象，在返回出来

function Person(name,age){
	var obj=new Object();
	obj.name=name;
	obj.age=age;
	return obj;
}
var jack=new Person('jack',20);

不推荐使用

6、稳妥构造函数模式

结构和寄生几乎没区别，不推荐使用

7、继承

1、原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rVfLzhR-1622042557060)(F:\笔记文件\media\1566485254743.png)]

就是实例对象通过__proto__一直向上访问的一条链；obj.__proto__的值就是obj原型

2、原型继承

//这就是原型继承
/继承1，使用原型继承，将父类的实例对象赋值给子类的原型对象
function Animal(){
    this.status=()=>{console.log('富翁');};
    this.pa=()=>{console.log('有钱');};
}
var animal=new Animal();
function Dog(name){//妈妈(构造函数)
    this.name=name;
}
Dog.prototype=animal;//爸爸是富翁，爸爸摊牌了。爸爸是原型
//但是爸爸把妈妈忘了，即原型没有了构造函数的指向
var ha=new Dog('哈士奇');//这是个孙子辈的
console.log(ha);
ha.eat();

3、借用函数继承

//借用函数继承
function Animal(){
    this.pa='富豪';
}
Animal.prototype.eat=function(){console.log('真有钱');}//无法继承有钱

function Dog(name){
    Animal.call(this);/⭐复制函数，爸爸谎称自己是富豪，但没钱
    this.name=name;
}
var ha=new Dog('哈士奇');
console.log(ha);
// ha.eat();  //出现报错

用借用函数实现类的继承，只能访问父类的属性，不能访问父类原型上的方法⭐

4、混合继承

function Animal(){
    this.pa='富翁';
}
Animal.prototype.eat=function(){console.log('能吃');}
//=》
function Dog(name){
    Animal.call(this);
    this.name=name;
}
//《=这一快就是构造函数,妈妈
Dog.prototype=new Animal();//爸爸摊牌了
Dog.prototype.constructor=Dog;//爸爸不记得妈妈了，让他记住妈妈，即再次将原型的构造函数指向指向到原来的构造函数
var ha=new Dog('哈士奇');
console.log(ha);
ha.eat();  
/混合继承,借用函数继承一次，使用原型再继承一次

5、寄生式继承（放弃）

8、`ES6`的class

1、语法

就是简写去掉了function和prototype

//es6
class Animal{
    /无论属性还是方法都写在这个括号中
    /即没有了prototype
    /一个入口：方法/函数-constructor
    constructor(name,age){
        /和构造函数一样的使用方法
        this.name=name;
        this.age=age;
        this.eat();/直接调用eat函数，无需创建对象后在调用对象。
    }
    eat(){/这就把方法绑定在原型上，实现了prototype的功能
        console.log('饥渴');
    }
}
var animal=new Animal('zs',20);
console.log(animal);
animal.eat();

2、继承

/有明确的继承语法：

class 子类 extends 父类{
    constructor(){
        super();
    
    }
}

class Car{
    constructor(TheType){
        this.Type=TheType;
    }
    run(){
        console.log('跑的快');
    }
}



class Wow extends Car{
    constructor(car){
        super();//这个是刚需，不加报错，功能生成一个this，指向父类
        /super的位置必须在第一个
        
      /也可以完全避开父类，即在constructor里面手动返回一个对象(return obj)
        this.car=car;
    }
}
var car=new Wow('911')
console.log(car);
car.run();
/语法规定，一个类只能继承一个类，不能继承多个

3、`super`示例

class Gad{
    constructor(angle){
        this.angle=angle;
        this.god='旭大王'
    }
    fly(){
        console.log("飞");
    }
}
class people extends Gad{
// class people {
    constructor(name){
        super(name)/这就是添加了一个指向父类的this，给父类传参
        this.name=name;
    }
}
var peo=new people('旭')
console.log(peo);

7、函数表达式

1、递归

函数通过名字调用自身

2、闭包

1、俗括：

函数套函数就形成了闭包！

2、简介：

闭包：

大函数内部返回一个小函数，这个小函数被大函数外部的变量接收，小函数使用大函数中的变量。

3、特点：

函数中返回了一个函数，这样在全局中调用大函数可以得到小函数
小函数中可以改变大函数中的数据，并且这个数据可以持久而不是每次调用就销毁

这种形式的代码叫做闭包。

一般函数，每次调用的时候，里面的变量都是重新开始，但闭包不会，因为闭包这个空间不会被销毁。

4、优点：

作用域空间不销毁，所以变量也不会被销毁，增加了变量的声明周期
在函数外部可以访问函数内部的变量
保护私有变量，将变量定义在函数内，不会污染全局

可以使函数只执行一次，在事件多次触发时使用

function fn(s){
    return function fs(){
        if(s){
            console.log(s);
            s=null;
        }else{
            console.log("ok");
        }
    };
}
let f=fn("javascript");
f();//javascript
f();//ok
f();//ok

5、缺点：

因为不销毁，所以会一直占用内存，如果多了会导致内存溢出
因为函数外部可以访问函数内部的变量，导致变量和内部的函数引用关系一直存在，内存不能销毁
要利用闭包才能访问，不是特别方便

6、待验证：闭包形成的原理

函数中返回基本数据类型，等用完以后，这个数据就被销毁了。
函数中返回复杂数据类型，等用完以后，这个数据就不会被销毁。

7、改成闭包

外面再套个函数壳也算、头部加个return，或者时let创建变量。

8、注意this指向

闭包里的this指向比较奇葩，小心一点，多打断点输出，检测一下

3、模仿块作用级

就是利用函数的作用域原理，模拟一个私有的作用域

function fn(n){
    ~function(){
        for(var i=0;i<n;i++){
            console.log(i)
        }
    }();
    console.log(i);/报错，i is undefined，即无法访问模拟的私有作用域里的变量
}

4、私有变量

还是函数内部的变量不返回出去，不调用出去，外面的谁也用不成。

5、特权方法

有权访问使用变量和使用函数的公有方法称为特权方法

1、在构造函数中定义特权方法

function MyObject(){/构造函数
    /使用变量和私用函数
    var able=10;
    function active(){
        return false;
    }
    //特权方法
    this.action=function(){
        able++;
        return active();
    }
}

这时只能通过构造函数实例化对象的action属性进行访问私用变量

利用使用和特权成员，可以隐藏那些不应该被直接修改的数据，例如；（这样就能做方法了，创建真正意义上的封装，像jQuery一样）

function Person(name){
    this.getName=function(){
        return name;
    }
    this.setName=function(value){
        name=name
    }
}
var person=new Person('jack');
console.log(person.getName());//jack
person.setName('rose');
console.log(person.getName());//rose

2、静态私有变量

(function(){
    var num=10;//私有变量
    function able(){//私有函数
        return false;
    }
    Person=function(){};//构造函数
    /在构造函数原型上定义公有方法
    Person.prototype.public=function(){
        num++;
        return able();
    }
})

这种方法就是上一个方法的改善升级版，即将构造函数的内存浪费问题解决了。

3、模块模式(单例)

就是一个构造函数只能在堆空间建立一个对象。构造函数实例出来的对象都相等。

正常的构造函数

function Person(){}
let n1=new Person{};
let n2=new Person{};
console.log(n1==n2);//false
//即此时在堆空间创建了两个对象

实现单例（闭包）

let fn=function(name){
    function Per(name){//构造函数
        this.name=name;
    }
    let obj;//初始化
    return function(name){//返回闭包函数
        if(obj){//判断初始化
            return obj;
        }else{
            obj=new Per(name);
        }
        return obj;
    };
}();
let a=fn('rose');//利用函数创建对象a
let b=fn('jack');//利用函数创建对象b
console.log(a==b);//true**

8、`BOM`

BOM的核心是window对象

1、窗口关系以及框架(较难)

框架是使用<frames>单标签在framest双标签里创建一个新框子，将浏览器窗口分割。如：

<html lang="en">
<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset> 
</html>

每个框架都有自己的window对象，并保存在farmes集合中，在集合中可以通过索引访问到对应的window对象，

获取frames来引用这个框架，使用top对象。top对象始终指向最够(最外)层的框架

例如top.frames[0]**

**注：top对象全等于window对象

与top相对的另一个window对象是parent。parent对象始终指向当前框架的直接上层框架。在某些情况下，parent可能等于top，在没有框架的情况下，parent一定等于top，即都等于window

2、窗口位置

1、`screenLeft/screenTop`（了解）

是用来确定和修改window对象位置的属性

使用下列代码可以跨浏览器取得窗口左边和上边的位置,从而解决兼容问题

var leftPos=(typepf window.screenLeft==='number')?window.screenLeft:window.screenX;
var topPos=(typepf window.screenTop==='number')?window.screenTop:window.screenY;

这个属性在一些浏览器是用问题的，不推荐使用

2、`moveTo()/moveBy`

moveTo()接收的是新位置的x和y坐标值，moveBy()接收的是水平和垂直方向上移动的像素数

window.moveTo(0,0);//将窗口移动到屏幕的左上角
window.moveBy(-50,100);//将窗口左移50px，下移100px

3、窗口大小

是一个复杂的问题、相当复杂的问题，各种兼容，不同版本的兼容，不同厂商的兼容、不同模式的兼容

IE9+、Safari、Firebox,通过outerWidth和outerHeight返回浏览器的大小
Opear却要通过innerWidth和innerHeight返回浏览器的大小
Chrome则是两个都能用
ie6是document.documentElement.clientHeight和document.documentElement.clientWidth且在标准模式下，
混杂模式下是document.body.clientHeight和document.body.clientWidth

做移动端开发的话,建议读读：移动Web开发

另外使用resizeTo()和resizeBy()能调整浏览器窗口的大小。

window.resizeTo(100,100);/调整到100x100
windiw.resizeBy(100,50);/再调整到200x150

**注解：**直接使用这个也行(含滚动条)

浏览器窗口的高度：

let h=window.innerHeight；

浏览器窗口的宽度：

let w=window.innerWidth；

4、浏览器导航信息

1、`window.open()`方法

/等同于<a href='http://www.baidu.com' target='topFrame'></a>
window.open("http://www.baidu.com","topFrame");
/window.open(URL,name,specs,replace)

2、URL：

可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

3、specs

可选。一个逗号分隔的项目列表。支持表二值

channelmode=yes\|no\|1\|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

4、replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

5、`window.close()`

关闭浏览器窗口：window.close()

仅适用用window.open()打开的弹出窗口，可以使用top.close()在不经用户允许关闭窗口

6、弹出窗口屏蔽

通过检测window.open()是否为null来判断弹窗窗口是否被隐藏

5、间歇调用和超时调用

这就是计时器，注意，计时器是异步

定时器：setInterval(执行的函数，间隔的时间)
计时器：setTimeout(执行的函数，延迟的时间)
结束定时器：(可以混着用，都可以停止)
1. clearInterval（timerId）
2. clearTimeout（timerId）

7、浏览器对话框信息

浏览器的对话框是alert()、confirm(),prompt()、print()三个对话框

对话框弹出时，代码会停止执行，关闭对话框代码继续执行

利用confirm()返回值判断confirm()判断对话框的用户选择

利用查看prompt()返回值获取用户在对话框输入的信息

8、location对象⭐

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分（?和后面的内容即git的请求信息）⭐

可赋值输出，可设置

这里可以用来获取git传递来的信息⭐

location.href="https://www.baidu.com";

跳转到百度
console.log(location.href);

输出当前URL全部字符串

assign()	载入一个新的文档
reload()	重新载入当前文档就是刷新
replace()	用新的文档替换当前文档

9、Navigator 对象

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

1、检测浏览器插件

使用navigator.plugins数值来达到这个目的

name:插件名
description：插件的描述
filename：插件的文件名
length：插件所处理的MIME类型数量

navigator.plugins函数接收一个参数：要检测的插件名

10、Screen 对象属性

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度
onLine	判断是否联网，是true，否false

11、History 对象

属性	说明
length	返回历史列表中的网址数

方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面，正为前进，负后退

9、客户端检测🌙

就是一堆的兼容问题，麻烦的一批，看不懂，理不清，很难受。先不更新

10、`DOM`及扩展

1、node对象属性

属性	描述
baseURI	返回节点的绝对基准 URI。
childNodes	返回节点的子节点的节点列表。
firstChild	返回节点的第一个子节点。
lastChild	返回节点的最后一个子节点。
localName	返回节点名称的本地部分。
namespaceURI	返回节点的命名空间 URI。
nextSibling	返回元素之后紧接的节点。
nodeName	返回节点的名称，根据其类型。
nodeType	返回节点的类型。
nodeValue	设置或返回节点的值，根据其类型。
ownerDocument	返回节点的根元素（document 对象）。
parentNode	返回节点的父节点。
prefix	设置或返回节点的命名空间前缀。
previousSibling	返回元素之前紧接的节点。
textContent	设置或返回节点及其后代的文本内容。

几个较为重要的

nodeType	节点类型，对应值网上查
nodeName	节点名称
nodeValue	节点值，多用于input标签

2、Node 对象方法

方法	描述
appendChild()	把新的子节点添加到节点的子节点列表末尾。
cloneNode()	克隆节点。
compareDocumentPosition()	比较两个节点的文档位置。
getFeature(feature,version)	返回 DOM 对象，此对象可执行带有指定特性和版本的专门的 API。
getUserData(key)	返回与节点上键关联的对象。此对象必须首先通过使用相同的键调用 setUserData 来设置到此节点。
hasAttributes()	如果节点拥有属性，则返回 ture，否则返回 false。
hasChildNodes()	如果节点拥有子节点，则返回 true，否则返回 false。
insertBefore()	在已有的子节点之前插入一个新的子节点。
isDefaultNamespace(URI)	返回指定的 namespaceURI 是否默认。
isEqualNode()	检查两个节点是否相等。
isSameNode()	检查两个节点是否为同一节点。
isSupported(feature,version)	返回指定的特性是否在此节点上得到支持。
lookupNamespaceURI()	返回匹配指定前缀的命名空间 URI。
lookupPrefix()	返回匹配指定命名空间 URI 的前缀。
normalize()	把节点（包括属性）下的所有文本节点放置到一个"标准"的格式中，其中只有结构（比如元素、注释、处理指令、CDATA 区段以及实体引用）来分隔 Text 节点，例如，既没有相邻的 Text 节点，也没有空的 Text 节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
setUserData(key,data,handler)	把对象关联到节点上的键。

3、节点关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Coyvys7R-1622042557063)(F:\笔记文件\media\timg.jpg)]

4、获取关系节点

获取所有子节点：childNodes
获取所有子元素节点：children
获取第一个子节点：firstChild
获取最后一个子节点：lastChild
获取第一个子元素节点：firstElementChild
获取最后一个子元素节点：lastElementChild
获取下一个兄弟节点：nextSibling
获取上一个兄弟节点：previousSibling
获取下一个元素兄弟节点：nextElementSibling
获取上一个元素兄弟节点：previousElementSibling
获取父节点：parentNode
获取父元素节点：parentElement
返回子元素的个数：childElementCount；不含文本和注释
判读是否含有子节点：父节点.contains(子节点)；有返回true，没有返回false

5、节点操作

⭐创建元素节点：document.createElement(元素标签)IE7以下的会有表单的兼容问题
创建文本节点：document.createTextNode("hollo world")
创建属性节点：document.createAttribute(元素属性)[^备注1]
创建文本节点：document.createTextNode(文本内容)
末尾插入节点：父节点.appendChild(所添加的新节点)
头部插入节点：父节点.insertBefore(新节点,已有点)
替换节点：父节点.replaceChild(新节点，老元素);
复制节点：被复制点.cloneNode(true(深复制)/false(浅复制));[^备注2]
删除节点：父元素.removeChild(要删除的节点);
清除父元素内全部节点：父元素.innerHTMML('');
节点合并：父元素.normalize()：将里面的子元素合并在一起(规范一下格式)
分割节点：父元素.splitText()：和分割字符串的效果差不多
类(class)名操作：节点.className='类名'；可获取赋值，可修改
添加类名：节点.classList.add("类名")；追加一个类名
删除类名：节点.classList.remove("类名")；移除指定类名
切换类名：节点.classList.toggle("类名")；增加删除切换
判断是否含有此类名：节点.classList.contains("类名")；有返回true，无反false

6、`doucment`类型

1、Document 对象属性

属性	描述
async	规定 XML 文件的下载是否应当被异步处理。
childNodes	返回文档的子节点的节点列表。
doctype	返回与文档相关的文档类型声明（DTD，全称 Document Type Declaration）。
documentElement	返回文档的根节点。
documentURI	设置或返回文档的位置。
domConfig	返回 normalizeDocument() 被调用时所使用的配置。
firstChild	返回文档的第一个子节点。
implementation	返回处理该文档的 DOMImplementation 对象。
inputEncoding	返回用于文档的编码方式（在解析时）。
lastChild	返回文档的最后一个子节点。
nodeName	返回节点的名称（根据节点的类型）。
nodeType	返回节点的节点类型。
nodeValue	设置或返回节点的值（根据节点的类型）。
strictErrorChecking	设置或返回是否强制进行错误检查。
xmlEncoding	返回文档的 XML 编码。
xmlStandalone	设置或返回文档是否为 standalone。
xmlVersion	设置或返回文档的 XML 版本。

2、Document 对象方法

方法	描述
adoptNode(sourcenode)	从另一个文档向本文档选定一个节点，然后返回被选节点。
createAttribute(name)	创建带有指定名称的属性节点，并返回新的 Attr 对象。
createAttributeNS(uri,name)	创建带有指定名称和命名空间的属性节点，并返回新的 Attr 对象。
createCDATASection()	创建 CDATA 区段节点。
createComment()	创建注释节点。
createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
createElement()	创建元素节点。
createElementNS()	创建带有指定命名空间的元素节点。
createEntityReference(name)	创建 EntityReference 对象，并返回此对象。
createProcessingInstruction(target,data)	创建一个 ProcessingInstruction 对象，并返回此对象。
createTextNode()	创建文本节点。
getElementById(id)	返回带有指定值的 ID 属性的元素。如果不存在这样的元素，则返回 null。
getElementsByTagName()	返回带有指定名称的所有元素的 NodeList。
getElementsByTagNameNS()	返回带有指定名称和命名空间的所有元素的 NodeList。
importNode(nodetoimport,deep)	从另一个文档向本文档选定一个节点。该方法创建源节点的一个新的副本。如果 deep 参数设置为 true，它将导入指定节点的所有子节点。如果设置为 false，它将只导入节点本身。该方法返回被导入的节点。
normalizeDocument()
renameNode()	重命名元素或属性节点。

3、常用document

document.write('页面输出');
document.bgColor=‘#000’;//默认给html加
document.documentElement;//html及其内部所有内容
document.head //指向head的内容
document.body //指向body的内容
document.body.style.color="#000" //给body里的字体添加颜色
document.title //指向title内容
document.URL //获取当前页面完整的URL
document.referrer //获取来源页面的URL
document.domin //指向域名，可以用在域名的判断

7、document获取节点

document.getElementById('元素Id')
document.getElementByTagName('元素节点名')

访问时可直接取下标或使用item()取下标访问，还可以使用namedItem()的方法去name的属性值访问
document.getElementByClassName('元素class')
document.getElementByName('name名')
document.querySekector("css选择符")：查找一个元素，返回这个元素
document.querySekectorAll("css选择符")：查找多个元素，返回这些元素组成的集合(forEach可用于遍历集合)
检测是否被上面两个方法获取：元素.matchesSelector("css选择符")，引用过反true，否反false

8、document特殊集合(伪数组)

document.anchors包含文档中所有带name特效的
document.applets的集合
document.forms的集合
document.images的集合
document.links说有带有href的

9、document的写入

4个方法：write()、writeln()、open()、close()

writeln()也是写入字符串，但会在末尾添加换行符(\n)

当script标签里面嵌套script标签时，可以使用这个属性将里面的包起来使标签能正常匹配头尾
后两个方法使用来打开和关闭浏览器的输出流

10、节点属性样式操作

attributes已经不常用了

增：元素.setAttribute("属性名","属性值")[^备注7]⭐
删：元素.removeAttribute("属性名"[,"属性值"])
改：节点的属性是覆盖式添加修改
查：元素.getAttribute("属性名")

或者直接将属性以查看对象的形式进行增删改查

div.id='div';
div["id"]='div';
div.style.color='red';
div.style['background-color']='red';

注意:带"-"等特殊符号的只能使用这个形式

以上的都是获取和设置内联样式，无法获取内联外以的css样式

window.getComputeStyle(元素).css属性名能获取全部的css样式。
获取节点自定义属性：节点.dataset.自定义属性；可获取，可设置

11、DOM操作技术

就是动态生成script标签设置src属性，或者生成link标签设置href属性，再添加都html对应的位置

12、table的方法

caption：保存着对元素(如果有)的指针
tBodies：报存着对元素的指针
tFoot：保存着对元素(如果有)的指针
thead：保存着对元素(如果有)的指针
rows：指向所有行
createTHead()：创建元素，放入表格，返回引用
createTFoot()：创建元素，放入表格，返回引用
createCaption()：创建元素，放入表格，返回引用
deleteTHead()：删除元素
deleteTFoot()：删除元素
deleteCaption()：删除元素
deleteRow(pos)：删除指定位置行
insertRow(pos)：想rows集合中的指定位置插入一行

为添加的属性和方法
rows：指向行
deleteRow(pos)：删除指定位置行
insertRow(pos)：想rows集合中的指定位置插入一行,返回对新插入行的引用

为添加的属性和方法
cells：指向td或th
deleteCell(pos)：删除指定位置的单元格
insertCell(pos)：想cells指定位置添加一个单元格，返回对新插入的引用

13、文档相关

document.hasFocus()；判断文档是否获取焦点
document.readyState()；返回文档加载状态：loading正在加载，complete加载完成
document.charset；指定文档读取时数据类型

14、插入标记(`innerHTML`)⭐⭐

节点.innerHTML='hollo world'；可获取，可设置，加载后显示标签。脚本标签有兼容问题
节点.outerHTML; 没啥用，功能和就是获取特换，但上面也有
节点.insertAdjacentHTML()
- 元素前插入：老节点.insertAdjaceHtml("beforebegin","hollo world")
- 元素后插入：老节点.insertAdjaceHtml("afterend","hollo world")
- 第一个子元素插入：父节点.insertAdjacentHtml("afterbegin","hollo world")
- 最后一个元素插入：父节点.insertAdjacentHtml("beforeend","hollo world")

使用innerHTML操作节点会减少内存占用

15、插入文本

节点.innerText；只添加内容，不能添加节点
节点.outerText；

16、滚动

所有元素都可以使用(Safari和Chrome实现了这个方法)

scrollIntoViewIfNeeded([true])当前容器窗口不见，滚动后可见
scrollByLines(pos)设置元素内容滚动的指定行高
scrollByPages()设置元素内容滚动的指定页面高度

11、`DOM2`和`DOM3`

大部分比较啰嗦，且教学中直接放弃，只罗列常用部分

1、元素大小

只读属性

height：元素.offsetHeight
width：元素.offsetWidth
定位的父元素：offsetParent（没有啥用）
left：元素.offsetLeft
top：元素.offsetTop

2、可视区窗口大小

不含滚动条

height：元素.clientHeight
width：元素.clientWidth
left：元素.clientLeft
top：元素.clientTop

3、滚动大小

没滚动条时，元素内容总高度：元素.scrollHeight
没滚动条时，元素内容总宽度：元素.scrollWidth
滚动时距左侧距离：元素.scrollLeft
滚动时距顶部距离：元素.scrollTop

4、确定元素大小

元素.getBoundingClientRect()，该方法返回一个矩形对象，包含4个属性：left、right、top、bottom。没啥用

5、范围

用来确定DOM的范围，进行折叠，特殊复杂选取等。

12、事件

JavaScript和HTML之间的交互是通过事件实现的。

1、事件流

1、事件冒泡

子元素的事件会向上冒泡触发父元素的相同事件

2、事件捕获

获得子元素会从父元素一层一层向下捕获，同时触发父元素会触发子元素的相同事件

3、DOM事件流

事件流是指事件从捕获阶段开始一直都冒泡阶段，每个事件都要经过事件流

当然可以人为进行阻止，后面会详细介绍

2、事件的处理

1、事件的绑定

以鼠标单击事件为例。

1、HTML内联绑定

<input type="button" value="按钮" onclick="fn">
<!--点击触发fn处理函数-->
<!--只能绑定一次，再次绑定会覆盖前面的-->

2、on绑定

这是绑定一个未被调用的处理函数fn，input点击时触发，且fn的this指向input，不再指向window全局，当然还是可以通过call，apply，bind改变。

let input=document.querySelector("input");
input.onclick=function fn(){
    console.log(this.value);
}
只能绑定一次，再次绑定会覆盖前面的

3、添加一个监听事件

处理函数和上面的一样未调用，第三个参数为是否在捕获阶段执行，默认为否false
可以多次绑定不同的处理函数。可以是函数名，或整个函数，但不能是以调用过的

input.addEventListener("click",处理函数,false);

2、解除事件绑定

1、内联绑定

直接使用移除属性解绑

input.removeAttribute("onclick");

2、on解绑

设置处理函数为空。覆盖之前的设置

input.onclick=null;

3、删除监听事件

参数和绑定时的一样

input.removeEventListener("click",处理函数,false);

3、兼容`IE8`以下

绑定为：attachEvent()

解绑为：detechEvent()

IE8一下只支持冒泡，用法和监听事件一样。

4、跨浏览器事件处理

这个东西几乎没人提到过，了解一下

addHandler()绑定方法接收三个参数，要操作的元素，事件名和事件处理函数

对应的是removeHandler(),要用到EventUtil这个对象，具体请网上查询

3、事件对象E

在DOM上触发每一个事件都会产生一个event对象，此对象包含着所有与事件有关信息

1、e的说明

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	表明事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序正当处理事件的那个元素
defaultPrevented	Boolean	只读	为true表示已经调用了preventDefault()
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段，1捕获，2处与目标，3冒泡
prevent Default()	Function	只读	取消事件的默认行为，如果cancelable是true，则可以使用
stopImmediatePropagation()	Function	只读	取消事件的进一步捕获或冒泡，同时阻止任何事件被调用
stopPropagation()	Functon	只读	取消事件的进一步捕获或冒泡，如果bubbles为true时，则可以使用
target	Element	只读	事件的目标
trusted	Boolean	只读	为true表浏览器生成，为false为开发员JavaScript生成
type	String	只读	被触发的事件类型
view	AbstractView	只读	与事件关联的抽象图，等同于发生事件的window

2、获取事件对象

window.event
var er=e || window.event[^备注8]（这里使用短路运算的写法）
box.onclick=function(e){console.log(e)}

3、e的常用

获取鼠标按键信息使用：e.button：(鼠标事件详细介绍)
e.type：用于获取事件类型如单击事件为click,失去焦点为blur。
e.keyCode，获取按下键盘键的按键ascll码
e.target获取事件目标(事件发生的精准目标元素)⭐
e.stopPropagation()阻止事件冒泡⭐
e.preventDefault()阻止事件默认行为⭐或者在事件处理函数最后追加return false 或者给链接地址设置javaScript:;&javaScript:voidlo)

4、e的兼容

e.srcElement获取事件目标(事件发生的精准目标元素) （火狐浏览器也是通过srcElement获取）
e.cancelBubble阻止事件冒泡
e.returnValue阻止事件默认行为

5、e获取光标位置

x轴：e.offsetX；y轴：e.offsetY；[^备注9]
x轴：e.clientX；y轴：e.clientY；[^备注10]
x轴：e.pageX；y轴：e.pageY；[^备注11]

6、事件托管技术

事件委托也叫事件代理（看站谁的角度），使用事件委托技术能避免对每个子节点添加事件监听,相反把事件监听委托给父元素即可，这样可提高绑定事件的性能

oUl.onclick = function(e){
	var ev = e || window.event;
	// 获取到单击的目标元素dom对象
	var target = ev.target || ev.srcElement;
	// 判断是否是li标签
	if(target.nodeName == "LI"){
        //⭐⭐⭐注意，浏览器已经全部改成大写的了
        //验证的不一定非是nodeName
		// 完成业务逻辑
		alert(target.innerText);
	}
}

4、事件类型

1、`Ul`事件(window)

window.onload=fn;最后加载事件
window.onunload=fn;关闭浏览器触发事件
window.onbeforUnload=fn;关闭浏览器前一刻触发事件
abort：用户停止下载过程时，如果嵌入的内容没有加载完成，则在元素上面触发
error：在发生JavaScript错误时在window上面触发，当无法加载图像时在元素上触发，当无法加载内容时在元素上触发
window.onselect=fn;：用户选择文本框时触发
window.onresize=fn;：当窗口或框架的大小变化时在window或框架上触发
scroll;：滚动条滚动事件，发生滚动的元素触发

浏览器窗口切换检测实现⭐：https://www.cnblogs.com/xulinjun/p/11452001.html

visibilitychange属性

<script>
document.addEventListener('visibilitychange',function(){ //浏览器切换事件
    if(document.visibilityState=='hidden') { //状态判断
        //normal_title=document.title;
        document.title = '标题二'; 
    }else {
        document.title = '标题一';
    }
});
</script>

2、scroll事件的信息获取

上下滚动：document.documentElement.scrollTop
上下滚动：document.body.scrollTop
上面两个是需要短路写，防止兼容问题
左右是将top换left

3、焦点事件

blur：元素失去焦点时触发，没有冒泡，没有兼容问题
focus：元素获取焦点时触发，没有冒泡，没有兼容问题
focusin：元素获取焦点时触发，冒泡，ie5.5+，Safari5.1+,Opera11.5+,Chrome支持
focusout：元素失去焦点时触发，冒泡，兼容同上

4、鼠标事件

左键单击：click
右键单击：contextmenu
双击：dblclick
左键按下：mousedown
左键弹起：mouseup
鼠标放上去[^备注12]：mouseover
鼠标离开[^备注12]：mouseout
⭐(不含子)鼠标放上去[^备注13]：mouseenter
⭐(不含子)鼠标离开[^备注13]：mouseleave
鼠标移动事件：mousemove

5、光标的位置

通过事件对象获得

6、修改键

通过shift，ctrl，alt和window或者cmd修改鼠标事件，由于用户几乎不会使用快捷键和组合键，所以不做介绍

7、e.button

鼠标按钮判断

返回0：表示没有按下鼠标按钮
返回1：表示按下左键
返回2：表示按下右键
返回3：同时按下左右键
返回4：表示按下滑轮键
返回5：表示按下左+滑轮键
返回6：表示按下右+滑轮键
返回8：表示按下三个键

8、鼠标滚轮事件

ie6首先实现：mousewhell事件，对应的event对象里包含一个特殊的属性，whellDelta，当向上滑动时，它是120的倍数，向下时是-120的倍数

Opera9.5版本之前是相反的

9、键盘事件

按下：keydown
弹起：keyup
无论按下弹起：keypress
判断按键码：通过e.keyCode获取判断
判断组合键：
1. alt 键按下得到 true，否则得到 false：altKey
2. shift 键按下得到 true，否则得到 false：shiftKey
3. ctrl 键按下得到 true，否则得到 false：ctrlKey
在可编辑区域输入：textInput：为DOM3新增

通过其event对象的特殊属性inputMethod可以判断输入方式
- 0：表示浏览器不确定是咋输入的
- 1：键盘输入
- 2：粘贴
- 3：托放进入
- 4：使用IME输入
- 5：表单输入
- 6：手写输入
- 7：语言输入
- 8：以上方法组合输入
- 9：脚本输入

10、表单事件

提交表单：submit
获取焦点：focus
失去焦点：blur
内容改变并失去焦点：change
input的value值实时改变：input
低版本IE中的input事件:onpropertychange
阻止提交事件使用阻止默认事件：e.preventDefault()
checkbox判断：input.ckecked||input.checked=true。

11、事件的封装

function bind(ele,type,callback){
    tyr{
       ele.addEventstener(type,callback,false)
    }catch(e){
        ele.attachEvent("on"+type,callback)
    }
}

绑定是bind
其他是unbind
将要绑定事件的对象：ele
事件类型：type
callback处理事件的函数：callback

11、符：

还有一些比较冷门的事件：复合事件，变动事件，HTML5事件，这些是为开发者设计检测的事件，不作介绍。

12、设备事件🌙

这个真的是臣妾做不到了，由于全面屏的不断发行和使用，按键和方法也在发生着巨大的变化，jQuery Mobile上有具体的模块，没法进行移动设备实验

13、表单的补充

大部分已经在html里介绍过，只介绍部分js的属性和方法

1、操作粘贴板

Opera不支持通过JavaScript访问粘贴板

berorecopy：在发生复杂操作前触发
copy：在发生复杂操作时触发
beforecut：在发生剪切操作前触发
cut：在发生剪切操作时触发
beforepaste：在发生粘贴操作前触发
paste：在发生粘贴操作时触发

2、自动切换焦点

主动获取焦点：.focus()

input的字数判断，满足条件时添加input.focus()使应该获取的input元素获取焦点

3、富文本编辑🌙

即iframe标签内容编译

1、使用`contenteditable`属性

可以把contenteditable属性给页面中的任何一个元素，然后就可以编辑该元素了

<div class="editable" id="richedit" contenteditable></div>

还可以打开关闭编译模式

div.contenteditable=true;//true:打开；false:关闭；inherit：继承父元素

2、操作富文本

document.execCommand()，极其冷门，可能一辈子都用不到，后续继续编辑

3、富文本选区

使用框架(iframe)的getSelection()方法；后续继续编辑

14、Canvas绘图🌙

最期待的功能

15、离线应用存储问题

1、离线检测

navigator.onLine；判断是否联网，是true，否false。之前介绍navigator时已经提到

可获取。可修改赋值

2、应用缓存

HTML5的应用缓存，或者简称appcache，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

检测应用缓存的状态是applicationCache.status,属性值是常量

0：无缓存
1：闲置
2：检查中：下载描述文件并检查更新
3：下载中
4：更新完成：已经下载完毕，可以通过swapCache()使用

应用缓存还有很多相关的事件，表示其状态的改变

checking：在浏览器为应用缓存查找更新时触发
error：在查找更新或下载期间出现错误触发
noupdate：在检查描述文件发现文件没有变化时触发
downloading：在开始下载应用资源时触发
progress：在文件下载应用缓存的过程中持续不断触发
updateready：在页面新的应用下载完毕可以通过swapCache()触发
cached：在应用缓存完整可用时触发

3、cookie

1、请求头信息

HTTP Cookie，通常直接叫cookie

发生set-cookie时请求头如：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie:name=value;expires=Mon, 22-Jan-20 07:10:24 GMT;domain=.wrox.com
//在传送时都必须时URL编码
Other-header:other-header-value

每添加Cookie HTTP头将信息发回服务器

GET /index.html HTTP/1.1
Cookie: name=value
Other-header:other-header-value

2、个数限制

低版本IE最低20个cookie，其他的最好不要超过50个

字数最后是在4095B以内

3、增删改查

1、增/改：document.cookie="键=值[,失效时间]"

不设置失效时间的话，默认在浏览器关闭时失效，且失效时间是国际协调时间，中国的要减去8小时，单位为毫秒数

2、删除：document.cookie="键=null,当前时间前一秒"

cookie无法直接手动删除，只能将失效时间提前达到删除的目的。

3、查：document.cookie()；获取所有的cookie，返回的是字符串

4、封装的简单cookie函数（这是简单粗暴的，但不是最好的）

/*jshint esversion: 6 */
//设置或添加或修改cookie的函数
(function (){
    return function setCookie(key,value,indite){
        let date=new Date();
        if(indite!=null){
            date.setTime(date.getTime()-8*60*60*1000+indite*1000);
            document.cookie=key+"="+value+";expires="+date;
        }else{
            document.cookie=key+"="+value;
        }
    };
})();
//读取指定cookie封装
(function (){
    return function getCookie(key){
        const cookieArr=document.cookie.split(";");
        let value="";
        cookieArr.forEach(item=>{
            if(item.split("=")[0].trim()==key){
                value=item.split("=")[1].trim();
            }
        });
        return value;
    };
})();
//删除cookie封装
(function (){
    return function delCookie(name){
        setCookie(name,null,-1);
    };
})();

子cookie的概念，就是在cookie里面存放更小段的cookie

4、`localstorage`

由于其他的方法各种兼容和bug等问题，所有没有介绍，带其发展强大，再追加补充

1、本地存储

解除了cookie的4k限制，存储量可以达到5m
第一次访问服务器之后，可以发数据存储到客户的浏览器中
低版本的浏览器不支持，ie8一下
受同源策略保护。

版本支持检测

if(!window.localStorage){
    alert("请升级浏览器");
}
//业务逻辑代码

2、增删改查

增加/修改

localStorage.setItem('name','秋香');
//在localSrotage里查看，覆盖式创建，即修改也是它

获取

let str=localStorage.getItem('name');
let str=localStorage.key(下标);//获取指定下标key的值，不建议使用，因为你也知道具体的下标

删除

localStorage.removeItem('name');
localStorage.clear();//清空所有的本地存储。

3、和`json`的结合使用

let obj={
    name:'石榴姐',
    age:12,
    hobby:'演习'
};
let str=JSON.stringify(obj);
localStorage.setItem('info',str);//将转换成的自负床存到本地存储
let read=localStorage.getItem('info');
console.log(JSON.pares(read));//读取为接送对象

4、`storage`事件

用来监听本地存储的事件

domain：发生变化的存储空间的域名
key：设置或删除的键名
newValue：如果是设置值，则是新值；如果是删除键，则是null
oldValue：键被更改之前的值

document.onstorage();

5、`indexedDB`数据库🌙

后续继续处理

16、AJAX和Comet🌙

-----------------相关内容，可跳转主页获取

https://blog.csdn.net/weixin_44070254

17、部分功能vscode的插件更好

https://blog.csdn.net/weixin_44070254/article/details/116091809?spm=1001.2014.3001.5501

在这里插入图片描述

前端技术交流群：925570980 欢迎各位萌新大佬加入技术交流~

总结不易，觉得这篇博文对你帮助，推荐收藏。感谢关注点赞，您对我的支持是继续写作的最大鼓励~
在这里插入图片描述

贪吃ღ大魔王

关注

35
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
65
评论
1小时0基础带你 Javascript入门建议收藏~

javaScript1、背景介绍为了提高网速而由网景公司的布兰登·艾奇来解决，他用10个工作日设计了js1、js标准ECMAScript是一个标准，而JavaScript是语言2、js的基础概念1、什么是js一个支持面向对象的、跨平台的、脚本语言，依赖与html才能实现。2、应用场景：表单验证：规范用户输入数据，和后台数据进行交互 2. 网页特效：给页面内容加行为，让页面动起来 3. 游戏开发：飞机大战、打砖块js的组成示意图物联网：https://zhuanlan.zhihu.c
复制链接

扫一扫