【前端】黑马JS-CSDN博客

本文链接：https://blog.csdn.net/qq_26127905/article/details/134408542

文章目录

1.JS基础
2.WebApis
3.jQuery

【前端目录贴】

1.JS基础

1.1JS介绍

1.1.1JS组成

1.1.2写法

行内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1.行内式的js,直接写到元素的内部-->
<input type="button" value="唐伯虎" onclick="alert('陈彦杰')">
</body>
</html>

内嵌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--2.内嵌式的js-->
    <script>
        alert("沙漠骆驼");
    </script>
</head>
<body>
</body>
</html>

外部

引用外部 JS文件的 script 标签中间不可以写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--3.外部方式-->
    <script src="L01Demo1.js"></script>
</head>
<body>
</body>
</html>

1.1.3注释

//
/**/

1.1.4JavaScript 输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

1.1.5变量的使用

声明+赋值

var age;//声明
age=10;//初始化

声明的同时赋值(变量的初始化)

var age=10;

弹出一个输入框，提示用户输入姓名。弹出一个对话框，输出用户刚才输入的姓名。

 <script>
        var name='张三';
        name=prompt('请输入姓名:');
        alert('你的名字时:'+name);
    </script>

1.1.6变量命名规范

 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
 严格区分大小写。var app; 和 var App; 是两个变量
 不能以数字开头。 18age 是错误的
 不能是关键字、保留字。例如：var、for、while
 变量名必须有意义。 MMD BBD nl → age
 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
 推荐翻译网站：有道爱词霸

1.1.7声明变量特殊情况

情况	说明	结果
var age ; console.log (age);	只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10; console.log (age);	不声明只赋值	10

1.2变量的数据类型

1.2.1JavaScript 是一种弱类型或者说动态语言

这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10; // 这是一个数字型
var areYouOk = ‘是的’; // 这是一个字符串

1.2.2数据类型

 简单数据类型（Number,String,Boolean,Undefined,Null）/基本数据类型。
 复杂数据类型（object)/引用数据类型。

所有基本数据类型7个: 未定义 (Undefined)，空 (Null)，数字 (Number)，字符串 (String)，布尔值 (Boolean)，符号 (Symbol)，任意大整数 (BigInt)
引用数据类型: 对象Objec, 数组Array,函数Function,日期Date,正则RegExp,Map,Set,WeakMap ,WeakSet

1.2.2.1基本数据类型

1.2.2.2数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

var age = 21; // 整数
var Age = 21.3747; // 小数
alert(Number.MAX_VALUE); // 1.7976931348623157e+308 ,最大值
alert(Number.MIN_VALUE); // 5e-324 最小值
alert(Infinity); // Infinity 代表无穷大，大于任何数值
alert(-Infinity); // -Infinity 代表无穷小，小于任何数值
alert(NaN); // NaN Not a number，代表一个非数值

isNaN() //用来判断一个变量是否为非数字的类型，返回 true 或者 false
isNaN(x);//x不是数字,返回true,x是数字,返回false,

二进制(0B/ob)
八进制(0o/0O)
十六进制(0x/0X)

1.2.2.3字符串类型String

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’'
因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法


//JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)
var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

转义符

方法:

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); //  length 属性可以获取整个字符串的长度。

//字符串 + 任何类型 = 拼接之后的新字符串
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112



//字符串拼接加强
console.log('pink老师' + 18); // 只要有字符就会相连
var age = 18;
// console.log('pink老师age岁啦'); // 这样不行哦
console.log('pink老师' + age); // pink老师18
console.log('pink老师' + age + '岁啦'); // pink老师18岁啦

1.2.2.4布尔类型Boolean

//布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
//布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

表示假6个值为'假':
false（布尔型）
null（用于定义空的或者不存在的引用）
undefined（未定义值）
0（数值型）
空字符串‘’（字符串型）
NaN (是 “Number” 类型的一种特殊值)

表示真
除了这 6 个外，其它均为“真” ，包括对象、数组、正则、函数等。注意 '0'、'null'、'false'、{}、[]也都是真值

1.2.2.5Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
var num=undefined;
console.log(num);//underfined
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

1.2.3获取变量数据类型 typeof

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

1.2.4数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的

1.2.4.1 转换为字符串类型

方式	说明	案例
soString()	转成字符串	var num=1;alert(num.toString());
String()强制转换	转成字符串	var num=1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num +“我是字符串”);

 toString() 和 String() 使用方式不一样。
 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

1.2.4.2 转换为数字型

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

