《JavaScript学习笔记》

最新推荐文章于 2024-10-19 20:24:35 发布

upkai小蟹

最新推荐文章于 2024-10-19 20:24:35 发布

阅读量343

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_57443155/article/details/121038264

版权

本文详细介绍了JavaScript的基础知识，包括编程、数据类型、运算符、函数、DOM操作以及Web API。重点讲解了DOM的节点操作、事件处理、事件流和事件对象，以及BOM中的window对象、location对象和history对象。此外，还探讨了移动端的触屏事件、本地存储和前端框架。

摘要由CSDN通过智能技术生成

JavaScript编程语言

1.1、编程

编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序：就是计算机所执行的一系列的指令集和，而程序都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令。

1.2、编程语言和标记语言的区别

编程语言：有很强的逻辑和行为能力，这是主动的。
标记语言(html)：不用向计算机发出指令，常用于格式化和链接，标记语言的存在是用来被读取的，他是被动的。

1.3 、程序运行

打开某个程序时，先从硬盘里面把程序的代码加载到内存条里面。
CPU执行内存条中的代码。

JS三部分组成

BOM：通过BOM可以操作浏览器窗口，比如弹出框、控制浏览跳转、获取分辨率等等。

JS三种书写位置

JS有三种书写位置，分别是行内、内嵌和外部。

1、行内式JS

 <!-- 1、行内式的JS 直接写到元素的内部-->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">

可以将单行或少量JS代码写在HTML的标签事件属性中（以on开头的属性）如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中推荐使用单引号。
可读性差，在HTML中编写JS代码时，不方便阅读
引号容易错，引号多层嵌套匹配时非常容易混乱
特殊情况下使用

2、嵌入式JS

 <!-- 2、内嵌式的JS写法 -->
    <script>
        alert('沙漠骆驼');
    </script>

3、外部式JS

<!-- 3、外部是JS写法 -->
    <script src="my.js"></script>

方便文件级别的复用
引用外部js文件的script标签中间不可以写代码
适用于代码量大的情况

JS注释

1、单行注释

//单行注释 快捷键：ctrl + /

2、多行注释

/*
多行注释 快捷键：ctrl + shift + A
可以在vscode中自己修改快捷方式
*/

JavaScript输入输出语句

为了方便信息的输入输出，JS提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制打印输出语句，打印在控制台上，让我们的程序员看的	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

 <script>
        prompt('请输入您的年龄');
        alert('计算的结果是');
        console.log('我是程序员能看到的');//在控制台看
    </script>

变量

1、什么是变量

变量就是用于存放数据的容器
我们可以通过变量名来获取数据，甚至数据可以修改
本质上变量是程序在内存中申请的一块用来存放数据的空间

2、变量的使用

变量在使用时分为两步，1.声明变量 2.赋值
可以用 var 来声明变量，但是最好使用 let 来声明变量比较方便

3、变量使用案例

有i个叫卡卡西的人在旅店登记的时候前台让他填写一张表，这张表的内容要存到电脑上，表中的内容有：姓名、年龄、邮箱、家庭住址和工资，存储之后要把这些信息显示出来，所显示的内容如下：

我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是kakaxi@itcast.cn 我的工资是2000.

 <script>
        let myName = '旗木卡卡西';
        let address = '火影村';
        let age = 30;
        let email = 'kakaxi@itcast.cn';
        let gz = 2000;
        //输出
        console.log(myName);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>

4、变量案例弹出用户姓名

<script>
        // 用户输入姓名 存储到一个叫myName的变量里面
        let myName = prompt('请输入您的姓名');
        // 输出收集到的用户输入的信息
        alert(myName);
    </script>

5、变量语法扩展

更新变量

变量值将以最后一次赋的值为准
同时声明多个变量

只需要写一个var变量即可，中间用英文逗号隔开

声明变量特殊情况

情况	说明	结果
var age; console.log(age);	只声明，不赋值	undifined
console.log(age);	不声明、不赋值、直接使用	报错
age = 10;console.log(age);	不声明，只赋值（不提倡这样来使用）	10

数据类型

1、数据类型的分类

JS把数据类型分为两类：

简单数据类型（Number、String、Boolean、Undefined、Null）

简单数据类型	说明	数据类型
Number	数字型，包含整型和浮点型值( 数字型的最大值为：Number.MAX_VALUE,最小值为：Number.MIN_VALUE)	0
String	字符串类型	''
Boolean	布尔值类型，true、false,相当于 1 和 0	false
Undefined	声明了但是没有赋值	undefined
Null	声明了变量值为空	null

数字型三个特殊值

alert(Infinity);//无穷大，大于任何数值
alert(-Infinity);//无穷小，大于任何数值
alert(NaN);//Not a Number,代表一个非数值

isNaN()：判断非数字，如果是数字返回false 不是数字返回true

<script>
        alert(isNaN(12));
    </script>
//返回false

字符串引号嵌套

JS可以用单引号嵌套双引号，双引号嵌套单引号（外双内单、外单内双）
字符串转义符

转义符都是 \ 开头的，但是这些转义字符要写到引号里面

转义符说明
\n 换行符，n是newline的意思
\ 斜杠\
' ‘单引号
" “双引号
\t tab缩进
\b 空格，b是blank的意思
true 参与加法运算当作 1 来用，false 当作 0 来用
typeof 可用来获取检测变量的数据类型

转义符	说明
\n	换行符，n是newline的意思
\	斜杠\
'	‘单引号
"	“双引号
\t	tab缩进
\b	空格，b是blank的意思

var num = 12;
alert(typeof num);
//返回Number

复杂数据类型（object）

2、数据类型转换

转化为字符串

方式	说明	案例
toString()	转换为字符串	var num = 1;alert(num.toString());
String()强制转换	转换为字符串	var num = 1;alert(String(num));
加号拼接字符串（也称之为隐式转换）	和字符串拼接的都是字符串	var num = 1;alert(num + '我是字符串');

转换为数字型

方式	说明	案例
parseInt(String)函数	将字符串类型转换为整数数值型	parseInt('78')
parseFloat(String)函数	将字符串类型转换为浮点数值型	parseFloat('89.12')
Number()强制转换函数	将String类型强制转换为数值型	Number('12')
js隐式转换（- * /）	利用算术运算隐式转换为数值型	’12‘ - 0

特殊

alert(parseInt('120px'));
//弹出 120

转换为布尔型

方式说明案例
Bollean() 函数其他类型转换为布尔型 Boolean('true');
- 代表空、否定值的会被转换为 false,如：0、NaN、null、undefined
- 其余的都会转换为 true

方式	说明	案例
Bollean() 函数	其他类型转换为布尔型	Boolean('true');

扩展阅读

1、编译和解释语言的区别

翻译器编译的方式有两种：

