JavaScript基础知识总结（基础篇）

「爱情、让人受尽委屈。」 2023-03-04 08:15 31阅读 0赞

### 目录 ###

*  JavaScript基础知识点总结（基础篇）
 *   *  一、JavcScript基础语法应用
     *   *  1.1三条输出语句
         *  1.2JS中的数据类型
         *  1.3JS中的强制类型转换
         *   *  1.31string强制类型转换分为两种方法:
             *  1.32将其他String类型转为Number
             *  1.33将其他的数据类型转换为Boolean，使用Boolean()函数
         *  1.4非布尔值的逻辑
     *  二、JS中的面向对象
     *   *  2.1对象的创建和使用
         *  2.2属性名和属性值
         *  2.3函数
         *   *  2.31函数的参数
             *  2.32立即执行函数
             *  2.33JS中的方法
             *  2.34作用域
             *  2.35变量的声明提前
             *  2.36this关键字
             *  2.37使用工厂创建对象的方法
             *  2.38构造函数
         *  2.3原型
         *   *  原型对象
     *  三、数组
     *   *  3.1数组的创建和使用
         *  3.2数组中的方法
         *  3.3forEach
     *  四、Date、Math
     *   *  4.1Date
         *  4.2Math中的方法
         *  4.3String中的方法
     *  五、正则表达式
     *   *  5.1正则表达式的创建和使用
         *  5.2字符串和正则表达式的相关方法
         *  5.3正则表达式的语法
     *  六、DOM（Document Objeect Model）文档对象模型
     *   *  6.1DOM
         *  6.2事件
         *  6.3文档的加载
         *  6.4内联样式的修改和读取
         *  6.5其他与样式相关的属性
         *  6.6事件的冒泡（Bubble）
         *  6.7事件的委派
         *  6.8滚轮事件
         *  6.9键盘事件
     *  七、BOM
     *   *  7.1Navigator
         *  7.2History
         *  7.3Location
         *  7.4定时调用（定时器）
         *  7.5延时调用
     *  八、类的操作
     *  九、JSON（JavaScript Object Notation）JS对象表示法

# JavaScript基础知识点总结（基础篇） #

## 一、JavcScript基础语法应用 ##

### 1.1三条输出语句 ###

### 1.2JS中的数据类型 ###

在JS中一共有六种数据类型:  
String 字符串  
Number 数值  
Booleam 布尔值  
Null 空值  
Undefined 未定义  
Object 对象

### 1.3JS中的强制类型转换 ###

#### 1.31string强制类型转换分为两种方法: ####

1.调用toString方法  
2.调用String函数

#### 1.32将其他String类型转为Number ####

1.使用Number()函数  
2.使用parseInt()函数–转换为整数  
parseFloat() —转换为浮点数

#### 1.33将其他的数据类型转换为Boolean，使用Boolean()函数 ####

数字–>Boolean  
除了0和NaN,其余都是true  
字符串–>Boolean  
除了空串，其余都是true  
null和undefined都会转化成false  
对象都会转换成true

### 1.4非布尔值的逻辑 ###

&& || 非布尔值的运算情况：  
先将其转换为布尔值，然后再运算，并且返回原值  
**&&运算**  
如果第一个值为true，则必然返回第二个值  
如果第一个值为false，则直接返回第一个值  
**||运算**  
如果第一个值为true，则直接返回第一个值  
如果第一个值为false，则返回第二个值

## 二、JS中的面向对象 ##

### 2.1对象的创建和使用 ###

**对象的字面量**：  
使用对象字面量来创建一个对象  
var obj=\{\}; //与 var obj = new Object();一样  
使用对象字面量可以在创建对象的同时直接指定对象中的属性  
语法:\{属性名:属性值,属性名:属性值…\}

### 2.2属性名和属性值 ###