1.2.4.3 转换为布尔型

 代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined
 其余值都会被转换为 true

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

1.2.5复杂数据类型

1.2.5.1数组

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

//创建数组

==============// 利用  new 创建数组 
var arr = new Array();   // 创建一个新的空数组	 


==============// 利用数组字面量创建数组(声明并赋值称为数组的初始化)
//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',12,true,28.9]

获取数组元素

======================索引
// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]); 


alert(arrStus.length);  // 3 数组长度

1.3标识符

1.4运算符

1.4.1比较运算符

var num1=18;
var num2='18';
console.log(num1==num2);//true
console.log(num1===num2);//false

1.4.2逻辑运算符

console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

1.5断点调试

断点调试可以帮我们观察程序的运行过程浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

1.6JS函数

函数在使用时分为两步：声明函数和调用函数。

function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum
注意：在JavaScript中，形参的默认值是undefined。

============声明函数
function 函数名() {
    //函数体代码
}

============调用函数
函数名();  // 通过调用函数名来执行函数体代码,不要忘记添加小括号


// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

=================return 语句
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值
----函数都是有返回值的
----在使用 return 语句时，函数会停止执行，并返回指定的值
----如果函数没有 return ，返回的值是 undefined

1.6.2arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：具有 length 属性按索引方式储存数据不具有数组的 push , pop 等方法

1.6.3函数的两种声明方式

自定义函数方式(命名函数)

// 声明定义方式
function fn() {...}
// 调用  
fn(); 

== 因为有名字，所以也被称为命名函数
== 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

函数表达式方式(匿名函数）

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();



==因为函数没有名字，所以也被称为匿名函数
==这个fn 里面存储的是一个函数  
==函数表达式方式原理跟声明变量方式是一致的
==函数调用的代码必须写到函数体后面

1.7作用域

JavaScript（es6前）中的作用域有两种：

全局作用域 ==>(作用于所有代码执行的环境(整个 **script **标签内部)或者一个独立的 js 文件。)
局部作用域（函数作用域)==>作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

JS 没有块级作用域(在ES6之前) =>块作用域由 { } 包括。

if (true) {
            var num=123;
            console.log(num);//123
        }
        console.log(num);//123

1.7.2变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：

全局变量
局部变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量是全局变量
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用)

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量

   function fun1() {
        var num1='3';
        num2='4';  //特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用
    }
    fun1();
    //console.log(num1);//错误
    console.log(num2);//4

1.7.3 作用域链

只要是代码，就至少有一个作用域写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

function f1() {
    var num = 123;
    function f2() {
        console.log( num );//123
    }
    f2();
}
var num = 456;//456
f1();

var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值4
            console.log(b); //b的值 '22'
        }
    }
}
fn1();

1.8预解析

1.8.1介绍

 console.log(num);  // 结果是多少？=>报错

console.log(num);  // 结果是多少？=>undefined
var num = 10;

 fun();//输出打印
    function fun() {
        console.log('打印');

}

fun2();//==>报错
var fun2= function() {
   console.log('打印');
}

1.8.2变量预解析

变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

console.log(num);  // 结果是多少？=>undefined
var num = 10;
console.log(num);  // 结果是多少？=>10

1.8.3函数预解析

函数提升：函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

1.8.4案例

var num = 10;
fun();//10
   function fun() {
      console.log(num);
        //var num = 20;
}

=============
var num = 10;
fun();//undefined
function fun() {
   console.log(num);
   var num = 20;
}
============
var num = 10;
   function fn(){
   console.log(num);//undefined
   var num = 20;
   console.log(num);//20
}
fn();
============
  f1();
    console.log(c);//9
    console.log(b);//9
    console.log(a);//报错
    function f1() {
        var a = b = c = 9;//9  b,c相当于没有var
        console.log(a);//9
        console.log(b);//9
        console.log(c);//9
    }
===========

1.9JS对象

1.9.1.创建对象

方式一 利用字面量创建对象 
		对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
		{} 里面采取键值对的形式表示
  	var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
   		 }
		};
	
方式二  利用 new Object 创建对象
  	var andy = new Object();
		andy.name = 'pink';
		andy.age = 18;
		andy.sex = '男';
		andy.sayHi = function(){
   	alert('大家好啊~');
		}

方式三  利用构造函数创建对象
  	function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sayHi = function() {
            alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
        }
    }
    var bigbai = new Person('大白', 100, '男');
    var smallbai = new Person('小白', 21, '男');
    console.log(bigbai.name);
    console.log(smallbai.name);
    console.log(smallbai.sayHi());