一个是编译
一个是解释
两种方式之间的区别在于翻译的时间点不同
编译器是代码执行之前编译，生成中间码文件
解释器是运行时进行及时解释，并立即执行（当编译器以解释方式执行的时候，也称之为解释器）

2、标识符、关键字、保留字

标识符不能是关键字和保留字
关键字是 JS 本身已经使用了的字，不能再用他们充当变量名和方法名
保留字就是预留的关键字，虽然现在还不是关键字，但是以后可能会称为关键字，同样不能使用其充当变量名和方法名，像数据类型Boolean char 、public、class......

运算符

1、浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算数运算时其精度远远不如整数。

var result = 0.1 + 0.2;//结果不是0.3，而是0.30000000000000004
console.log(0.07 * 100);//结果不是7，而是7.0000000000001

JavaScript数组

1、数组的创建方式

利用new创建数组

var arr = new Array();//创建了一个空数组

利用数组字面量创建数组 [ ]

var arr = [];//创建了一个空数组
//数组里面可以存放任何类型的元素
var arr1 = [1,'xiaoming',true];

2、获取数组中的元素

根据下标来获取

3、遍历数组

用for循环来遍历

4、数组新增元素

通过修改数组长度新增数组元素

var arr = ['red','blue','yellow'];
arr.length = 7;//新增了四个空位置

通过修改数组索引新增数组元素

var arr = ['red','blue','yellow'];
arr[3] = 'black';

注意：

var arr = ['red','blue','yellow'];
arr = 'xiaoming';//不能直接使用数组名来赋值，否则数组里面的数组元素都没有了

5、数组去重

var arr = [2,1,3,12,3,12,2,1,1,2,1,3];//去 1
var newArr = [];
for(var i = 0;i<arr.length;i++){
    if(arr[i] != 1){
       newArr[newArr.length] = arr[i];//往数组里面添加元素
       }
}

JavaScript函数

函数使用分为两步：

声明函数

function 函数名(){//function 声明函数的关键字
    //函数体
}

调用函数

//函数名()；
function sayHi(){
    console.log('hi~');
}
//调用
sayHi();

函数的封装

函数的封装就是把一个或多个功能通过函数的形式封装起来，对外只提供一个简单的函数接口
简单理解：类似于将电脑配件整合组装到机箱里面（类似快递打包）

函数的参数

//实参和形参
function cook(aru){//aru是形参
    console.log(aru);
}
//函数调用
cook('酸辣土豆丝');//酸辣土豆丝就是实参

函数形参和实参个数匹配

function getSum(num1,num2){
    console.log(num1+num2);
}
//如果实参个数和形参个数一致，则正常输出结果
getSum(1,2);//输出3
//如果实参个数大于形参个数，回取到形参的个数
getSum(1,2,3);//输出3
//如果实参的个数小于形参的个数，一个变量没有接受值，结果就是undifined
getSum(1);//结果就是NaN

函数的返回值 return

在函数里面直接输出结果是不合理的，我们的函数是为了实现某个功能，最终的结果应该返回给我们的调用者的

函数的返回值格式

function 函数名(形参1，形参2){
    return 需要返回的结果;
}
console.log(函数名(实参1，实参2));

arguments使用

作用：

里面存储了所有传递过来的实参
展示形式是以一种伪数组的形式来展示的
具有Length属性
按索引方式来存储数据
不具有数组的push 和 pop 等方法
每个函数都内置好了arguments

函数的两种声明方式

1、利用函数关键字自定义函数（命名函数）

function fn(){
    //函数体
}

2、函数表达式

var 变量名 = function(){//也称为匿名函数
    //函数体
}
//调用
变量名();

JavaScript对象

1、什么是对象

对象就是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等都是对象。

2、创建对象的三种方法

利用字面量创建对象

对象字面量就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法

var obj = {};//创建了一个空的对象
var obj = {
    uname : 'zhangsanfeng',//多个属性和方法之间使用逗号隔开的
    age : 33,
    sex : '男',
    sayHi: function(){//方法的写法
    console.log('hi~~');
}
}
//对象的调用是用对象名.属性名
console.log(obj.uname);
//调用还可以用一下一种方法：对象名['属性名']
console.log(object['uanme']);
//调用对象的方法 对象名.方法名
obj.sayHi();

利用 new Object 创建对象

var obj = new Object();//创建了一个空对象
//赋值
obj.name = '张三疯';
obj.age = 33;
obj.sayHi = function(){
    console.log('hi~~');
}
//调用还是上面方法

利用构造函数创建对象

构造函数的语法格式

function Star(uname,age,sex){//构造函数首字母要大写
    this.uname = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(){
        console.log('冰雨');
    }
}
var ldh = new Star('刘德华',23,'男');//实例化对象

3、遍历对象

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

