点击原文获取资源：https://zhuanlan.zhihu.com/p/70515753

JavaScript 是属于 HTML 和 Web 的编程语言。

编程令计算机完成您需要它们做的工作。

JavaScript 很容易学习。

本教程涵盖 JavaScript 基础和高级教程。

1. JavaScript介绍

前端三大块

HTML：页面结构

CSS: 页面表现，元素大小，颜色，位置，隐藏或者显示，部分动画效果

JavaScript：页面行为，部分动画效果，页面和用户的交互(一般不用JS，而是用JQuery)

其他插件：

Ajax：读取数据，无需刷新

1.1. JS嵌入页面的方式

2. JS基本语法

2.1. 变量类型

JS是一种弱类型语言，它的变量类型由它的值来决定

5种基本数据类型：number, strign ,boolean, undefined, null

1中复合类型：object

定义变量如下：

vara =123;vard;//这个是undefined

2.2. 获取元素方法

方法1：（不推荐）

/* title是属性 *//* 问题是：这个语句是按照上下顺序执行的 */document.getElementById('div1').title="我看到了！";这是一个div元素

方法2：

/* 当整个文档加载完之后，再执行这个语句 */window.onload =function(){document.getElementById('div1').title="我看到了！";}

2.3. 操作元素属性

可以参考任何标签的属性，包括linkdeng

操作方法主要分为两种：

.的操作

[]操作

属性的写法

htm属性和js属性要一直

class属性写成className

style属性里面的属性，有横杠的改成驼峰式font-size改成oA.style.fontSize

操作方法1的写法

window.onload =function(){/* 写属性 */document.getElementById('div1').href="www.baidu.com";/* 没有title属性会自动添加 */varoA =document.getElementById('div1'); oA.title="666";/* 读属性 */alert(oA.id); }.....这是一个div元素

操作方法2的写法

window.onload =function(){varoA =document.getElementById('div1');varattr ='color';/* 三种方法完全一致 */oA.style.color='red'; oA.style[attr]='red'; oA['style'][attr]='red';}.....这是一个div元素

2.4. innerHTML的使用

window.onload =function(){varoA =document.getElementById('div1');/* 用处1：可以读取这个标签包裹的元素 *//* 输出：这是一个div元素 */alert(oA.innerHTML)/* 用处2：可以塞文字 */oA.innerHTML ="666";}.....这是一个div元素

3. JS函数

3.1. 函数的定义

// 定义函数functionfunc_name(){ Operations; }// 调用函数1:直接调用// 调用函数2：在控件中调用func_name();...

技巧：统一js代码再同一块中:实现JS和HTML分离

window.onload =function(){varoBtn01 =document.getElementById('btn01');varoBtn02 =document.getElementById('btn02');/* 注意不要写括号 */oBtn01.skin01;}functionskin01(){varoLink =document.getElementById('link1') oLink.href ='1.css'}...

3.2. 变量和函数预解析

JS解析过长分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将Function定义的函数提前，并且将var定义的变量声明提前(赋值不提前)，将它复制为underfined

方便JS的读写

// 变量的预解析alert(a);//a的声明提前，因为没有赋值所以弹出undefined，a的值未定义alert(c);//会报错，c没有声明vara =10;// 函数的预解析my_akert();// 函数的预解析，这个弹出hellofunctionmy_akert(){ alert('hello')! }

3.3. 匿名函数

没有函数名的函数

window.onload =function(){varoDiv =document.getElementById('div1'); oDiv.onclick =function(){ alert('hello'); } }

3.4.函数的参数

传入多个参数

window.onload =function(){varoDiv =document.getElementById('div1');functionchangestyle(styl,val){ oDiv.style[styl] = val; } changestyle('color', gold); changestyle('backgound', red); changestyle('width',300px); }.....这是一个div元素

返回值

实现两个输入框，值进行相加的操作

return关键字

返回结果

结束运行，return后面的语句都不会执行

阻止默认行为

4. 条件循环

运算符

算术运算符：+，-，*，/， %

条件运算符：==, >=,<=, !=, &&(and), ||(or), |(not)

if-else