如果对象中有函数：
var o = {
  property: function ([parameters]) {}
};
简写形式：
var o = {
  property([parameters]) {}
};

调用方式:
	 对象.属性名
	 对象['属性名']
	 对象里面的方法调用：对象.方法名()

构造函数

构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。在 js 中，使用构造函数要时要注意以下两点：
构造函数用于创建某一类对象，其首字母要大写(不强制,为了和普通函数的区别)
构造函数要和 **new **一起使用才有意义

注意

构造函数约定首字母大写。
函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
构造函数中不需要 return 返回结果。
当我们创建对象的时候，必须用 new 来调用构造函数。

注意事项

//当你定义一个对象，并且属性名和变量名相同时，可以使用属性名简写来简化代码。
const name = "Alice";
const age = 30;

// 使用属性名简写
const person = {
  name, // 等同于 name: name
  age  // 等同于 age: age
};

console.log(person); // { name: "Alice", age: 30 }
-----------------------------------------------------------
//****如果键不是有效的标识符,必须使用引号（单引号或双引号）括起来。这通常适用于包含空格、特殊字符、数字开头或保留字作为键名的情况。
const obj = {
  "first name": "Alice",
  "age-2023": 30,
  "1st-prize": "Car",
  "class": "A"
};

1.9.2for…in

for…in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) {
    // 在此执行代码
}
===语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。
for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

1.9.3 js原型对象

function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function() {
        alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
    }
}
var bigbai = new Person('大白', 100, '男');
console.log(bigbai)
console.log(bigbai.__proto__)//隐式原型属性 ->>原型对象,原型对象只有1个
console.log(Person)
console.log(Person.prototype);//显示原型属性 ->>原型对象
console.log(Person.prototype===bigbai.__proto__);//true

//程序员通过显示原型属性操作原型对象,追加一个x属性,值为99
Person.prototype.x=99
console.log(bigbai.__proto__.x)

1.10JS内置对象

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象.

前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于我们JS 独有的，我们JS API 讲解

内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

https://developer.mozilla.org/zh-CN/

1.10.1Math内置对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

 console.log(Math.PI);//圆周率
    console.log(Math.floor(1.5));//1 向下取整 
    console.log(Math.ceil(1.4));//2 向上取整 
    console.log(Math.round(1.4));//1 四舍五入版 就近取整   注意 -3.5   结果是  -3
    console.log(Math.round(1.5));//2 四舍五入版 就近取整   注意 -3.5   结果是  -3
    console.log(Math.abs(-4));// 4 绝对值
    console.log(Math.max(1,4));//4 求最大和最小值
    console.log(Math.min(1,5));//1 求最大和最小值 

随机数方法 random();//random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1 
Math.random();

1.10.2日期内置对象

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
Date 实例用来处理日期和时间

//获取当前时间必须实例化
var now = new Date();
console.log(now);//Wed Feb 08 2023 00:23:44 GMT+0800 (中国标准时间)

//Date() 构造函数的参数
//如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date('2019-5-1')  或者 new Date('2019/5/1')
//如果Date()不写参数，就返回当前时间
//如果Date()里面写参数，就返回括号里面输入的时间

  var now = new Date('2019-5-2 01:02:13');
    console.log(now);//Wed Feb 08 2023 00:23:44 GMT+0800 (中国标准时间)
    console.log(now.getFullYear())//2019
    console.log(now.getMonth())//4
    console.log(now.getDate())//2
    console.log(now.getDay())//4
    console.log(now.getHours())//1
    console.log(now.getMinutes())//2
    console.log(now.getSeconds())//13


function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }

获取日期的总的毫秒形式

 // 实例化Date对象
    var date = new Date();
    // 1. 用于获取对象的原始值
    console.log(date.valueOf())//1675787444402
    console.log(date.getTime())//1675787444402
    // 2. 简单写可以这么做
    var now = + new Date();
    console.log(now)//1675787444402
    // 3. HTML5中提供的方法，有兼容性问题
    var now = Date.now();
    console.log(now);//1675787444402

1.10.3数组内置对象

1.10.3.1检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

1.10.3.2添加删除数组元素的方法

在这里插入图片描述

  var arr1=[1,2,3];
    console.log( arr1.push(4));//4
    console.log(arr1.pop());//4
    console.log(arr1.unshift(6));//4
    console.log(arr1.shift(6));//6
    for (let i = 0; i < arr1.length; i++) {
        console.log(arr1[i]);
    }

splice 3个参数说明splice (start,1,A,B,C):