var obj = {
    uname : 'zhangsanfeng',//多个属性和方法之间使用逗号隔开的
    age : 33,
    sex :'男',
    sayHi: function(){//方法的写法
    console.log('hi~~');
}
for(var k in obj){
    console.log(k);//输出的是属性名
     console.log(obj[k]);//得到的是属性值
}

4、内置对象

JavaScript中的对象分为3种：自定义对象、内置对象（就是Js自带的一些对象）、浏览器对象

内置对象：Math、Date、Array、String等

5、查文档

MDN（内置对象的使用），也可以用W3C来学习

6、Math对象

Math对象不是一个构造函数，所以我们不需要用new来调用而是可以直接使用里面的属性和方法
Math里面的属性和方法都是静态的
猜数字游戏

function getRandom(min,max){
    return Math.floor(Math.random()*(max-min+1))+min;
}
var random = getRandom(1,10);
while(true){
    var num = prompt(您来猜！请输入1~10之间的数);
    if(num > random){
       alert('您猜大了');
       }else if(num<){
                alert('您猜小了');
                }else{
                    alert('您好帅哦！猜对了');
                    break;//跳出循环
                }
}

常用基本方法

7、Date日期对象

日期格式化

var date = new Date();
console.log(date.getFullYear());//返回当前日期的年
console.log(date.getMonth());//返回当前日期的月，下标从0开始
console.log(date.getDate());//返回当前日期的日
console.log(date.getDay());//返回周几，下标从0开始
console.log(date.getHours());//返回时
console.log(date.getMinutes());//返回分
console.log(date.getSeconds());//返回秒
console.log(date.getMilliseconds());//返回毫秒

获取Date总的毫秒数

var date = new Date();
//1、通过valueOf()、getTime()
console.log(date.valueOf());//获取当前到1970年1月1号的总毫秒数
console.log(date.getTime());//获取当前到1970年1月1号的总毫秒数

//2、简单的写法 +new Date()
var date = +new Date();//在new前面添加一个+加号
console.log(date);//获取当前到1970年1月1号的总毫秒数

8、数组对象

(1)、创建数组的两种方式

通过字面量来创建
```
var arr = [1,2,3];
```

通过new Array()

var arr = new Array();
var arr = new Array();//表示数组长度为2
var arr = new Array(2,3);//相当于[2,3],这样写表示里面有两个数组元素，是2和3

(2)、检测是否为数组方法

//1、instanceof 运算符，它可以用来检测是否为数组
var arr = [];
console.log(arr instanceof Array);//true
//2、调用Array对象中的isArray(参数)方法
console.log(Array.isArray(arr));//true

(3)、添加删除数组元素的方法

//1、push()在我们数组的末尾添加一个或多个数组元素,返回的是长度
//2、unshift()在我们数组的开头添加一个或多个数组元素，返回的是长度
//3、pop()删除数组最后一个元素，返回的是值
//4、shift()删除数组第一个元素，返回的是值
 /**
		* 数组添加元素
		* push()/unshift()
		* 
		* 数组删除元素
		* pop()/shift()
		* 
		* 删除指定元素
		* splice(index)从index 开始后面的都会被删除
		* splice(index,length) 从index 开始删除length个元素 返回的是没被删除的
		* slice(index,length) 从index 开始删除length个元素 返回的是被删除的
		* **/

(4)、数组排序

方法名	说明	是否修改原数组
reverse()	颠倒数组中的元素的顺序，无参数	修改，返回的是一个新数组
sort()	对数组中的元素进行排序	修改，返回的是一个新数组

(5)、数组索引方法

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个的索引	不存在返回-1
lastIndexOf()	数组中查找给定元素的最后一个的索引	不存在返回-1

(6)、数组转换为字符串

方法名	说明	返回值
toString()	把数组转换为字符串，逗号分隔每一项 / 1,2,3	返回一个字符串
join('分隔符')	把数组中的所有元素转换为字符串 / join('-')-->1-2-3	返回一个字符串

（7）遍历数组的两种方式

//遍历有两种方法：
       // 1、for 循环遍历
       // 2、for-in 循环遍历,未定义的元素不循环
       for(let index in arr){}

9、基本包装类型

Javascript 三个特殊的引用类型String、Number、Boolean。
基本包装类型就是简单数据类型变成复杂数据类型，这样基本数据类型就有了属性和方法

var str = 'andy';
console.log(str.length);//结果为4

包装过程如下

//1、生成临时变量，吧简单数据类型包装成复杂数据类型
 var temp = new String('andy');
//2、然后赋值给我们声明的字符变量
str = temp;
//销毁临时变量
temp = null;

根据字符返回位置

方法	说明
indexOf('要查找的字符')	从前面开始查找，没有返回-1
indexOf('要查找的字符',起始的位置)	从起始位置开始查找，没有返回-1
lastIndexOf(‘要查找的字符')	从最后一个字符开始查找，没有返回-1

//案例
//找出下面这段字符串的g字母的位置及其个数
var str = 'qdfgkajhggsagfgaiawu';
var index = str.indexOf('g');
var num;
while (index != -1){
    console.log(index);
    num++;
    index = str.indexOf('g',index+1);
}
var index2 = str.lastIndexOf('s');
console.log(index2);
//输出结果：
            3
            8
            9
            14
            总的个数：5
            10

根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符（index字符串的索引号）	str.charat(0)
charCodeAt(index)	获取指定位置的字符的ASCLL码（index索引号）	str.charCodeAt(0)
str(index)	获取指定位置字符	和charAt(index)等效

字符串操作方法

方法名	说明
concat(str1,str2,str3...)	等效于+
substr(start,length)	从start开始截取长度为length的字符串
slice(start,end)	从start到end，end截取不了
substring(start,end)	等效于slice(start,end),但是不接受负值

替换字符串以及字符串转换为数组

方法名	说明
replace('被替换的字符'，'替换的字符')	只会替换第一次出现的字符，可以利用for循环来弥补
split('分隔符')	根据分隔符来把字符串分开，然后被分割的变成了数组元素
toUpperCase()	转换为大写
toLowerCase()	转换为小写

Web APIs

1、Web APIs和JS基础的关联性

1、1 JS的组成

1、2 Web APIs和JS基础阶段的关联性

jS 基础就是为了Web APIs做铺垫

2、API和WebAPI

2.1 API

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
WebAPI是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM

1、什么是DOM

简称文档对象模型，是W3C组织推荐的可扩展标记语言（HTML或者XML）的标准编程接口
有了这个接口可以改变网页的内容、结构和样式

2、DOM 树

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

3、获取元素

3.1、如何获取页面元素

DOM在我们实际开发中主要用来操作元素，

获取页面元素可以使用以下几种方式：

根据ID来获取

//使用getElementById()方法来获取带有ID的元素对象
//在使用的时候，页面都是从上往下加载的，所以script要写到标签下面
//返回的我是一个元素对象   
    <div id="time">欢迎来到王者荣耀！</div>
    <script>
        var timer = document.getElementById('time');
        console.log('timer');
     console.log(typeof timer);//返回的是一个对象
    console.dir(timer);//打印我们要返回的元素对象，更好的查看里面的属性和方法
    </script>
//欢迎来到王者荣耀！

根据标签名来获取

//getElementsByTagName获取某些元素可以返回带有指定标签名的对象的集合
<body>
    <ul>
        <li>知否知否，应是等你好久1</li>
        <li>知否知否，应是等你好久2</li>
        <li>知否知否，应是等你好久3</li>
        <li>知否知否，应是等你好久4</li>
        <li>知否知否，应是等你好久5</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        var len = lis.length;
            // for(var i = 0;i<len;i++){//用for循环遍历集合
            //     console.log(lis[i]);
            // }
            for (var j in lis) {//forin循环遍历集合
                console.log(lis[j]);
            }
    </script>
</body>

通过HTML5新增的方法来获取

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div class="box">盒子3</div>
    <div class="box">盒子4</div>
    <div id="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
                                                    //1、通过类名返回元素对象集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

                                                     //2、根据指定选择器返回第一个元素对象
        var firstBox = document.querySelector('.box');//点代表的是类选择器
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);

                                                    //2、根据指定选择器返回所有元素对象集合
        var boxAll = document.querySelectorAll('.box');
        console.log(boxAll);
    </script>
</body>

特殊元素获取

 <script>
        //获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        //获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

事件三要素

<body>
    <button id="btn">唐伯虎</button>
    <script>
        //点击按钮，弹出对话框
        //1、事件是有三部分组成，事件源(要触发的对象)、事件类型(如何触发，什么事件)、事件处理程序，也称为事件三要素
        var btn = document.getElementById('btn');
        btn.onclick = function (){//事件处理程序
            alert('点秋香');
        }
    </script>

</body>

事件执行过程

<body>
    <div id="btn">唐伯虎</div>
    <script>
        //1、获取事件源
        //点击div控制台输出 我被选中了
        var  div = document.querySelector('div');
        //绑定事件、注册事件
        //div.onclick
        //添加事件处理程序
        div.onclick = function (){
            alert('点秋香');
        }

    </script>

</body>

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发事件
onmouseover	鼠标经过触发
onmouseout	鼠标离开事件
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmoseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

1、改变元素的内容

element.innerText

从起始位置到终止位置的内容，但是去除html标签，同时空格和换行也换掉

element.innerHTML

从起始位置到终止位置的内容，包括html标签，同时保留空格和换行

<body>
    <button>显示当前时间</button>
    <div id="div1">年/月/日/时/分/秒</div>

    <script>
       //获取事件源
       var div = document.getElementById('div1');
       var btn = document.querySelector('button');
       //注册事件
       btn.onclick = function (){
           div.innerText = getDate();
       }
       function getDate(){
           var date = new Date();
           var year = date.getFullYear();
           var month = date.getMonth();
           var dates = date.getDate();
           var hours = date.getHours();
           var minutes = date.getMinutes();
           var seconds = date.getSeconds();
           return year+'年\t'+month+'月\t'+dates+'日\t'+hours+'时\t'+minutes+'分\t'+seconds+'秒';
       }
    </script>

</body>

innerText和innerHTML的区别

<body>
    <button></button>
    <script>
      var btn = document.querySelector('button');
      //innerText和innerHTML的区别
      btn.innerText = '<Strong>显示</strong>当前时间';//不识别html标签，显示二字不加粗
      btn.innerHTML = '<Strong>显示</strong>当前时间';//识别html标签，显示二字加粗
    </script>

2、常用元素的属性操作

1、innnerText、innerHTML//改变元素内容
2、src、href
3、id、alt、title

<body>
    <button id="ldh">刘德华</button>
    <button id="lcw">梁朝伟</button><br>
    <img src="Images/刘德华.png" alt="" title="刘德华">
    <script>
      var ldh = document.getElementById('ldh');
      var lcw = document.getElementById('lcw');
      var img = document.querySelector('img');
      lcw.onclick = function (){
          img.src ="Images/梁朝伟.jpg";
          img.title = '梁朝伟';
      }
      ldh.onclick = function (){
          img.src ="Images/刘德华.png";
          img.title = '刘德华';
      }

    </script>

</body>
//当点击刘德华的时候，显示刘德华的图片（默认刘德华的图片显示）
//当点击梁朝伟的时候，显示梁朝伟的图片
//当鼠标放在图片上的时候，会显示出图片的名字title

3、分时显示不同图片，显示不同问候语

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 300px;
            height: 250px;
        }
    </style>