.box{width:300px;height:300px;backgound:gold; }window.onload =function(){vara1 =document.getElementById('box');varbtn =document.getElementById('btn');vara =100;// 单条件语句btn.onclick =function(){if(a1.style.display =="none"){ a1.style.display =="block"; }else{ a1.style.display =="none"; } }// 多条件语句--建议用switch-case写if(a>50){ a =50; }elseif(a>30){ a=30; }else{ a=0; } }这是一个div元素

switch-case

vara ==6;switch(a){case1: alert('1');break;case2: alert('2');break;default: alert('0000');break;}

for,while

for(vari=0;i

5.JS中的数组

5.1. 创建数组的方式

/* 定义方法1: 面向对象法 */varaRr01 =newArray(1,2,3,4,'abc');/* 定义方法2:建议使用 */varaRr02 = [1,2,3,4,'abc'];/* 获取数组长度 */varalen = aRr02.length;/* 也可以设置长度 */aRr02.length =10；/* 获取某个元素，从0开始的角标 */varaval = aRr02[2];/* 定义多维数组 */varaRr03 = [[1,2,3],[4,5,6],['a','b','c']];varaval02 = aRr03[1][2];

5.2. 数组方法

varaRr01 = [1,2,3,4];// 数组连接字符串varsTr01 = aRr01.join('-');//输出1-2-3-4varsTr02 = aRr01.join('');//输出1234aRr01.push(5);//从尾部增加了一个成员：1,2,3,4,5aRr01.pop();//从尾部删除了一个成员 1,2,3,4aRr01.unshift(0);//从头部增加了一个成员aRr01.shift();//从头部删除了一个成员aRr01.reverse();// 将元素倒装，4,3,2,1aRr01.indexOf(2);// 只返回元素2第一次出现的index值aRr01.splice(2,1,7,8,9);// 从第2个元素开始，删除1个元素，然后在此位置增加7,8,9

5.3. 遍历数组

for循环

foreach方法

window.onload =function(){for(vari=0;i

5.4. 获取元素的第二种方法

通过document.getElementByTagName获取的是一个选择集，不是数组，但是可以通过下标方式操作选择集中的dom元素

window.onload = function (){ /* 选择特定的li元素 */ var oList = document.getElementById('list01'); /* aLi是一个选择集，而不是数组，获取文档中所有的li元素 */ var aLi = oList.getElementByTagName('li'); for(var i=0;i

5.4. 数组去重

varaList = [1,2,3,3,4,5,2,3,1,5,4,3,2,2,1];varaList2=[];for(vari=0;i

5.6. 实例: 计算器

测试window.onload =function(){vara1 =document.getElementById('input01');vara2 =document.getElementById('input02');varop =document.getElementById('fuhao');varbtn =document.getElementById('btn'); btn.onclick =function(){varv1 = a1.value;varv2 = a2.value;varfuhao = op.value;// 判断输入框是否为空if(v1 ==''|| v2 ==''){ alert('不能为空');return; }// 判断输入为数字if(isNaN(v1) ||isNaN(v2)){ alert('请输入数字');return; }switch(fuhao){case'0': alert(parseFloat(v1) +parseFloat(v2));break;case'1': alert(parseFloat(v1) -parseFloat(v2));break;case'2': alert(parseFloat(v1) *parseFloat(v2));break;case'3': alert(parseFloat(v1) /parseFloat(v2));break; } } }

计算器

+-*/

6. JS的字符串

JS的组成

ECMAscript javascript的语法（变量，函数，循环语句的语法）

DOM文档对象模型，操纵html和css

BOM浏览器对象模型，操作浏览器的方法

6.1. 字符串的处理方法

字符串合并+

parseInt()将数字字符串转化为整数

parseFloat()将数字字符串转化为小数

split('')把一个字符串分割成字符串组成的数组

charAt(index)获取字符串中的某个字符

indexOf(value)查找字符串是否含有某字符

substring(start,end)截取字符串用法

str.split('').reverse().join('');字符串反转

toUpperCase()字符串转大写

toLowerCase()字符串转小写

7. 定时器

属于BOM，浏览器的用处

定时器的作用

制作动画

异步操作

函数缓冲和节流

用处1：异步操作

/* 定时器：

setTimeout 只执行一次定时器

clearTimeout 关闭只执行一次的定时器

setInterval 反复执行的定时器

clearInterval 关闭反复执行的定时器 *//* 等1000毫秒才弹出来 */setTimeout(myalert,1000);functionmyalert(){ alert('Hello');}

同时我们可以自定义弹框

.pop_con{ display: none; } .pop{ width:400px; height:300px; background-color:#fff;border:1px solid#000;position:fixed; left:50%; top:50%; margin-left:-200px; margin-top:-150px;/* z-index用于设置成层级 */z-index=9999; } .mask{ position:fixed; width:100%; height:100%; background-color:#fff;left:0; top:0;/* 设置透明 */opacity:0.3; filter:alpha(opacity=30); z-index=9990; }

提示信息

关闭 window.onload = function (){varoPop = document.getElementById('pop');varoShut = document.getElementById('shutoff'); setTimeout(showpop,40000);functionshowpop(){ oPop.style.display:block; } oShut.onclick = function(){ oPop.style.display ='none'; }}

关闭定时器

// 执行一次的定时器vartimer = setTimeout(function(){ alert('hello');},4000);// 刚执行就关闭clearTimeout(timer);vartimer2 = setInterval(function(){ alert('hello');},2000);clearInterval(timer2);

7.1. 动画

.box{width:100px;height:100px;background-color: gold;position: fixed;left:20px;top:20px; }window.onload =function(){varoBox =document.getElementById('box');varleft =20;vartimer = setInterval(function(){ left++; oBox.style.left = left +'px';if(left>700){ clearInterval(timer); } },30); }

7.2. 制作时钟

结果是

当前时间是2019年3月12日星期二11:53:34

7.3. 制作倒计时

测试window.onload =function(){varoDiv =document.getElementById('div1');functiontimeleft(){varnow =newDate();varfuture =newDate(2019,10,30,24,0,0);// 实体从服务器获取varleft =parseInt((future-now)/1000);//转为秒varday =parseInt(left /86400);varhour =parseInt((left%86400)/3600);varmintue =parseInt(((left%86400)%3600)/60);varsecond = left%60;if(left<=0){window.location.href ="http://www.baidu.com"; } oDiv.innerHTML ='距离2019年11月30日晚上24点还有--'+ day +'天'+ hour +'时'+ mintue +'分'+ second +'秒'; } timeleft(); setInterval(timeleft,1000); }

8. 变量作用域

全局变量-函数外部顶一顶额变量，函数内部外部都可以访问，它的值可以共享，可以随意改它的值

局部变量-函数内部定义的变量，函数内部可以访问，外部无法访问，内部访问变量时，先在内部查找是否有这个变量，有的话就用内部的，没有的话就去外部找

9. 封闭函数

函数变量化

这种方式只能在函数定义后面调用

varmyalert = funtion(){ alert('hello');}myalert();/*

封闭函数的定义 (function(){...})();

1. 省去函数名

2. 局部变量不会影响其他变量（相同名字） */varstr ="abc";(function(){varstr ='欢迎访问我的主页';varmyfunc =function(){ ...; } myfunc; alert(str);})();

10. 闭包

函数嵌套，函数里面再定义函数，内部函数可以引用外部函数的参数和变量，变量存在闭包里面不会被回收

functionaa(b){vara=12;functionbb(){ alert(a); alert(b); }returnbb; }varcc = aa(24);// cc=bbcc();

同时闭包也可以改成封闭函数

varcc = (function(b){vara=12;functionbb(){ alert(a); alert(b); }returnbb; })(24);

10.1. 闭包的作用

可以在循环中存索引值

测试window.onload =function(){varaLi =document.getElementsByTagName('li');for(vari=0;i

私有变量计数器，外部无法访问，避免全局变量的污染

11. 内置对象

对象方法说明documentdocument.referrer获取上一个跳转页面的地址locaitonwindow.location.href

window.location.search

window.location.hash获取或者重定url地址

获取地址参数部分

获取页面锚点或者哈希值MathMath.random

Math.floor

Math.ceil获取0-1的随机数

向下取整

向上取整

vardata =window.location.search;// 在网址输入“..../？a=123” 的时候输出 “？a=123”alert(data);varhash =window.location.hash;// 在网址输入“....#=123” 的时候输出 “#=123”alert(hash);

12. 面向对象

12.1. JS面向对象

将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法， js对象类似字典

但是JS没有类，类是通过函数实现的

内建对象

宿主对象

自定义对象

12.2. 自定义对象：创建对象的方法

单体：

varTom = {name:'tom',age:18,showname:function(){ alert('my name is '+this.name); },showage:function(){ alert('my age is '+this.age); } } alert(Tom.name); Tom.showname();

工厂模式（少用）

通过一个函数创建对象

functionPerson(name, age){varo =newObject();// 创建空对象o.name = name; o.age = age; o.showname =function(){ alert('my name is '+this.name); }; o.showage =function(){ alert('my age is '+this.age); }returno; }vartom = Person('tom',18); tom.showname();

使用工厂方式创建的对象，使用的都是object，导致无法区分多种不同类型的对象

构造函数: 类型python类

构造函数就是用一般函数创建的，区别是加了new

构造函数的执行流程：

一旦调用构造函数，马上创建一个新的对象

将新建的对象设置为函数中的this

逐行执行函数的代码

将新建的对象作为返回值返回

使用同一个构造函数的对象，称为同一类对象，也称为该类的实例

functionPerson(name, age){this.name = name;// this为新建的对象，tom, jack，向新建对象添加属性this.age = age;this.showname =function(){// 为对象添加方法alert('my name is '+this.name); };this.showage =function(){ alert('my age is '+this.age); } }vartom =newPerson('tom',18);varjack =newPerson('jack',20); tom.showname();console.log(tominstanceofPerson);// trueconsole.log(tominstanceofObject);//alert(tom.showname == jack.showname);// false, 浪费资源

问题：每一个对象的方法都有一个新的方法，浪费资源

原型模式：比构造函数更高效

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

当函数以普通函数调用时，prototype没用

当函数以构造函数调用时，它所创建的对象都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__访问

当调用属性和方法时，首先在本身寻找，有就用，没有就去prototype原型寻找，没有就去原型对象的原型去找，直到找到Object原型

functionPerson(name, age){this.name = name;this.age = age; }// prototype上绑定的方法可以被所有person对象公用// prototype为原型对象，所有同一个类的实例都可以访问到这个原型对象，// 可以将共有的内容设置到这个原型对象中Person.prototype.showname =function(){ alert('my name is '+this.name); } Person.prototype.showage =function(){ alert('my age is '+this.age); }// toString是在打印对象的时候自动的内容，我们可以重写这个方法让它打印更详细的信息// console.log(tom); person[name=“tom”, age=20]Person.prototype.toString =function(){return"person[name = "+this.name +", age="+this.age +"]"; }vartom =newPerson('tom',18);varjack =newPerson('jack',20);console.log(tom.__proto__ == Person.prototype);// trueconsole.log(tom.hasOwnProperty("name"));// false，只有本身有属性才会true，这个方法在原型里alert(tom.showname == jack.showname);// true，更加高效

继承

// 定义父类functionFclass(name, age){this.name = name;this.age = age; } Fclass.prototype.showname =function(){ alert('my name is '+this.name); } Fclass.prototype.showage =function(){ alert('my age is '+this.age); }// 定义子类，继承父类functionSclass(name, age, job){// 继承属性：call或者apply// call：改变当前函数执行的this// apply和call的用法一样，只是语法不同： Fclass.apply(this, [name, age]);Fclass.call(this, name, age);this.job = job; }// 继承方法： prototypeSclass.prototype =newFclass(); Sclass.showjob =function(){ alert('my job is '+this.job); }vartom =newSclass('tom',20,'engineer'); tom.showage();

12.3. 自定义对象：this的用法

this就是object.window，指向的是一个对象，称为函数执行的上下文对象

根据函数调用方式的不同，this会指向不同的对象

以函数形式调用时，this为window

以方法形式调用时，this为调用方法的对象，比如

varname ="全局"; functionfun(){// console.log(this.name); // 这种方式永远是"全局"console.log(this.name);// 随着调用的对象不同而变化}varobj = { name:"sun", sayName:fun};varobj2 = { name:"kkk", sayName:fun}; console.log(obj.sayName ==fun); //true，同一个函数fun();// 以函数调用的时候，this指向对象（上下文），为Object.windowobj.sayName();// 以方法调用的时候，this为Object.object（“sun”）obj2.sayName();// 以方法调用的时候，this为Object.object（“kkk”）

结果是

true全局sunkkk

12.4. 宿主对象：Array：见5

13. 垃圾回收

就像人生活的时间长了，程序运行过程中也会产生垃圾，垃圾过多后，会导致程序运行速度过慢，需要垃圾回收机制

在JS中有自动垃圾回收机制，不需要也不能进行垃圾回收的操作

手动回收的方法：设置为null

vara =newObect();a =null;

14.DOM

14.1. DOM简介

DOM： Document Object Model文档对象模型

文档：一个HTML网页文档

对象：网页的每个部分都转为对象，比如body, head, h1..都转为对象（就可以通过面向对象对他进行操作）

模型：用来表示对象之间的关系，方便获取对象

14.2. 节点

节点是构成网页的基本节点，比如body, head, h1..

节点的类型不同，属性和方法也不同

文档节点：整个HTML文档

元素节点： HTML的HTML标签

属性节点：元素的属性

文本节点： HTML标签中的文本内容

节点的属性

节点节点名称节点类型节点值文档节点#document9null元素节点标签名1null属性节点属性名2属性值文本节点#text3文本内容

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

测试// 获取button对象varbtn =document.getElementById("btn");// 修改button的属性btn.innerHTML ="你好啊";我是按钮

14.3. 事件

事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间

JS和HTML之间的交互式通过事件实现的

对于WEB应用来说，有下面这些代表性的事件：点击，移动，按键等

window.onload =function(){varbtn =document.getElementById("btn");console.log(btn); btn.onclick =function(){ alert('hello'); } }....

14.4. 文档加载

也就是说需要使用window.onload = function(){}

14.5. DOM查询

获取元素节点

通过document对象调用

方法说明getElmentById()通过唯一id获取元素节点对象，返回对象getElementsByTagName()通过标签名获取一组元素节点对象，返回数组getElementByName()通过name获取一组节点对象，返回数组

属性的写法

htm属性和js属性要一直

class属性写成className

style属性里面的属性，有横杠的改成驼峰式font-size改成oA.style.fontSize

通过元素节点调用

方法说明getElmentsByTagName()获取当前节点的指定标签名后代节点属性说明childNodes当前节点的所有子节点(会获取所有的各种节点，包括空白)firstChild当前节点的第一个子节点（包括其他节点，空白等）firstElementChild当前节点的第一个子元素(IE8以上)lastChild当前节点的最后一个子节点childern当前节点的所有子元素（推荐）parentNode当前节点的父节点previousSibling当前节点的前一个兄弟节点（包括其他节点，空白等）previousElementSibling前节点的前一个兄弟元素(IE8以上)nextSibling当前节点的后一个兄弟节点

varbtn =document.getElmentById("btn"); btn.onclick =function(){// 获取id为city的元素varcity =document.getElmentById("city");// 查找city下的所有li节点varlis = city.getElementsByTagName("li");for(vari=0;i

其他查询方法

// 获取`body`标签varbody =document.body;// 获取`html`标签varhtml =document.documentElement;// 获取页面所有元素， body,html, head, script,...varall =document.all;varall =document.getElementsByTagName("*");// 获取class内容>IE9varbox1 =document.getElementByClassName("box1");// 获取含有class=“box1”的div// querySelector：根据CSS选择器来选择--只返回一个元素varbox1_div =document.querySelector(".box1 div");// 返回符合条件的所有boxvarbox1_div =document.querySelectorAll(".box1");

14.6. DOM增删改

方法说明appendChild()添加新的子节点到指定节点removeChild()删除子节点replaceChild()替换子节点insertBefore()在指定的子节点前面插入新的子节点createAttribute()创建属性节点createElement()创建元素节点createTextNode()创建文本节点getAttribute()返回指定的属性值setAttribute()设置属性值为指定的值

实例：设计一个增加删除表格

表格functiondelA(){// 点击后删除超链接所在行// 获取当前trvartr=this.parentNode.parentNode;// 获取要删除的员工名称varemp = tr.getElementsByTagName("td")[0].innerHTML;// 确认是否删除if(confirm("真的删除"+ emp +"？")){// 删除trtr.parentNode.removeChild(tr); }returnfalse;// 让a不要跳转}window.onload =function(){// 实现删除功能varallA =document.getElementsByTagName("a");for(vari=0; i"+" name.value="" +"<="" td>"+""+="" age.value="" td>"+"

添加新成员

name:age:Submit

14.7. DOM操作CSS

修改样式：元素.style.样式名 = 样式值

读取样式(适用于内联样式):元素.style.样式名

读取样式(当前正在显示的样式):

只能用于IE：元素.currentStyle.样式

其他浏览器：css对象 = getComputedStyle(元素名，伪元素（null）)， css对象封装了样式信息，css.width

window.onload =function(){varbox1 =document.getElementById("box1");varbox2 =document.getElementById("box1");varbtn01 =document.getElementById("btn");/*

* 功能：修改元素CSS样式

* 通过JS修改元素的CSS样式

* 语法：元素.style.样式名 = 样式值

* 注意：如果CSS中含有-, 应该换成驼峰状

* 其实设置的是内联样式（优先级高），所以会立即显示

*/btn01.onclick =function(){ box1.style.width ="300px"; box1.style.backgroundColor ="yellow"; };// 获取样式表样式（当前显示样式）btn02.onclick =function(){varar = getComputedStyle(box1); alert(ar.width); } };

15. DOM事件

15.1. 事件的基本使用

当事件的事件句柄(Event Handlers)被触发时(e.g, onmousemove)，浏览器会自动将一个事件对象(event)作为实参传递给响应函数

这个事件对象包含了很多信息(鼠标 / 键盘属性)，比兔坐标，鼠标滚轮方向，按键，等等...

window.onload =function(){// 当事件的相应函数被触发时(onmousemove)，浏览器会自动将一个事件对象(event)作为实参传递给响应函数// 这个事件对象包含了很多信息，比兔坐标，鼠标滚轮方向，按键，等等...// 为了处理不同浏览器兼容问题event = event ||window.event; btn.onmousemove =function(event){varx =window.event.clientX;vary =window.event.clientY; } }

15.2. 事件冒泡

事件冒泡：事件的向上传导，当后代元素上的事件被触发的时候，其祖先元素的相同事件也会被触发

大部分有用，但是可以取消

当点击s1的时候，会同时触发s1, box, docuemnt的onclick事件

15.3. 事件委派

将事件统一绑定给元素的共同祖先元素，这样后代元素上的事件触发的时候，会一直冒泡到祖先元素

事件委派：利用了冒泡，通过委派可以减少事件胖丁的次数，提高程序的高效性

window.onload =function(){varlis =document.getElementsByTagName("li");varul =document.getElementById("ul");varbtn =document.getElementById("btn");// 问题1：新加入的超链接没有绑定事件btn.onclick =function(){varli =document.createElement("li"); li.innerHTML ="链接新来的"; ul.appendChild(li); };// 问题2：只能为已经有的每一个超链接绑定事件，新的超链接需要重新绑定，不推荐// 解决方法：将其绑定给元素的共同的祖先元素/*

* for(var i=0;i

* lis[i].onclick = function(){

* alert("666");

* }

* };

*/// 因为这是一个冒泡，点击a，冒泡到ul---新添加的都有了ul.onclick =function(event){// 只有点击的是link的class时if(event.target =="link") { alert("我是ul的单击函数"); } } };

15.4. 事件绑定

addEventListener

参数1：事件字符串

参数2：回调函数，当事件触发的时候该函数执行

参数3：是否铺货期间触发函数，一般为false

按照顺序执行

window.onload =function(){ btn01. addEventListener("listener",function()[ alert(1); ],false); btn01. addEventListener("listener",function()[ alert(2); ],false); };

解决兼容性：

16. 应用：轮播图

视频教程+学习路线图

学习路线图

纯干货！Web前端教程之JavaScript篇！详细知识点路线图+视频教程

计算器

提示信息

添加新成员

你可能感兴趣的:(纯干货！Web前端教程之JavaScript篇！详细知识点路线图+视频教程)