start 参数：这个参数指定了开始修改的位置索引。它是必需的，表示修改开始的位置。如果该值为负数，则表示从数组末尾开始计算索引。
deleteCount 参数：这个参数是可选的，指定了要删除的元素的数量。如果省略该参数，则会删除从 start 位置到数组末尾的所有元素。如果该值为0或负数，则不会删除任何元素。
item1, item2, ... 参数：这些参数表示要插入到数组中的新元素。它们是可选的，可以有一个或多个，用逗号分隔。

1.10.3.3数组索引

1.10.3.4数组转化为字符串

1.10.4字符串内置对象

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

1.10.5简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

* 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string ，number，boolean，undefined，null
* 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

2.WebApis

2.1DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

2.1.1 DOM 树

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看做是对象

2.1.2如何获取页面元素

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

2.1.2.1使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id');

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

 <input id="butId" type="button" name="提交" value="提交"/>
    <!--因为我们文档页面从上往下加载,所以得现有标签,所以我们script写到标签的下面-->
    <script>
        var btnn=document.getElementById('butId');
        console.log(btnn);//<input id="butId" type="button" name="提交" value="提交"/>
        console.log(typeof btnn);//object
        console.dir( btnn);
    </script>

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

document.getElementsByTagName('标签名');

注意：
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的

2.1.2.3通过 HTML5 新增的方法获取

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
 document.querySelectorAll('选择器'); // 根据指定选择器返回

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

2.1.2.4获取特殊元素（body，html）

doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象

2.1.3事件

2.1.3.1事件三要素

事件源（谁）
2. 事件类型（什么事件）
3. 事件处理程序（做啥
案例：点击按钮弹出警示框

 <!--<button id="butt" value="提交">订单</button>-->
    <input id="butId" type="button" name="提交" value="提交"/>
    <!--因为我们文档页面从上往下加载,所以得现有标签,所以我们script写到标签的下面-->
    <script src="demo1.js">
        var btnn=document.getElementById('butId');
        btnn.onclick=function (d) {
            alert('你好吗');
        }
    </script>

2.1.3.2执行事件的步骤

获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

2.1.3.3常见的鼠标事件

2.1.4操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内
容、属性等。注意以下都是属性

2.1.4.1 改变元素内容

element.innerText //从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML //起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

var div = document.querySelector('div');
div.innerText = '<strong>今天是：</strong> 2019';
div.innerHTML = '<strong>今天是：</strong> 2019';

2.1.4.2常用元素的属性操作

innerText、innerHTML 改变元素内容
src、href
id、alt、title

2.1.4.3表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：

type、value、checked、selected、disabled

2.1.4.4可以通过 JS 修改元素的大小、颜色、位置等样式。

1. element.style 行内样式操作
2. element.className 类名样式操作

注意：
1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

注意：
1. 如果样式修改较多，可以采取操作类名方式更改元素样式。
2. class因为是个保留字，因此使用className来操作元素类名属性
3. className 会直接更改元素的类名，会覆盖原先的类名



var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }

我们可以通过 JS 修改元素的大小、颜色、位置等样式

2.1.4.5自定义属性的操作

1. 获取属性值
 element.属性获取属性值。
 element.getAttribute(‘属性’);

区别：
 element.属性获取内置属性值（元素本身自带的属性）
 element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

2. 设置属性值
 element.属性 = ‘值’ 设置内置属性值。
 element.setAttribute(‘属性’, ‘值’);

区别：
 element.属性设置内置属性值
 element.setAttribute(‘属性’); 主要设置自定义的属性（标准）

3. 移除属性
 element.removeAttribute(‘属性’);

2.1.4.6 获取焦点

element.focue();

2.1.5节点操作

获取元素通常使用两种方式：

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以
创建或删除。

2.1.5.1节点概述

父节点

node.parentNode
// parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
// 如果指定的节点没有父节点则返回 null

子节点

parentNode.childNodes（标准）
// parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
// 注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
// 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes



var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {
// ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i]);
}
}

parentNode.children（非标准）
// parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返
// 回 （这个是我们重点掌握的）。
// 虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

parentNode.firstChild // firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点
parentNode.lastChild//lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.firstElementChild //firstElementChild 返回第一个子元素节点，找不到则返回null。
parentNode.lastElementChild //lastElementChild 返回最后一个子元素节点，找不到则返回null
//注意：这两个方法有兼容性问题，IE9 以上才支持。

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案：
1.如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
2.如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

兄弟节点

node.nextSibling //返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
node.previousSibling //返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