</head>
<body>
    <img src="Images/s.gif">
    <div>早上好！</div>
    <script>
        let img = document.querySelector('img');
        let div = document.querySelector('div');
        let date = new Date();
        let h = date.getHours();
        if(h < 12){
            img.src = 'Images/s.gif';
            div.innerHTML = '早上好！好好敲代码';
        }else if(h < 18){
            img.src = 'Images/x.gif';
            div.innerHTML = '下上好！好好敲代码';
        }else {
            img.src = 'Images/w.gif';
            div.innerHTML = '晚上好！好好敲代码，然后睡觉';
        }

    </script>
</body>
</html>

4、表单元素的属性操作

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

type、value、checked、selected、disable(这个表单是否被使用)
<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function (){
            input.value = '唐伯虎点秋香';
            //如果想要表单被禁用，设置按钮不能再点击 disabled，
            this.disabled = true;//this指向的是事件函数的调用者 btn
        }
    </script>
</body>

5、样式属性操作

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

1、element.style  行内样式操作
//如果修改元素比较多
2、element.className  类名样式操作//类名就是标签里面的 class,刚开始标签里面没设置class，在style里面设置好，在JS中调用就好了
假如：class = "change";
调用：this.className = 'change';
//如果要保留原先的类名
this.className = 'first change';//first是原先的类class

排他思想

如果有同一组元素，我们想要某种元素实现某种样式，需要用到循环的排他思想算法

1、所有元素全部清除样式（干掉其他人）
2、给当前元素设置样式（留下我自己）
3、顺序不能颠倒

//给body换背景
document.body.style.backgroundImage = 'url('+this.src+')';

获取自定义属性

标签内还可以自定义属性，那么如何获取或设置或移除属性我们自定义的属性呢，

element.getAttribute('属性');//获取自定义属性值，也可以获取自带的属性
element.setAttribute('属性'，'值');//设置自定义属性值，也可以设置自带的属性
element.removeAttribute('属性');//移除属性
<div getTime = "20"></div>
<script>
    var div = document.querySelector('div');
    console.log(div.getTime);//不能获取getTime，因为他是自定义的属性
    console.log(div.getAttribute('getTime'));
</script>

H5自定义属性

1、在H5中定义了一个自定义属性规范

//h5规定自定义的属性的样式为以 data- 开头作为属性名并赋值
<div data-index = "1"></div>
//H5新增的获取自定义属性的方法
<div data-getTime = "20" data-index = '1' data-list-name></div>
<script>
    var div = document.querySelector('div');
    console.log(div.getTime);//不能获取getTime，因为他是自定义的属性
    console.log(div.dataset.getTime);
    console.log(div.dataset.index);//dataset是自定义属性的集合，集合后面不能再有 data-,直接获取后面的就可以了
//也可以这样写
    console.log(div.dataset['index']);
//如果自定义属性由多个 - 链接，我们获取的时候采用驼峰命名法
     console.log(div.dataset.listName);//name首字母要大写
</script>

节点操作

1、为什么要学习节点操作

利用DOM提供的方法获取元素逻辑性不强，繁琐
利用节点层级关系获取元素
- 利用父子兄弟节点关系获取元素
- 逻辑性强，但是兼容性稍微差点

2、节点的概述

一般地，节点至少拥有nodeType(节点类型)，nodeName(节点名称)，nodeValue(节点值)这三个基本属性

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3（文本节点包含文字，空格，换行等）

我们实际开发中，节点操作主要是元素节点

3、节点层级

1、父子节点

获取父子结点

<body>
<!--节点的优点-->
<div>我是div</div>
<span>我是span</span>
<ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
</ul>
<div class="box">
    <span class="erweima"></span>
</div>
<script>
//父节点 parentNode
    //DOM操作获取erweima父节点
    var box = document.querySelector('.box');
    var erweima = document.querySelector('.erweima');
    //节点操作获取erweima父节点,如果找不到父节点就返回null
    var box1 = erweima.parentNode;//得到的是离得最近的父节点