在对象中如果使用特殊的属性名，需要用这种方式：  
语法：对象\[“属性名”\]=属性值  
当将对象的属性名赋给一个新的变量时，在读取对象中的这个值时，  
需要这样写：对象\[新变量\];  
js对象的属性值可以是任意类型

in运算符，通过该运算符可以检查一个对象中是否含有指定的属性  
返回true则有，返回false则无  
语法:“属性名” in 对象

### 2.3函数 ###

创建函数用到两种方式：  
1.使用声明函数来创建一个函数  
语法:function 函数名()\{  
代码块  
\}

2.使用函数表达式创建一个函数  
语法: var 函数名 = function()\{  
代码块  
\};

#### 2.31函数的参数 ####

定义一个函数,可以在函数的()中指定一个或者多个形参，声明形参就相当于在函数内部声明了对应的变量,但不赋值。  
在调用函数时,可以在()中指定实参  
调用函数解析器不会检查实参的类型,如果接收到非法的参数,需要对参数进行检查

调用函数时,解析器也不会检查参数的数量,多余的实参不会被赋值, 若实参小于形参数,则没有对应的形参将会是undefined。  
函数的实参可以实任意的数据类型。

**在函数中，实参可以是任何值，既包括对象，又包括函数**

#### 2.32立即执行函数 ####

立即执行函数：  
函数定义完，立即被调用，这种函数叫做立即执行函数，这种函数往往执行一次  
也可以对该类函数进行传参

#### 2.33JS中的方法 ####

函数也可以称为对象的属性，如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，调用函数就说调用对象的方法。

#### 2.34作用域 ####

作用域：作用域指的是一个变量的作用范围  
在js中一共有两种作用域：  
1.全局作用域：  
直接编写在script标签中的js代码，都会在全局作用域，全局作用域在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它有浏览器创建，我们可以直接使用。

在全局作用域中：  
创建的变量都会作为window对象的属性保存  
创建的函数都会作为window对象的方法保存  
全局作用域中的变量都是全局变量，在页面的任意部分可以访问

2.函数作用域：  
调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁，每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的，在函数作用域中可以访问到全局作用域的变量，但在全局作用域中无法访问到函数作用域中的变量。

在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用。  
如果没有，则向上一级作用域中寻找，直到找到全局作用域  
如果全局作用域中依然没有找到，则会报错ReferenceError  
在函数中要访问全局变量可以使用window对象

#### 2.35变量的声明提前 ####

变量的声明提前  
使用var关键字声明变量，会在所有的代吗执行之前被声明（但是不会赋值）  
如果声明变量时不使用var，则变量不会被声明提前

函数声明提前：  
使用函数声明形式创建函数function 函数()\{\}  
他会在所有代码执行之前就被创建,我们可以在函数声明前来调用函数  
使用函数表达式创建的函数，不会被声明提前，所以不能提前调用

#### 2.36this关键字 ####

解析器在调用函数时每次都会向函数内部传递一个隐含的参数，  
这个隐含的参数就是this，this指向的是一个对象， 这个对象我们称为函数执行的上下文对象， 根据函数的调用方式的不同，this会指向不同的对象  
1.以函数的形式调用时，this永远都是window  
2.以方法的形式调用时，this就是调用方法的那个对象

#### 2.37使用工厂创建对象的方法 ####

#### 2.38构造函数 ####

构造函数和普通函数的区别就是调用的方式不同  
普通函数直接调用，构造函数需要使用new关键字来调用  
构造函数习惯上首字母大写  
构造函数的执行流程：  
1.立刻创建一个新的对象  
2.将新创建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象  
3.逐行执行函数中的代码  
4.将新建的对象作为返回值返回  
使用同一个构造函数创建的对象，称为同一类对象，也将一个构造函数称为一个类  
通过一个构造函数创建的对象，称为该类的实例

this的情况：  
1.当以函数的形式调用时，this是window  
2.当以方法的形式调用时，谁调用方法this就是谁  
3.当以构造函数的形式调用时，this就是新创建的那个对象