node.nextElementSibling //返回当前元素下一个兄弟元素节点，找不到则返回null。
node.previousElementSibling //返回当前元素上一个兄弟节点，找不到则返回null。
//注意：这两个方法有兼容性问题， IE9 以上才支持。

创建节点

document.createElement('tagName')
//document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，
//是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点

node.appendChild(child) //node.appendChild() 方法将一个节点添加到
//指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。


 node.insertBefore(child, 指定元素)//node.insertBefore() 方法将一个节点添加到父节点的指定
//子节点前面。类似于 CSS 里面的 before伪元素。

删除节点

node.removeChild(child)//node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

复制节点(克隆节点)

node.cloneNode()

注意：
1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

2.1.6三种动态创建元素区别

 document.write()
 element.innerHTML
 document.createElement()

区别

document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML 效率要比 creatElement 高

2.1.7DOM 重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

2.1.7.1创建

1.document.write
2.innerHTML
3.createElement

2.1.7.2增

appendChild
2. insertBefore

2.1.7.3删

1.removeChild

2.1.7.4改

主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
1.修改元素属性： src、href、title等
2.修改普通元素内容： innerHTML 、innerText
3.修改表单元素： value、type、disabled等
4.修改元素样式： style、className

2.1.7.5查

主要获取查询dom的元素
1.DOM提供的API 方法： getElementById、getElementsByTagName 古老用法不太推荐
2. H5提供的新方法： querySelector、querySelectorAll 提倡
3.利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling) 提倡

2.1.7.6属性操作

主要针对于自定义属性。
1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute移除属性

2.1.7.7事件操作

<a name="oqlkx"></a>

2.1.8 常用样式记录

// 获取元素的当前 visibility 状态
var visibility = document.getElementById('aa').style.visibility;
// 设置元素的 visibility 为 hidden，使其不可见但保留布局空间
document.getElementById('aa').style.visibility = 'hidden';
// 设置元素的 visibility 为 visible，使其可见
document.getElementById('aa').style.visibility = 'visible';

2.2高级事件

2.2.1注册事件（绑定事件)

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式

2.2.1.1addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对
象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
 type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
 listener：事件处理函数，事件发生时，会调用该监听函数
 useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触
发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数：
 eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
 callback：事件处理函数，当目标触发事件时回调函数被调用
注意：IE8 及早期版本支持

2.2.1.2注册事件兼容性解决方案

function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}

//兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器

2.2.2删除事件（解绑事件）

删除事件的方式

2.2.2.1删除事件兼容性解决方案

function removeEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 removeEventListener 方法
if (element.removeEventListener) {
element.removeEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}

2.2.3DOM事件流

事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
事件捕获：网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

2.2.3.1概念.

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

注意

JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理
程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

2.2.4事件对象

2.2.4.1什么是事件对象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {}）
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法

比如：

谁绑定了这个事件。
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

2.2.4.2事件对象的使用语法

eventTarget.onclick = function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}）

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

2.2.4.3事件对象的兼容性方案

事件对象本身的获取存在兼容问题：

标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
解决: e = e || window.event;

2.2.4.4 事件对象的常见属性和方法

https://www.zhihu.com/question/587417141/answer/2920447892

e.target 和 this 的区别：
this 是事件绑定的元素，这个函数的调用者（绑定这个事件的元素）
e.target 是事件触发的元素。

2.2.4.5事件委托（代理、委派）

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。程序中也有如此场景：

事件委托
事件委托也称为事件代理，在 jQuery 里面称为事件委派.
事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，
ul 有注册事件，就会触发事件监听器。

事件委托的作用
我们只操作了一次 DOM ，提高了程序的性能

2.2.5常用的鼠标事件

1.常用的鼠标事件

//contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

2.禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
e.preventDefault();
})

3.event

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象
MouseEvent 和键盘事件对象 KeyboardEvent。

2.2.6常用的键盘事件

注意：
1. 如果使用addEventListener 不需要加 on
2. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
3.三个事件的执行顺序是： keydown – keypress — keyup
** keyup是按下并抬起, keydown按下.**

document.addEventListener('keyup', function () {
        console.log('我弹起了');
    })
    //
    3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
    document.addEventListener('keypress', function () {
        console.log('我按下了press');
    })
    2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
    document.addEventListener('keydown', function () {
        console.log('我按下了down');
    })
     4. 三个事件的执行顺序  keydown -- keypress -- keyup

2.2.6.1键盘事件对象

注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。(默认按照小写计算ascii)
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

2.2.6.2ascii表