//子节点 parent.childNodes
    //DOM提供的API获取方法
    var ul = document.querySelector('ul');
    var lis = ul.querySelectorAll('li');
    //节点操作获取子节点
    var lis1 = ul.childNodes;//获取的是所有子节点，包含文本节点和元素节点等
    var lis2 = ul.children;//获取所有的子元素节点
    console.log(lis1)
    console.log(lis2)
</script>
</body>

单个获取子元素节点

<body>
<ol>
    <li>第一名</li>
    <li>第二名</li>
    <li>第三名</li>
    <li>第四名</li>
</ol>
<script>
    var ol = document.querySelector('ol');
//parentNode.firstChild，获取的是所有子元素节点和文本等节点的第一个节点
//parentNode.lastChild
    var fist = ol.firstChild;
    let last = ol.lastChild;

//parentNode.firstElementChild
//parentNode.lastElementChild，获取的是最后一个子元素节点
//这两个方法有兼容性问题IE9以上才支持
    var fistLi = ol.firstElementChild;
    var lastLi = ol.lastElementChild;

//实际开发时候的写法，没有兼容性问题
    var firstli = ol.children[0];
    var lastli = ol.children[ol.children.length - 1];
</script>
</body>

2、兄弟节点

<body>
<div class="div">我是大哥</div>
<span class="span">我是小弟</span>
<script>
    var div = document.getElementsByClassName('div');
//nextSibling获取下一个兄弟节点，包含所有节点
    var span = div.nextSibling;//获取的是文本节点空格
//previousSibling 获取上一个兄弟节点，包含所有节点
    var span = div.previousSibling;

//node.nextElementSibling
//node.previousElementSibling
//获取兄弟元素
//也有兼容性问题
//如何解决兼容性问题
    //自己封装一个兼容性的函数
    function  getNextElementSibling(element){
        var el = element;
        while (el = el.nextSibling){
            if(el.nodeType = 1){
                return el;
            }
        }
        return null;
    }


</script>
</body>

4、创建节点

document.createElement('tagName');

5 、添加节点

node.appendChild(child);
node.insertBefore(child,指定的位置);
<body>
<ul></ul>
<script>
    //1、创建节点元素节点
    var li = document.createElement('li');
    var lili = document.createElement('li');
    //2、添加节点
    var ul = document.querySelector('ul');
    ul.appendChild(li);
    ul.insertBefore(lili,ul.children[0]);
</script>
</body>

案例：简单版的发布留言案例

<body>
<textarea name="" id="">
    123
</textarea>
<button>发布</button>
<ul></ul>
<script>
    var text = document.querySelector('textarea');
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    btn.onclick = function (){
        if(text.value == ''){
            alert("您没有输入内容")
        }else {
            //创建元素节点
            var li = document.createElement('li');
            li.innerHTML = text.value;
            ul.appendChild(li);
        }
    }
</script>
</body>

6 、删除节点

node.removeChild(child);
<body>
<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.removeChild(ul.children[0]);
</script>
</body>

案例：简单版的发布留言案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{
            background-color: aquamarine;
            width: 300px;
            height: 100px;
        }
        li{
            width: 250px;
            background-color:peachpuff;
        }
        li a{
            float: right;
        }
    </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
    var text = document.querySelector('textarea');
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    btn.onclick = function (){
        if(text.value == ''){
            alert("您没有输入内容")
        }else {
            //创建元素节点
            var li = document.createElement('li');
            li.innerHTML = text.value+"<a href='javascript:;'>删除</a>";//javascript:;阻止页面跳转
            ul.appendChild(li);
        }
        //删除元素
        var as = document.querySelectorAll('a');
        for(var i = 0;i<as.length;i++){
            as[i].onclick = function (){
                ul.removeChild(this.parentNode);
            }
        }
    }
</script>
</body>
</html>

7、复制节点

node.cloneNode();
//括号为空或者里面为false 浅拷贝 不拷贝里面的内容
//括号里面为true 就是深拷贝 拷贝里面的内容
<body>
<ul>
    <li>2</li>
    <li>1</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    var lili = ul.children[0].cloneNode(true);
    ul.appendChild(lili); 
</script>
</body>

案例：动态生成表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    table{
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }
    td,th{
      border:1px solid #333;
    }
    thead tr{
      height: 40px;
      background-color: #ccc;
    }
    a{
        text-decoration: none;
        color: #f33;
    }
  </style>
</head>
<body>
<table cellspacing="0">
    <thead>
    <tr>
      <td>姓名</td>
      <td>科目</td>
      <td>成绩</td>
      <td>操作</td>
    </tr>
    </thead>
  <tbody>

  </tbody>
</table>
<script>
    var datas = [ {
    name:'维音洛',
    subject:'JavaScript',
    score:98
    },{
        name:'伟哥',
        subject:'JavaScript',
        score:93
    },{
    name:'小猪佩奇',
        subject:'JavaScript',
        score:100
    },{
    name:'张佳玮',
        subject:'JavaScript',
        score:99
    }
    ];
    //往tbody里面添加行tr
    var tbody = document.querySelector('tbody');
    for (let i = 0; i < datas.length; i++) {
        let tr = document.createElement('tr');
        tbody.appendChild(tr);
        //行里面创建单元格
       for(k in datas[i]){
           let td = document.createElement('td');
           td.innerHTML = datas[i][k];
           tr.appendChild(td);
       }
        //创建有删除的单元格
        let tdtd = document.createElement('td');
        tdtd.innerHTML = '<a href="javascript:;">删除</a>'
        tr.appendChild(tdtd);
    }
    //删除操作
    let as = document.querySelectorAll('a');
    for(let i = 0;i<as.length;i++){
        as[i].onclick = function (){
            tbody.removeChild(this.parentNode.parentNode);
        }
    }
</script>
</body>
</html>

8、三种动态创建元素的区别

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

document.write();//创建元素，如果页面文档流加载完毕，在调用这句话会导致页面重绘
//而其他两种不会，下面两个之间的区别就是 innerHTML 效率比 createElement 高
element.innerHTML;
document.createElement();

DOM重点核心

dom的操作主要有创建、增、删、改、查、属性操作、事件操作

创建

document.write
innerHTML
createElement

增

appendChild
insertBefore

删

removeChild

改

主要修改dom的属性，dom的内容、属性，表单的值等

修改元素的属性：src 、href、title等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disabled等
修改元素样式：style、className

查

主要获取dom的元素

DOM提供的API方法：getElementById、getElementByTagName 古老用法，不太推荐
H5提供的新方法：querySelector、querySelectAll 提倡
利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling)提倡

属性操作

主要针对于自定义属性

setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute：移除属性值

事件高级导读

1、注册事件两种方式

（一）、注册事件概述

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