### 2.3原型 ###

原型prototype：  
我们所创建的每一个函数，解析器都会向函数中添加一个prototype属性， 这个属性对应一个对象，这个对象就是我们所谓的原型对象。

如果函数作为普通函数调用prototype没有任何作用  
函数以构造函数的形式调用时，它所常见的对象中都会有一个隐含的属性  
指向该构造函数的原型对象，我们可以通过\_\_proto\_\_来访问该属性  
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，  
我们可以将对象中共有的内容，统一设置到原型对象中。  
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用  
没有则会去原型对象中寻找，找到直接使用。  
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中  
这样就不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法

#### 原型对象 ####

原型对象也是对象,所以他也有原型,  
当我们使用一个对象的属性和方法时,会在自身中寻找,  
自身中如果有,则直接使用,  
如果没有,则去原型对象中寻找,如果原型对象中有,则使用  
如果没有,则回去原型对象的原型中去寻找,直接找到Object对象的原型,  
Objetc对象的原型没有原型,在Object中依然没有找到,则返回undefined

## 三、数组 ##

### 3.1数组的创建和使用 ###

### 3.2数组中的方法 ###

1.`push();`在数组末尾添加一个或者多个元素，返回数组新长度  
2.`pop();`删除数组最后一个元素，返回被删除的元素  
3.`unshift();`向数组开头添加一个或多个元素，返回数组新长度  
4.`shift();`删除数组第一个元素，返回被删除的元素

5.`slice();`可以用来从数组中提取指定元素  
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回  
参数：  
1.截取开始的位置索引，包含开始索引  
2.截取结束的位置索引，不包含结束索引  
第二个参数省略不写，此时会截取从开始索引往后的所有元素  
索引可以传递一个负值，如果传递一个负值，则从后往前计算  
\-1 倒数第一个  
\-2 倒数第二个

6.`splice()` 可以用于删除数组中的指定元素  
使用splice()会影响到原数组，会将指定元素从原数组中删除，并将删除的元素返回  
参数：  
第一个：表示开始位置的索引  
第二个：表示删除的数量  
第三个及以后：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

7.`concat();`可以连接两个或多个数组，并将新的数组返回，不会对原数组产生影响

8.`join();`将数组转换为一个字符串，不对原数组产生影响，将转换后的字符串作为结果返回,在`join()`中可以传入一个字符串作为参数，这个参数将会成为数组中的元素连接符

9.`reverse();`该方法用来反转数组，直接改变原数组

10.`sort();`可以用来对数组中的元素进行排序，影响原数组，按照Unicode编码排序  
指定排序规则时，  
可以在sort()添加一个回调函数，来指定排序规则  
回调函数中需要两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数  
浏览器会根据回调函数的返回值来决定元素的排序  
升序排列：返回a-b  
降序排列：返回b-a

### 3.3forEach ###

forEach()方法需要一个函数作为参数  
像这种函数，由我们创建不由我们调用的，称为回调函数  
数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以定义形参，来读取这些内容

浏览器会回调函数中传递三个参数：  
第一个参数：当前正在遍历的元素  
第二个参数：当前遍历元素的索引  
第三个参数：正在遍历的数组

## 四、Date、Math ##

### 4.1Date ###

getDate()	以数值返回天（1-31）
        getDay()	以数值获取周名（0-6）
        getFullYear()	获取四位的年（yyyy）
        getHours()	获取小时（0-23）
        getMilliseconds()	获取毫秒（0-999）
        getMinutes()	获取分（0-59）
        getMonth()	获取月（0-11）
        getSeconds()	获取秒（0-59）
        getTime()	获取时间（从 1970 年 1 月 1 日至今）

### 4.2Math中的方法 ###