2.3BOM浏览器对象模型

2.3.1概述

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏
览器标准的一部分。

BOM 比 DOM 更大，它包含 DOM。

window 对象是浏览器的顶级对象，它具有双重角色。

它是 JS 访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
注意：window下的一个特殊属性 window.name

2.3.2window 对象的常见事件

2.3.2.1窗口加载事件console

window.onload = function(){}
或者
window.addEventListener("load",function(){});

document.addEventListener('DOMContentLoaded',function(){}

sewindow.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
文件等), 就调用的处理函数。
注意：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，
再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用
户的体验，此时用 DOMContentLoaded 事件比较合适

 window.onload = function () {
        console.log("onload加载")
        var elementsByTagName = document.getElementsByTagName('button');
        elementsByTagName[0].addEventListener('click', function () {
            alert('点击了22');
        });
    };

============================================

   window.addEventListener('load', function () {
        console.log('加载了111');
        var elementsByTagName = document.getElementsByTagName('button');
        elementsByTagName[0].addEventListener('click', function () {
            alert('点击了');
        });

    });

2.3.2.2调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){});

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
注意：

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

 window.onresize = function () {
        alert('调整窗口打消了');
    };
    window.addEventListener("resize", function () {
        alert('调整窗口打消22了');
    });

2.3.3两种定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。
 setTimeout()
 setInterval()

2.3.3.1setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

window.clearTimeout(timeoutID)//取消了先前通过调用 setTimeout() 建立的定时器。


var timer1 = setTimeout(callback, 3000);
    var timer2 = setTimeout(callback, 5000);
    function callback() {
        console.log('爆炸了');
    }

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

2.3.3.2setInterval() 定时器

window.setInterval(回调函数, [间隔的毫秒数]);
//setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

2.3.4this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this
的最终指向的是那个调用它的对象
现阶段，我们先了解一下几个this指向

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例

2.3.5执行队列

2.3.6location 对象

window 对象给我们提供了一个** location 属性用于获取或设置窗体的 URL**，并且可以用于解析 URL 。因为
这个属性返回的是一个对象，所以我们将这个属性也称为** location 对象**。

**统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。**互联网上的每个文件都有
一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

location 对象的属性

location 对象的方法

2.3.7navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}

2.3.8history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

2.3.9浏览器本地存储对象localStorage和sessionStorage

window.localStorage.setItem('msg3',123);//新增
window.localStorage.getItem('msg3')//获取
window.localStorage.removeItem('person')//移除1个
window.localStorage.clear()//移除所有

window.sessionStorage.setItem('msg3',123);//新增
window.sessionStorage.getItem('msg3')//获取
window.sessionStorage.removeItem('person')//移除1个
window.sessionStorage.clear()//移除所有

区别:
sessionStorage 存储的数据在页面会话结束时（通常是当用户关闭浏览器标签页或窗口时）会被清除。重要的是，sessionStorage 的作用域是限定在单个标签页（或称为浏览器上下文）内的。
当你在一个浏览器中打开两个相同的网页（无论是通过两个独立的标签页、窗口，还是通过不同的浏览器实例），每个网页实例都会拥有自己独立的 sessionStorage 空间。这是因为每个标签页或窗口都被视为一个独立的“会话上下文”。因此，在一个标签页中存储到 sessionStorage 的数据，在另一个标签页中是无法访问到的

2.3.10 常用函数记录

2.3.10.1 获取url后续参数

方式一

// 假设当前 URL 是 "http://example.com/page?name=John&age=30"
const queryString = window.location.search; // "?name=John&age=30"
const params = new URLSearchParams(queryString);
name=params.get("name"); //John ,如果key不存在,则返回null

方式二

// 假设当前 URL 是 "http://example.com/page?name=John&age=30"
  function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    }
    return null;
  }
name=getQueryString("name")//John ,如果key不存在,则返回null

2.4PC 端网页特效

2.4.1元素偏移量 offset 系列

2.4.1.1offset 与 style 区别

2.4.2元素可视区 client 系列

2.4.3元素滚动 scroll 系列

2.4.4动画函数封装

2.4.5常见网页特效案例

3.jQuery

3.1介绍

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

3.2jQuery 的基本使用

3.2.1jQuery 的下载

官网地址： https://jquery.com/
各个版本的下载：https://code.jquery.com/

版本：
1x ：兼容 IE 678 等低版本浏览器，官网不再更新
2x ：不兼容 IE 678 等低版本浏览器，官网不再更新
3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

3.2.2jQuery 的入口函数

$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ;