传统的注册方式
1. 利用on开头的事件onclick
2. ```
<button οnclick="alter('hi~')"></button>
```
3. btn.onclick = function(){}
4. 特点：注册事件的唯一性
5. 同一个元素同一个事件只能处理一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数
方法监听注册方式
1. w3c标准推荐方式
2. addEventListener() 它是一个方法
3. IE9之前IE不支持此方法，可使用attachEvent() 代替
4. 特点：同一个元素同一个事件可以注册多个监听器
5. 按注册顺序依次执行

（二）、addEventListener()

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

type：事件类型字符串，比如click、mouseover，注意这里不能带on
listener：事件处理函数，事件发生时会调用该监听函数
useCapture：可选参数，是一个布尔值，默认为false

<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
    let btns = document.querySelectorAll('button');
    //传统的注册事件
    btns[0].onclick = function (){
        alert('hi~')
    }
   //方法监听注册事件 里面的注册事件是字符型的，需要加引号，而且不能带on
    //同一个元素同一个事件可以添加多个监听器
    btns[1].addEventListener('click',function (){
        alert('sayBy~');
    })
    btns[1].addEventListener('click',function (){
        alert('by~');
    })
</script>
</body>

(三)、attachEvent()

eventTarget.attachEvent(eventNameWithOn,callback)

eventNameWithOn：事件类型字符串，比如onclick,这里要带on
callback：事件处理函数，当目标触发事件时回调函数被调用

2、删除事件（解绑事件）

<body>
<button>传统解绑事件</button>
<button>方法监听解绑事件</button>
<script>
    let btns = document.querySelectorAll('button');
//传统方式解绑
    btns[0].onclick = function (){
        alert(11);
        btns[0].onclick = null;//传统方式解绑事件
    }
//方法监听解绑方式
    btns[1].addEventListener('click',fn);//里面的fn不需要加小括号
    function fn(){
        alert('hi~');
        btns[1].removeEventListener('click',fn);
    }
 //老一套方法监听解绑方式
    btns[2].attachEvent('click',fn1);//里面的fn不需要加小括号
    function fn1(){
        alert('hi~');
        btns[2].detachEvent('click',fn1);
    }

</script>
</body>

3、DOM事件流

事件流描述的是从页面接收时间的顺序,比如我们给div注册了点击事件

捕获阶段：document -> html -> body -> div
冒泡阶段：div -> body -> html -> document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: peachpuff;
            text-align: center;
            margin: auto;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="father">爸爸
    <div class="son">儿子</div>
</div>
<script>
   let father = document.querySelector('.father');
   let son = document.querySelector('.son');
   //father-->son 捕获阶段,点击儿子先显示爸爸
   father.addEventListener('click',function (){
       alert('爸爸');
   },true);//true表示处于捕获阶段
   son.addEventListener('click',function (){
       alert('儿子');
   },true);//true表示处于捕获阶段

   //son-->father 冒泡阶段，点击儿子先显示儿子
   father.addEventListener('click',function (){
       alert('爸爸');
   },false);//false表示处于冒泡阶段
   son.addEventListener('click',function (){
       alert('儿子');
   },false);//false表示处于冒泡阶段
</script>
</body>
</html>

4、事件对象

<body>
<button>传统事件对象</button>
<button>监听事件对象</button>

<script>
    let btns = document.querySelectorAll('button');
    btns[0].onclick = function (event){
        console.log(event);
    }
//event就是一个事件对象，当形参来看
//事件对象只有有了事件才会有，它是系统给我们自动创建的，不需要我们传递参数
//事件对象是我们事件的一系列相关数据的集合，跟事件相关，比如鼠标点击里面就包含了鼠标的相关信息，鼠标点击的位置坐标啊，事件类型啊等
//这个事件对象我们可以自己命名，比如e,evt等都可以
    
</script>
</body>

5、target 和 this 的区别

e.target 返回的是触发事件的对象，this 返回的是绑定事件对象

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

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准，ie浏览器使用
e.type	返回时间的类型 click mouseover 等
e.cancelBubble	该属性阻止冒泡，非标准，ie浏览器使用
e.returnValue	该属性阻止事件（默认行为），非标准，ie浏览器使用，比如不让链接跳转
e.preventDefault()	该属性阻止事件（默认行为），标准，比如不让链接跳转
e.stopPropagation()	该属性阻止冒泡,标准

7、事件委托

（一）、事件委托

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

（二）、事件委托的原理

不用每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理来影响设置每一个子节点

以上案例：给 ul 注册点击事件，然后利用事件对象target来找到当前点击的 li ,因为点击 li ，事件会冒泡到 ul 上，ul有注册事件，就会触发事件监听器。

（三）、事件委托的作用

我们只操作了一次DOM，提高了程序的性能

<body>
<ul>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
</ul>

<script>
  let ul = document.querySelector('ul');
  ul.addEventListener('click',function (e){
      alert('知否知否，点我应有弹框在手！');
      e.target.style.backgroundColor = 'red';//给触发事件的标签加上背景色
      this.style.backgroundColor = 'pink';//给绑定事件的标签上色
  })
</script>
</body>

8、禁止选中文字和禁止右键菜单

（一）、禁止鼠标右键菜单

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

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

二)、禁止鼠标选中文字

selectstart：开始选中

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

9、跟随鼠标的小天使

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            position: absolute;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<img src="../img/xiaojingling.jpg">

<script>
    let pic = document.querySelector('img');
document.addEventListener('mouseover',function(e){
    let x = e.pageX;
    let y = e.pageY;
    pic.style.left = (x-50)+'px';//要在x后面添加px字符串
    pic.style.top = (y-50)+'px';//要在x后面添加px字符串
})
</script>
</body>
</html>

10、键盘事件

键盘事件对象中的keycode 判断用户按下哪个键
e.keycode 可以得到相应的ASCLL码值
keyup 和 keydown 事件不区分字母大小写
keypress 事件区分字母大小写

BOM 浏览器对象模型

1、BOM简介

BOM提供了独立于内容而与浏览器窗口进行交互的对象，，其核心对象是window
BOM有一系列相关的对象构成，并且每个对象都提供了很多方法和属性
BOM的顶级对象是Window
把浏览器当作一个对象来看待
BOM是浏览器厂商在自己浏览器上各自定义的，兼容性差

2、BOM的构成

BOM比DOM更大，它包含了DOM

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

它是js访问窗口的一个接口
它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法
在调用的时候可以省略window，前面学习的对话框都是window对象方法，

3、window常见事件

（一）、窗口加载事件1

window.onload = function(){
}
//或者
window.addEventListener("load",function(){});
//作用就是等页面内容全部加载完毕才执行，要不然比如需要操作的标签在js代码下面，就不会触发该标签的出发事件

注意：但是这种注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准