`Math.sqrt()` 对一个数进行开方运算  
`Math.pow(x,y);` 对一个数进行x的y次幂运算  
`Math.abs();` 对一个数进行绝对值运算  
`Math.ceil();` 可以对一个属进行向上取整，小数位只要有值就自动进1  
`Math.floor();` 可以对一个数进行向下取整，小数部分会被舍掉  
`Math.round();` 可以对一个数进行四舍五入取整  
`Math.random();` 可以用来生成一个0-1之间的随机数  
`Math.round(Math.random()*x);` 生成一个0-x之间随机数  
`Math.round(Math.random()*(y-x)+x);` 生成一个x-y之间的随机数  
`max();` 可以获取多个数中的最大值  
`min();` 可以获取多个数中的最小值

### 4.3String中的方法 ###

1.`charAt();` 可以返回字符串的指定字符，根据索引获取指定字符  
2.`charCodeAt();` 获取指定位置字符的字符编码（Unicode编码）  
3.`formCharCode();` 可以根据字符编码去获取字符  
4.`concat();` 可以用来连接两个或多个字符串  
4.`indexof();` 该方法可以检索一个字符串中是否含有指定内容  
如果字符串中含有指定内容，则会返回其第一次出现的索引  
如果没有指定内容，则返回-1  
可以指定一个第二个参数，指定开始查找的位置  
5.`lastIndexOf();` 该方法雨indexof()一样，不同的是indexof是从前往后找，  
lastIndexOf是从后往前找，也可以指定开始查找的位置  
6.`slice(a,b);` 可以从字符串中截取指定的内容  
a 开始位置的索引（包括开始位置）  
b 结束位置的索引（不包括结束位置），如果省去第二个参数，则会截取到后边所有的  
也可以传递一个负数作为参数，负数的话将会从后边计算  
7.`subString(a,b);` 用来截取一个字符串，与slice()类似  
a 开始位置的索引（包括开始位置）  
b 结束位置的索引（不包括结束位置），如果省去第二个参数  
该方法不接受负值作为对象，如果传递了一个负值，默认使用0  
8.`split();` 可以将一个字符串拆分成一个数组，  
需要一个字符串作为参数，将会根据该字符串去拆分数组  
如果传递一个空串，则会将每个字符都拆分成为数组中的一个元素  
9.`toUpperCase();`将一个字符串转换为大写并返回  
10. `toLowerCase();`将一个字符串转换为小写返回  
**以上方法都不会对原字符串进行修改，而是返回一个新的**

## 五、正则表达式 ##

### 5.1正则表达式的创建和使用 ###

正则表达式：它是用来定义一些字符串规则：  
计算机可以根据正则表达式，来检查一个字符串是否符合规则，  
若符合，将字符串中符合规则的内容提取出来。  
创建正则表达式：  
语法：var 变量 = new RegExp(“正则表达式”,“匹配模式”);  
在构造函数中可以传递一个匹配模式作为第二个参数可以是:  
i 忽略大小写  
g 全局匹配模式  
正则表达式的方法：  
test(); 使用该方法可以用来检查一个字符串是否符合正则表达式规则，  
符合返回true，不符合返回false

使用字面量来创建正则表达式
                语法：var 变量 = /正则表达式/匹配模式;
    
            创建一个正则表达式，检查一个字符串中是否有a或者b
                使用|表示 或者 的意思    
    
            使用 [] 里的内容也是或的关系
                [ab] == a|b
                [a-z] 任意的小写字母
                [A-Z] 任意的大写字母
                [A-z] 任意字母    
                [0-9] 任意数字
    
                [^ ]表示除了

### 5.2字符串和正则表达式的相关方法 ###