$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

1.等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2.相当于原生 js 中的 DOMContentLoaded。
3.不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。4. 更推荐使用第一种方式。

3.2.3jQuery的顶级对象$

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

3.2.3.1 jQuery 对象和 DOM 对象

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：
只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

3.2.3.2 jQuery 对象和 DOM 对象this.value

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

3.2.3.2.1 DOM 对象转换为 jQuery 对象： $(DOM对象)

1. DOM 对象转换为 jQuery 对象： $(DOM对象)

$('div') 


(1) 我们直接获取视频，得到就是jQuery对象
 $('video');
(2) 我们已经使用原生js 获取过来 DOM对象
var myvideo = document.querySelector('video');
$(myvideo).play();  //jquery里面没有play 这个方法

3.2.3.2.2 jQuery 对象转换为 DOM 对象（两种方式）

$('div') [index]       index 是索引号
$('div') .get(index)    index 是索引号

3.2.4jQuery常用API

3.2.4.1.jQuery选择器

3.2.4.2.jQuery样式操作

$(‘div’).css(‘属性’, ‘值’)

隐式迭代(重要)

// 1. 获取四个div元素
    console.log($("div"));
    console.log($("ul li"));
    // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
    $("div").css("background-color", "blue");
    // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
    $("ul li").css("color", "red");

筛选选择器

3.2.4.3.jQuery 效果

显示隐藏show() 显示元素 hide() 隐藏元素
滑动slideDown(),slideUp(), slideToggle()
淡入淡出== fadeln() fadeOut() fadeToggle() fadeTo()

3.2.4.4.jQuery属性操作

1.参数只写属性名，则是返回属性值
$(this).css(‘‘color’’);
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(‘‘color’’, ‘‘red’’);
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，
$(this).css({ “color”:“white”,“font-size”:“20px”});
backgroundColor: “red” // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
设置类样式方法

添加类 $(“div”).addClass(‘‘current’’);
移除类 $(“div”).removeClass(‘‘current’’);
切换类 $(“div”).toggleClass(‘‘current’’); //如果有,去掉,如果没有加上

类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

3.2.4.4.1设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。

1.获取属性语法

prop(‘‘属性’’)

设置属性语法

prop(‘‘属性’’, ‘‘属性值’’)

3.2.4.4.2设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

获取属性语法
attr(‘‘属性’’) // 类似原生 getAttribute()
设置属性语法
attr(‘‘属性’’, ‘‘属性值’’) // 类似原生 setAttribute()
该方法也可以获取 H5 自定义属性

3.2.4.4.3数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

** 附加数据语法**
data(‘‘name’’,‘‘value’’) // 向被选元素附加数据
获取数据语法
date(‘‘name’’) // 向被选元素获取数据
同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型

3.2.4.5.jQuery文本属性值

主要针对元素的内容还有表单的值操作。

普通元素内容 html()（相当于原生inner HTML)
html() // 获取元素的内容
html(‘‘内容’’) // 设置元素的内容

普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容
text(‘‘文本内容’’) // 设置元素的文本内容

表单的值 val()（相当于原生value)
val() // 获取表单的值
val(‘‘内容’’) // 设置表单的值

3.2.4.6.jQuery 元素操作