<body>
<script>
    window.onload = function (){
        var btn = document.querySelector('button');
        btn.addEventListener('click',function (){
            alert('点击我');
        })
    }
</script>
<button>点击我</button>
</body>

(二)、窗口加载事件2

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

load：等页面内容全部加载完毕，包含页面dom元素，图片，flash，css等
DOMContentLoaded：等dom加载完毕，不包含图片，flash，css等就可以执行

（三）、调整窗口大小事件

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

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

<body>
<script>
    window.onload = function (){
        var btn = document.querySelector('button');
        window.addEventListener('resize',function (){
            if(window.innerWidth <= 800){
                btn.style.display = 'none';
            }else {
                btn.style.display = 'block';
            }
        })
    }
</script>
<button>点击我</button>
</body>

4、定时器

(一)、两种定时器

setTimeout()
```
window.setTimeout(调用函数，[延迟的毫秒数])
```
该定时器到期后执行调用函数，只调用一次

clearTimeout()

window.clearTimeout( timeoutID );//timeID 定时器的名字

setInterval()

window.setInterval(回调函数，[间隔的毫秒数])
该定时器每间隔这个时间，就会调用一次回调函数，调用多次

clearInterval()
```
window.clearInterval(timeID);
```
同步和异步

H5之后JS就可以创建多个线程，于是JS中就出现了同步和异步

同步任务和异步任务
- 同步任务
  
  同步任务在主线上执行，形成一个执行栈
- 异步任务
  
  JS的异步任务是通过回调函数来实现的
  
  一般而言异步任务有以下三种类型
  1. 普通事件：如：click、resize等
  2. 资源加载：如load、error等
  3. 定时器：setInterval、setTimeout等
  4. 时间到了或者点击等之后，异步相关回调函数才会添加到任务队列中（任务队列也称为消息队列）
JS执行机制
- 先执行执行栈中的同步任务，再执行异步任务
- 同步任务执行完之后，读取任务队列中的回调函数，读取到的异步任务进入执行栈，开始执行

5、location对象

location用于获取和设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们也称这个属性为location对象

URL的一般语法格式为：

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

组成	说明
protocol	通信协议：常用的有http、ftp、maito等
host	主机域名:www.itcast.cn
port	端口号，可选省略时使用方案的默认端口，如http的默认端口是80
path	路径，有多个‘/’符号隔开的字符串，一把用来表示主机上的一个目录或文件地址
query	参数，以键值对的形式，通过&来隔开
fragment	片段，后面内容常见于链接、锚点

location常见的属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机域名
location.port	返回端口号，如未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段，#后面的内容，常见于链接和锚点

locaton对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面，也称为重定向页面，有记录浏览器历史功能，有后退功能
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新

6、navigator对象

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

7、history对象

与浏览器历史记录进行交互，该对象包含用户在浏览器浏览过的URL

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是1前进1个页面，如果是-1后退一个页面

PC端网页特效

1、offsetLeft 和 offsetTop 获取元素偏移

offset翻译过来就是偏移量，使用offset系列相关属性可以动态的获取元素的偏移和大小等

offset系列属性	作用
element.offsetParent	返回该元素带有定位的父级元素，如果父级元素都没有定位，则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding，边框，内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding，边框，内容区的高度，返回数值不带单位

2、元素可视区client系列

client翻译过来就是客户端，我们使用client的相关属性来获取元素可视区的相关信息，通过client属性可以动态的获取该元素的边框大小和元素大小等。

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element..clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

offset 和 client 的最大区别就是一个返回的是offset是包含边框的，client 不包含边框

3、立即执行函数

第一种写法

(function() {})()
//第二个小括号可以看作是调用函数
(function(a,b) {
    console.log(a+b);
})(2,3)//再第二个小括号里面传参

第二种写法

(function(){}())//也是在第二个小括号里面传参

如果有多个立即执行函数，用";"给它们隔开

立即执行函数的最大的作用就是独立创建一个作用域，里面的变量都是局部变量，不会有命名冲突的情况

4、元素滚动scroll系列

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不但带单位
element.scrollWidth	返回自身的实际内容宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身的实际内容高度，不含边框，返回的数值不带单位

5、三大系列总结

三大系列大小对比	作用
element.offsetWidth	包含自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth	包含自身包括padding、不包含边框、内容区的宽度，返回数值不带单位
element.scrollWidth	返回自身的实际内容宽度，不含边框，返回数值不带单位

它们的主要用法

offset 经常用于获取元素的位置，offsetLeft、offsetTop
client 经常用于获取元素大小，clientWidth、clientHeight
scroll 经常用于获取滚动距离，scrollTop、scrollLeft
注意页面滚动的距离通过 window.pageXoffset 获得

6、mouseover和mouseenter的区别

mouseover 鼠标经过自身盒子会触发，经过子盒子还是会触发
mouseenter 只会经过自身盒子才会触发
之所以会这样，mouseenter 不会冒泡
跟mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡

7、动画函数封装

1、动画实现原理

核心原理：通过定时器setInterval() 不断移动盒子

实现步骤：

获得盒子当前的位置
让盒子在当前位置上加上一个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位,才能使用element.style.left

2、简单动画函数封装

function animate(obj,target){
    var time = setInterval(function(){
        if(obj.style.left >= target){
           clearInterval(time);
           }else{
               obj.style.left = obj.offsetLeft+1+'px';
           }
    },300);
}
//调用函数
var div = document.querySelector('div');
let target = 400;
animate(div,target);

3、缓动动画原理

让每次移动的距离变小就可以了

移动端网页特效原理

1、触屏事件

（一）、触屏事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸屏平面的状态的变化的事件，这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少等

touchstart、touchmove、touchend三个事件都会各自有事件对象。

常见三个对象列表

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前元素的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无的变化

<body>
<div></div>
<script>
   var div = document.querySelector('div');
   div.addEventListener('touchstart',function(){

   });
   div.addEventListener('touchmove',function(){

   });
   div.addEventListener('touchend',function(e){
       console.log(e)
    //当我们的手指离开的时候就没有了 touches 和 targetTouches列表
       //但是还有changedTouches
   });

</script>
</body>

2、移动端拖动元素

touchstart、touchmove、touchend可以实现拖动元素
但是拖动元素需要当前手指的坐标值，我们可以用targetTouches[0] 里面的pageX 和 pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离，然后要用盒子原来的位置加上移动的距离
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三部曲L:

触摸元素 touchstart：获得手指初始坐标，同时获得盒子原来的位置
移动手指 touchmove：计算手指移动的距离，并且移动盒子
离开盒子 touchend：