1.split(); 可以见一个字符串拆分成一个数组
                方法中可以传递一个正则表达式为参数，这样方法会根据正则表达式去拆分字符串
                这个方法即使不指定全局匹配，也会全部拆分
    
            2.search(); 可以搜索字符串中是否含有指定内容
                如果搜索到指定内容，则返回第一次出现的索引，如果没有搜索到返回-1
                可以接受一个正则表达式作为参数，根据正则表达式去检索字符串
                search() 只会查找第一个，即使设置了全局匹配也没有用
    
            3.match(); 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
                默认情况match只会找到第一个符合要求的内容，之后就会停止
                我们可以设置正则表达式为全局模式，这样就会匹配到所有的内容
                可以为一个正则表达式设置多个匹配模式，且顺序无所谓
                match()会将匹配到的内容封装到一个数组中返回，
    
            4.replace() 可以将字符串中指定内容替换为新的内容
                参数：
                    第一个参数：指被替换的内容，可以接受一个正则表达式作为参数
                    第二个参数：新内容
                    默认只会替换第一个

### 5.3正则表达式的语法 ###

量词
                通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用
                {n} 正常出现n次
                {m,n} 出现m-n次
                {m,} 出现m次以上
                + 至少一个，相当于{1,}
                * 0个或多个，相当于{0,}
                ? 0个或1个 相当于{0,1}
    
                ^表示开头
                $表示结尾

.在正则表达式中表示任意字符，\表示转义字符
            在正则表达式中，用\. 来表示 .
                          用\\ 来表示 \
    
            注意：在使用构造函数时，由于它的参数是一个字符串，而\是一个转义字符，
                如果使用\则需要使用\\来代替
    
                元字符：
                        \w 表示任意字母、数字、_  [A-z0-9_]
                        \W 表示除了字母、数字、_  [^A-z0-9_]
                        \d 表示任意的数字    [0-9]
                        \D 表示除了数字      [^0-9]
                        \s 表示空格
                        \S 表示除了空格
                        \b 表示单词边界
                        \B 表示除了单词边界

## 六、DOM（Document Objeect Model）文档对象模型 ##

### 6.1DOM ###

浏览器为我们提供了文档节点对象，这个对象时window属性  
可以在页面中直接使用,文档节点代表的是整个网页

<body>
        <button id="btn">这是个按钮</button>
        <script> // 获取到button对象 var btn = document.getElementById("btn"); // 修改按钮的文字 btn.innerHTML = "i'm button"; </script>
    </body>

**DOM的常用方法：  
getElementById() 返回带有指定 ID 的元素。  
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。  
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。  
appendChild() 把新的子节点添加到指定节点。  
removeChild() 删除子节点。  
replaceChild() 替换子节点。  
insertBefore() 在指定的子节点前面插入新的子节点。  
createAttribute() 创建属性节点。  
createElement() 创建元素节点。  
createTextNode() 创建文本节点。  
getAttribute() 返回指定的属性值。  
setAttribute() 把指定属性设置或修改为指定的值。**

### 6.2事件 ###

事件就是用户和浏览器之间的交互行为,比如点击按钮,鼠标移动\\关闭窗口…  
可以在事件对应的属性中设置一些js代码,事件被触发时,代码会被执行

<body>
        
        
        <button id="btn" onclick="alert('点我');">我是一个按钮</button>
    
        <script> // 获取按钮对象 var btn = document.getElementById("btn"); /* 可以为按钮的对应事件绑定处理函数的形式来响应事件 */ // 绑定一个单击事件 btn.onclick = function(){ alert("你点我"); }; </script>
    </body>

### 6.3文档的加载 ###

浏览器在加载一个页面时,是按照自上而下的顺序加载的,如果将script标签  
写到页面的上边,在代码执行时,页面还没有加载,页面的DOM对象也没有加载,  
会导致无法获取到DOM对象.

onload事件会在整个页面加载完成之后才触发  
为window绑定一个onload事件  
该事件对应的响应函数将会在页面加载完成之后执行,  
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

### 6.4内联样式的修改和读取 ###

**通过js修改元素样式**  
语法: 元素.style.样式 = “样式值”;

如果css样式名中有 - ,例如background-color,  
像这种样式在js中去掉- 使用驼峰命名法 backgroundColor