3.2.4.6.1遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：
$(“div”).each(function (index, domEle) { xxx; }）

each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：
$.each(object，function (index, element) { xxx; }）

3.2.4.6.2创建元素

语法：
$(‘’

‘’);
动态的创建了一个

3.2.4.6.3添加元素-内部添加

element.append(‘‘内容’’)
把内容放入匹配元素内部最后面，类似原生 appendChild。

element.prepend(‘‘内容’’)
把内容放入匹配元素内部最前面。

3.2.4.6.4添加元素-外部添加

element.after(‘‘内容’’) // 把内容放入目标元素后面
element.before(‘‘内容’’) // 把内容放入目标元素前面
①内部添加元素，生成之后，它们是父子关系。
②外部添加元素，生成之后，他们是兄弟关系。

3.2.4.6.5删除元素

element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html(‘’‘’) // 清空匹配的元素内容

①remove 删除元素本身。
②empt() 和 html(‘’‘’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容

3.2.4.7.jQuery尺寸、位置操作

3.2.4.7.1.jQuery尺寸

3.2.4.7.2.jQuery位置操作

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

offset() 设置或获取元素偏移
offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性 left、top 。
offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
可以设置元素的偏移：offset({ top: 10, left: 30 });
position() 获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
该方法有2个属性 left、top。
position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
该方法只能获取。
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
scrollTop() 方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部

3.2.4.8事件

事件切换(就是鼠标经过和离开的复合写法)

hover([over],out)
(1)over:鼠标移到元素上要触发的函数（相当于mouseenter）
(2）out:鼠标移出元素要触发的函数（相当于mouseleave）
(3）如果只写一个函数，则鼠标经过和离开都会触发它

 <script>
        $('div').hide();
        $(function () {
            //$('button').eq(0).click(function () {
            //$('button').eq(0).mouseover(function () {
            //    $('div').slideDown();
            //});
            //$('button').eq(0).mouseout(function () {
            //    $('div').slideUp();
            //});
            $('button').eq(0).hover(
                function () {
                $('div').slideDown();
                },
                function () {
                    $('div').slideUp();
                }
            )
            }
        )
    </script>

动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止排队
stop()
(1）stop() 方法用于停止动画或效果。
(2) 注意： stop()必须写到动画或者效果的前面，相当于停止结束上一次的动画。

$('button').eq(2).hover(function () {
   $('div').stop().fadeToggle();
});

3.2.5jQuery事件

3.2.5.1jQuery事件注册

单个事件注册

element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })

其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、input,keydown、keyup、resize、scroll 等
input事件

1.onfocus 当input 获取到焦点时触发
2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。
3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。
4.onkeydown 按下按键时的事件触发，
5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件，没怎么用过
6.onclick 主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件
7.onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中
8.oninput 当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）
使用方法：
以上事件可以直接放到input的属性里，例如：<input type=“text” οnfοcus=“a();” οnblur=“b()” οnchange=“c();” οnkeydοwn=“d();” />，
也可以通过js给input dom元素添加相应的事件，如：document.getElementByTagName(‘input’).onfocus = function();

3.2.5.2jQuery事件处理

事件处理 on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn)

events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。

selector: 元素的子元素选择器。

fn:回调函数即绑定在元素身上的侦听函数。

//可以绑定多个事件，多个处理事件处理程序。
$(“div”).on({
  mouseover: function(){}, 
  mouseout: function(){},
  click: function(){}	
});

//如果事件处理程序相同 
$(“div”).on(“mouseover mouseout”, function() {
   $(this).toggleClass(“current”);
}); 


//可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click', 'li', function() {
    alert('hello world!');
}); //click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

//动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function(){
     alert("俺可以给动态生成的元素绑定事件")
});
$("div").append($("<p>我是动态创建的p</p>"));

事件处理 off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$(“p”).off() // 解绑p元素所有事件处理程序
$(“p”).off( “click”) // 解绑p元素上面的点击事件后面的 foo 是侦听函数名
$(“ul”).off(“click”, “li”); // 解绑事件委托
如果有的事件只想触发一次，可以使用 one() 来绑定事件。

$(function() {
        $("div").on({
            click: function() {
                console.log("我点击了");
            },
            mouseover: function() {
                console.log('我鼠标经过了');
            }
        });
        $("ul").on("click",'li', function() {
            alert(11);
        });
        // // 1. 事件解绑 off
        $("div").off();  // 这个是解除了div身上的所有事件
        $("div").off("click"); // 这个是解除了div身上的点击事件
        $("ul").off("click", "li");
        // // 2. one() 但是它只能触发事件一次
        $("p").one("click", function() {
            alert(11);
        })
    })

自动触发器trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click() // 第一种简写形式
element.trigger(“type”) // 第二种自动触发模式

$(“p”).on(“click”, function () { alert(“hi~”);}); $(“p”).trigger(“click”); // 此时自动触发点击事件，不需要鼠标点击

element.triggerHandler(type) // 第三种自动触发模式

(triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。)

3.2.5.3jQuery事件对象

事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

3.2.6jQuery其他方法

3.2.6.1jQuery拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法

$.extend([deep], target, object1, [objectN])

deep: 如果设为true 为深拷贝，默认为false 浅拷贝

target: 要拷贝的目标对象

object1:待拷贝到第一个对象的对象。

objectN:待拷贝到第N个对象的对象。

浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。

3.2.6.2多库共存

把里面的 $ 符号统一改为 jQuery。比如 jQuery(‘‘div’’)
jQuery 变量规定新的名称：$.noConflict() var xx = $. n o C o n f l i c t (); // 释放 j Q u ery 对于$ 的控制权

3.2.6.3jQuery插件

jQuery 插件常用的网站：

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤：1. 引入相关文件。（jQuery 文件和插件文件） 2. 复制相关html、css、js (调用插件)