注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动 e.preventDefault()；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    div{
        position: absolute;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
</head>
<body>
<div></div>
<script>
   var div = document.querySelector('div');
   //触摸元素
   var startX = 0;//手指的
   var startY = 0;
   var x = 0;//盒子的
   var y = 0;
   div.addEventListener('touchstart',function(e){
        startX = e.targetTouches[0].pageX;//获取手指初始坐标
        startY = e.targetTouches[0].pageY;
        x = this.offsetLeft;//获取盒子初始坐标
        y = this.offsetTop;
   });
   div.addEventListener('touchmove',function(e){
        var moveX = e.targetTouches[0].pageX - startX;//获取手指移动的距离坐标
        var moveY = e.targetTouches[0].pageY -startY;
        //移动盒子
       this.style.left = x + moveX + 'px';
       this.style.top = y + moveY +'px';
       e.preventDefault();//阻止屏幕滚动的默认行为
   });
   div.addEventListener('touchend',function(e){
       console.log(e)
    //当我们的手指离开的时候就没有了 touches 和 targetTouches列表
       //但是还有changedTouches
   });

</script>
</body>
</html>

3、移动端常见特效

classList属性

element.classList 返回类名，以数组的形式来获取的
添加类：element.classList.add('类名');
移除类：element.classList.remove('类名');
切换类：element.classList.toggle('类名');

4、click延时解决方案

移动端会有300ms的延时，原因是屏幕双击会缩放页面

解决方案：

1、禁用缩放

<meta name="viewport" content="user-scalable=no">

2、利用touch事件自己封装这个事件解决300ms延时

原理就是：

当我们手指触摸屏幕，记录触摸时间
当我们手指离开屏幕，用离开的时间减去触摸时的时间

function tap(obj,callback){
        var isMove = false;
        var startTime = 0;//记录触摸时的时间变量
        obj.addEventListener('touchstart',function (e){
            startTime = Date.now();//纪录触摸时间
        });
        obj.addEventListener('touchmove',function (e){
            isMove = true;//看看是否有滑动，有滑动算拖动，不算点击
        });
        obj.addEventListener('touchend',function (e){
            if(! isMove && (Date.now() - startTime)<150){//如果手指触摸时间和离开时间小于150算点击
                callback && callback();//执行回调函数
            }
            isMove = false;//重置
            startTime = 0;
        });
   }
   //调用
   tap(div,function (){
       //执行代码
   });

5、移动端常用插件

1、fastclick 插件解决300ms延迟，使用延时

使用时，引用fastclick 插件，然后在引入下面这段代码

if('addEventListener' in document){
    document.addEventLisstener('DOMContentLoaded',function(){
        FastClick.attach(document.body);
    },false);
   }
//其他的正常写就行了，延时已经解决了

2、Swiper插件，多用于移动端的轮播图

先引入我们的插件相关文件
按照规定语法使用

6、前端常用的框架

PC端常用的框架

Bootstrap、Vue、Angular、React等，既能开发PC端，也能开发移动端

移动端常用框架

swiper、superslide、iscroll等

本地存储

本地存储一般使用在记录用户浏览记录

1、本地存储之 sessionStorage

本地存储特性

数据存储在用户浏览器中
设置读取方便，甚至页面刷新不丢失数据
容量较大，sessionStorage 约 5M，localStorage 约 20M
只能存储字符串，可以将对象JSON.stringify() 编码后存储

生命周期为关闭浏览器
在同一个窗口页面下数据可以共享
以键值对形式存储使用

存储数据

sessionStorage.setItem(key,value);

获取数据

sessionStorage.getItem(key);

删除数据

sessionStorage.removeItem(key);

删除所有数据

sessionStorage.clear();

<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
    let ipt = document.querySelector('input');
    let set = document.querySelector('.set');
    set.addEventListener('click',function (){
        //当我们点击之后就可以把表单里面的数据存储起来
        let value = ipt.value;
        sessionStorage.setItem('uname',value);
    });
    let get = document.querySelector('.get');
    get.addEventListener('click',function (){
        //当我们点击之后就可以把浏览器里面的数据获取
        sessionStorage.getItem('uname');
    });
    let remove = document.querySelector('.remove');
    remove.addEventListener('click',function (){
        //当我们点击之后就可以把浏览器里面的数据移除
        sessionStorage.removeItem('uname');
    });
    let del = document.querySelector('.del');
    del.addEventListener('click',function (){
        //当我们点击之后就可以把浏览器里面的数据清空
        sessionStorage.clear();
    });
</script>
</body>

2、本地存储之 localStorage

生命周期永远生效，除非手动删除，否则关闭页面也会存在
可以在同一个浏览器，不同窗口使用
以键值对的形式来存储

存储数据

localStorage.setItem(key,value);

获取数据

localStorage.getItem(key);

删除数据

localStorage.removeItem(key);

删除所有数据

localStorage.clear();

<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
    let ipt = document.querySelector('input');
    let set = document.querySelector('.set');
    set.addEventListener('click',function (){
        //当我们点击之后就可以把表单里面的数据存储起来
        let value = ipt.value;
        localStorage.setItem('uname',value);
    });
    let get = document.querySelector('.get');
    get.addEventListener('click',function (){
        //当我们点击之后就可以把浏览器里面的数据获取
        localStorage.getItem('uname');
    });
    let remove = document.querySelector('.remove');
    remove.addEventListener('click',function (){
        //当我们点击之后就可以把浏览器里面的数据移除
        localStorage.removeItem('uname');
    });
    let del = document.querySelector('.del');
    del.addEventListener('click',function (){
        //当我们点击之后就可以把浏览器里面的数据清空
        localStorage.clear();
    });
</script>
</body>

前端学习笔记网址

HTML https://blog.csdn.net/wuyxinu/article/details/103515157
CSS https://blog.csdn.net/wuyxinu/article/details/103583618
CSS3 https://blog.csdn.net/focusmickey/article/details/104722797?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163134300816780261957996%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163134300816780261957996&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-104722797.first_rank_v2_pc_rank_v29&utm_term=css3&spm=1018.2226.3001.4187
JS https://blog.csdn.net/wuyxinu/article/details/103642800
JS-下 https://blog.csdn.net/wuyxinu/article/details/103646041
JS 基础大总结 https://blog.csdn.net/Augenstern_QXL/article/details/119249534?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163131917116780271555853%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163131917116780271555853&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-119249534.first_rank_v2_pc_rank_v29&utm_term=js&spm=1018.2226.3001.4187
还有jQuery的 https://blog.csdn.net/wuyxinu/article/details/103669718
Node.js + Gulp 知识点汇总 https://blog.csdn.net/wuyxinu/article/details/103774211
Vue 知识点汇总（上）--附案例代码及项目地址 https://blog.csdn.net/wuyxinu/article/details/103965753
Vue 知识点汇总（下）--附案例代码及项目地址 https://blog.csdn.net/wuyxinu/article/details/103966175