通过style属性设置的样式都是内联样式,内联样式具有较高的优先级,js修改后会立即显示

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> #box1{ height: 100px; width: 100px; background-color: greenyellow; } </style>
    
        <script> window.onload = function(){ // 点击按钮,修改box1的大小和颜色 // 获取按钮对象 var button01 = document.getElementById("button01"); button01.onclick = function(){ box1.style.height = "300px"; box1.style.width = "300px"; box1.style.backgroundColor = "black"; }; // 点击按钮2后,显示元素样式值 var button2 = document.getElementById("button02"); button2.onclick = function(){ // 语法: 元素.style.样式 // 通过style属性设置和读取的样式都是内联样式,无法读取样式表中的样式 alert(box1.style.backgroundColor); }; }; </script>
    </head>
    <body>
        <div id="box1"></div>
        <button id="button01">超级变变变</button>
        <button id="button02">读取样式值</button>
    </body>
    </html>

### 6.5其他与样式相关的属性 ###

1.clientWidth、clientHeight  
这两个属性可以获取元素的可见宽度和高度  
这些属性都是不带px的，返回都是一个数字，可以直接计算  
会获取元素的宽度和高度，包括内容区和内边距；这些属性只能读，不能修改

2.offsetWidth、offsetHeight  
获取元素的整个宽度和高度，包括内容区、内边距、边框

3.offsetParent 可以用来获取当前元素的定位父元素  
获取离当前元素最近的开启了定位的祖先元素  
如果所有祖先都没有开启定位，则返回body

4.offsetLeft 当前元素相对于其定位父元素的水平偏移量  
offsetTop 当前元素相对于其定位父元素的垂直偏移量

5.scrollWidth 可以获取元素整个滚动区域的宽度  
scrollHeight 可以获取元素整个滚动区域的高度  
scrollLeft 可以获取水平滚动条滚动的距离  
scrollTop 可以获取垂直滚动条滚动的距离

6.当scrollHeight - scrollTop == clientHeight 说明垂直滚动条滚到底了  
当scrollWidth - scrollLeft == clientWidth 说明水平滚动条滚到底了

### 6.6事件的冒泡（Bubble） ###

事件的冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。  
不希望发生事件的冒泡可以通过事件对象来取消冒泡。

### 6.7事件的委派 ###

指事件统一绑定给元素的共同祖先，这样当后代元素上的事件触发时，会一直冒泡到祖先元素。从而通过祖先元素的响应函数来处理事件。  
事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script> window.onload = function(){ // 获取ul对象 var ul = document.getElementById("ul"); // 为btn添加一个单击响应函数 var btn = document.getElementById("btn"); btn.onclick = function(){ //创建一个li var li = document.createElement("li"); li.innerHTML = "<a href='javascript:;' class='link'>新建超链接</a>" // 将li添加到ul中 ul.appendChild(li); }; // 只绑定一次事件而运用到多个元素上，即使元素是后添加的 ul.onclick = function(event){ event = event || window.event; // target表示触发事件的对象 if(event.target.className == "link"){ alert("我是ul响应函数"); } }; }; </script>
    </head>
    <body>
    
        <button id="btn">添加超链接</button>
        <ul id="ul" style="background-color: chartreuse;">
            <li><a href="javascript:;" class="link">超链接</a></li>
            <li><a href="javascript:;" class="link">超链接</a></li>
            <li><a href="javascript:;" class="link">超链接</a></li>
        </ul>
    </body>
    </html>

### 6.8滚轮事件 ###

onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，火狐不支持该属性。火狐需要使用DOMMouseScroll来绑定滚动事件，该事件需要通过addEventListener()函数来绑定。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> #box1{ width: 100px; height: 100px; background-color: chartreuse; } </style>
    
        <script> window.onload = function(){ // 当鼠标滚轮向下滚动时，box1变长，当滚轮向上滚动时，box1变短 var box1 = document.getElementById("box1"); box1.onmousewheel = function(event){ event = event || window.event; // event.wheelDelta可以获取鼠标滚轮滚动的方向，向上为正，向下为负 // 在火狐中使用event.detail来获取滚动的方向，向上为负，向下为正 if(event.wheelDelta > 0 || event.detail <0){ // 向上滚，box1变短 box1.style.height = box1.clientHeight-10+"px"; }else{ // 向下滚,box1变长 box1.style.height = box1.clientHeight+10+"px"; } /* 使用addEventListener()方法绑定响应函数，取消默认行为时需要使用event来取消 默认行为event.preventDefault(); */ // 当滚动条滚动时，如果浏览器有滚动条，滚动条会随之滚动， // 这是浏览器默认行为，加入return false取消即可。 return false; }; }; </script>
    </head>
    <body style="height: 2000px;">
        <div id="box1"></div>
    </body>
    </html>

### 6.9键盘事件 ###

onkeydown 按键被按下，一直按着按键，事件会一直触发  
onkeyup 按键被松开  
键盘事件一般都会绑定给一些可以获取焦点的对象或者是document

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script> window.onload = function(){ document.onkeydown = function(event){ console.log("按下"); event = event || window.event; /* 可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下 altKey、ctrlKey、shiftKey 这三个用来判断alt ctrl shift是否被按下，是返回true，不是返回false */ // 判读y和ctrl是否被同时按下 if(event.keyCode === 89 && event.ctrlKey){ console.log("y和ctrl被同时按下"); } }; document.onkeyup = function(){ console.log("弹起"); }; var input = document.getElementsByTagName("input")[0]; input.onkeydown = function(event){ event = event || window.event; // 让文本不能输入数字 // 在文本框输入内容，属于onkeydown的默认行为，取消默认行为，输入的内容不会出现在文本框中 // 数字编码48-57 小键盘上的数字编码为96-105 if(event.keyCode>=96 && event.keyCode<=105){ return false; } }; }; </script>
    </head>
    <body>
        <input type="text">
    </body>
    </html>

## 七、BOM ##

BOM--浏览器对象模型，BOM可以使我们通过js来操作浏览器
            BOM对象：
                1.window 代表的是整个浏览器窗口，同时window也是网页中的全局对象
                2.Navigator 代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器
                3.Locaton 代表当前浏览器的地址栏信息，通过Locatin可以获取地址栏信息，或者操作浏览器跳转页面
                4.History 操作浏览器向前或向后翻页，该操作只在当次访问时有效
                5.Screen 代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息

### 7.1Navigator ###

1.appName 属性返回浏览器的应用程序名称：
                    2.userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串包含有
                        用来描述浏览器信息的内容，不同的浏览器有不同的userAgent
                    3.appCodeName 属性返回浏览器的应用程序代码名称：

### 7.2History ###

1.length属性，可以获取当前访问的链接数量
                    2.back(); 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
                    3.forward(); 可以跳转到下一个页面，作用和浏览器的前进按钮一样
                    4.go(); 可以用来跳转到指定的页面，需要一个整数为参数，n表示前进跳转n个页面，-n表示后退跳转n个页面

### 7.3Location ###

1.直接打印location，可以获取到地址栏的信息（当前页面的完整路径）
                    2.直接将location属性修改为一个完整的路径，或相对路径，页面会自动给跳转到该路径，并且生成相应的记录
                    3.assign(); 用来跳转到其他的页面，作用和直接修改location一样
                    4.reload(); 用于重新加载当前页面，作用和刷新按钮一样，在方法中传递一个true，会强制清空缓存刷新页面
                    5.replace(); 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，不会生成记录，无法使用回退按钮

### 7.4定时调用（定时器） ###

setInterval();  
定时调用,可以将一个函数每隔一段时间调用一次  
参数：  
1.回调函数，该函数会每隔一段时间被调用一次  
2.每次调用间隔的时间，单位是毫秒

返回值：返回一个Number类型的数据，这个数据用来作为定时器的唯一标识  
clearInterval();可以用来关闭一个定时器，需要一个定时器的标识作为参数

### 7.5延时调用 ###

延时调用setTimeout();  
延时调用一个函数时不会立马执行，而是隔一段时间执行，并且只执行一次  
使用clearTimeout(); 关闭一个延时调用

## 八、类的操作 ##

修改box的class属性  
通过修改元素的class属性来间接的修改样式，这样修改一次可以同时修改多个样式。浏览器只需要重新渲染页面一次，性能比较好，这种方式可以使表现和行为进一步分离。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .b1{ width: 100px; height: 100px; background-color: blue; } .b2{ width: 200px; height: 200px; background-color: chartreuse; } </style>
    
        <script> window.onload = function(){ var btn01 = document.getElementById("btn01"); var box1 = document.getElementById("box1"); btn01.onclick = function(){ // addClass(box1,"b2"); // removeClass(box1,"b1"); toggleClass(box1,"b2"); }; }; // 定义一个函数，用来向一个元素中添加指定的class属性值 // 参数: // obj 要添加class属性的元素 // cn 要添加的class值 function addClass(obj,cn){ // 检查obj中是否含有cn if(!hasClass(obj,cn)){ obj.className += " "+cn; } } // 判断一个元素中是否含有指定的class属性值,如果有class,则返回true,没有返回false function hasClass(obj,cn){ // 创建一个正则表达式 var reg = new RegExp("\\b"+cn+"\\b"); return reg.test(obj.className); } // 删除一个元素中的指定class属性 function removeClass(obj,cn){ // 创建一个正则表达式 var reg = new RegExp("\\b"+cn+"\\b"); // 删除class obj.className = obj.className.replace(reg,""); } // 定义一个切换类toggleClass,元素中具有该类则删除,没有该类则添加 function toggleClass(obj,cn){ // 判断obj中是否含有cn if(hasClass(obj,cn)){ removeClass(obj,cn); //有就删除 }else{ addClass(obj,cn); //没有就添加 } } </script>
    </head>
    <body>
        <button id="btn01">点击按钮修改box的样式</button>
        <br><br>
        <div id="box1" class="b1"></div>
    </body>
    </html>

## 九、JSON（JavaScript Object Notation）JS对象表示法 ##

JSON（JavaScript Object Notation）JS对象表示法
                JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
                并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。
    
                JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须要加双引号，其他的和JS语法一致
    
                JSON分类：
                    1.对象
                    2.数组
    
                JSON中允许的值：
                    1.字符串
                    2.数值
                    3.布尔值
                    4.null
                    5.对象
                    6.数组
    
    
    
            将JSON字符串转化为JS中的对象，在JS中，有一个工具类叫做JSON
                这个对象可以将JSON转换为JS对象，也可以将一个JS对象转换为JSON
         
    
    		 json--> js对象
    	 	JSON.parse();可以将JSON字符串转为JS对象，需要一个JSON字符串作为参数，会将该字符串转为JS对象并返回。
    
    
            JS对象-->JSON
            JSON。stringify(); 可以将一个JS对象转换位JSON字符串，需要一个js对象作为参数，会返回一个JSON字符串

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
    </head>
    <body>
        <script> var arr = '[1,2,3,"hello",true]'; var obj2 = '{"arr":[1,2,3]}'; var arr2 = '[{"name":"李白","age":18,"gender":"男"},{"name":"杜甫","age":18,"gender":"男"}]' var json = '{"name":"李白","age":18,"gender":"男"}'; var o = JSON.parse(json); console.log(o.gender); var o2 = JSON.parse(arr); console.log(o2[1]); var obj3 = { name:"网三",age:16,sex:"男"}; var str = JSON.stringify(obj3); console.log(str); </script>
    </body>
    </html>