# html + css + javascript + jquery + node.js + vue.js 开发企业网站

# 1.第二学期第二季课程介绍

本季课程是在第一季课程上面做的进阶课程，建议先学完第一季课程，在学本季课程！

适用人群
1、初中以上学历，零基础，喜欢编程的所有从业人员，从零学起（需学完 第一学期的课程、第二学期第一季课程）；
2、会做简单的网页，但是不会JavaScript脚本，从零开始学习JS的大学生或者编程爱好者；
3、不清楚学习路线，不知道如何下手学习网页和网站开发的人；
4、手里有客户资源，又不想找别人做，想自己做项目如：网站、系统、APP、小程序等；
5、想学习编程搞副业的人；

课程概述
【课程概述】
本季课程作为第二学期第二季的课程，是在我们第一季课程基础上做的进阶课程和知识延伸，也是为之后开发项目做的知识梳理，若需要开发项目如网站、app、小程序，本季课程是必修课。

我们第二季的课程主讲：面向对象与原型、封装js库过渡到jQuery、jQuery、jQuery事件、动画、插件、Ajax、Node.js基础、正则表达式、Vue.js基础并渲染我们开发的企业网站及完成网站的留言板功能，建议所有同学观看。

具体课程安排，请看下面的文档目录

# 2.本季课程视频介绍

(opens new window)

# 3.课程视频学习

第二学期第二季【网易云课堂】 (opens new window)
第二学期第二季【B站】 (opens new window)

# 4.查看课程文档

# 章节1.第二季课程介绍

# 章节2.面向对象与原型

# 1、创建对象

# ① 创建对象，剖析问题：传统创建对象方法代码重复冗余，对象无法识别从属于哪个函数

# ② 传统创建对象：工厂模式（没有办法识别某一个对象的引用）

# ③ 构造函数(构造方法)创建特定的对象

# ④ 构造函数知识扩展，对象冒充构造函数，构造函数体内的函数返回值相等，但引用地址不相同

# 2、原型

# ① 原型创建对象

# ② 构造函数与原型对比，深度解析（图片示例）

# ③ isPrototypeOf()方法：判断一个对象是否指向了该构造函数的原型对象

# ④ 原型模式的执行流程（顺序）：先实例，在构造函数，最后原型

# ⑤ 删除实例属性访问原型属性：delete方法

# ⑥ hasOwnProperty()方法检测属性是否存在实例中，in操作符判断属性是否存在于实例或原型中，两者结合判断属性是否只存在原型中

# ⑦ 原型创建对象字面量声明方式

# ⑧ 原型创建对象字面量声明方式，原型的声明是有先后顺序，重写原型会覆盖（切断）之前的原型

# ⑨ 内置引用类型：String,Number,Array等本身也使用了原型

# ⑩ 原型创建对象缺点剖析：传参和引用共享问题

# ⑪ 组合构造函数+原型模式：解决 ⑩ 构造传参和引用共享问题

# ⑫ 动态原型模式：解决 ⑪ 组合构造函数+原型模式，代码封装在一起，一种封装的感觉

# ⑬ 寄生构造函数：工厂模式 + 构造函数【备胎模式（了解）】

# ⑭ 稳妥构造函数（了解即可）：在一些安全的环境中，比如禁止使用 this 和 new，就是寄生构造函数不能用new

# 3、继承

# ① js的继承方式通过原型链完成

# ② 继承父类属性方法的继承顺序：就近原则（实例化-->构造函数实例属性方法-->原型属性方法）

# ③ 继承后的实例从属关系

# ④ 对象冒充继承及问题:原型里面的属性方法无法继承

# ⑤ 组合继承【广泛应用】：原型链+借用构造函数(对象冒充)的模式，完成对象冒充的原型继承

# ⑥ 原型式继承（了解）

# ⑦ 寄生式继承：原型式+工厂模式结合

# ⑧ 继承终极版模式：寄生组合继承来实现继承：组合模式 + 寄生式继承

# 4、类和对象

# ① 理解类和对象

# ② 类中的constructor()方法（构造函数）

# ③ 类中添加方法

# ④ 类的继承

# ⑤ 类的继承中的super关键字：调用父类的构造函数constructor

# ⑥ 类的继承中的super关键字：调用父类的普通函数

# ⑦ 子类继承父类方法同时扩展自己的方法，子类在构造函数中使用super,必须放到this前面

# ⑧ 类和对象的几个注意点：

# 5、面向对象、原型、继承、类小结

# 章节3.封装js库过渡到jQuery

# 章节4.jQuery

# 1、代码风格：$包裹，加载模式：$(function () {})，获取元素DOM对象：get(索引)方法，多个库之间的冲突

# 2、选择器：

# ① ID 选择器、元素选择器、类(class)选择器，属性 length 或 size()方法来查看返回的元素个数

# ② jQuery对象转成DOM对象：get方法或下标获取

# ③ 群组选择器、后代选择器、通配选择器、指定元素前缀选择器

# ④ 层次选择器：jQuery提供后代选择器find、子选择器children、next 选择器、nextAll 选择器

# ⑤ jQuery提供：prev同级上一个元素，prevAll同级所有上面的元素

# ⑥ jQuery提供：siblings()方法：上下同级所有元素，正好集成了 prevAll()和 nextAll()两个功能的效果

# ⑦ jQuery提供：nextUntil()方法：查找同级后面的节点，遇到指定元素停止选定，prevUntil()方法：查找同级前面的节点，遇到指定元素停止选定

# ⑧ 属性选择器：一般超链接用得多点

# 3、过滤器（伪类选择器）

# ① :first，选取第一个元素，返回单个元素，jQuery提供first()方法

# ② jQuery对象转成DOM对象：get方法或下标获取

# ③:not(selector)， :not(.active)选取class不是active的元素，返回元素集合，jQuery提供not(selector)方法

# ④ :eq(index)，选择索引(0 开始)等于 index 的元素，返回单个元素，jQuery提供eq()方法

# ⑤ :gt(index)，选择索引(0 开始)大于 index 的元素，返回元素集合

# ⑥ :lt(index)，选择索引(0 开始)小于 index 的元素，返回元素集合

# ⑦ :even，选择索引(0 开始)是偶数的所有元素，返回元素集合

# ⑧ :odd，选择索引(0 开始)是奇数的所有元素，返回元素集合

# ⑨ :header，选择标题元素，h1 ~ h6，返回元素集合

# ⑩ :focus，选择当前被焦点的元素，一般用在表单元素上

# 4、内容过滤器

# ① :contains(text)，选取含有text文本的元素，返回元素集合

# ② :empty，选取不包含子元素或空文本的元素，返回元素集合

# ③ :has(selector)，如：:has(.active) 选择后代元素含有class 是active 的元素，jQuery提供has()方法

# ④ :parent，与:empty刚好相反，选取含有子元素或文本的元素，返回元素集合

# 5、jQuery提供：parent()、parents()、parentsUntil方法特别说明

# ① jQuery提供：parent()方法：选取当前元素的父元素，注意与 :parent的区别

# ② jQuery提供：parents()方法：选择当前元素的父元素及祖先元素

# ③ jQuery提供：parentsUntil方法，如：parentsUntil('ul') 选择当前元素往上一层级查找，遇到ul元素停止

# 6、可见性过滤器

# ① :hidden，选取所有不可见元素，返回元素集合，一般包含：CSS 样式为 display:none、input 表单类型为type="hidden"和 visibility:hidden 的元素

# ② :visible，选取所有可见元素

# 7、子元素过滤器

# ① :first-child，获取每个父元素的第一个子元素，返回元素集合

# ② :last-child，获取每个父元素的最后一个子元素，返回元素集合

# ③ :only-child，获取只有一个子元素的元素，返回元素集合

# ④ :nth-child(odd/even/eq(index))，获取每个自定义子元素的元素(索引值从 1 开始计算)

# 8、jQuery提供选择器和过滤器方法

# ① is()方法：传递选择器、DOM、jquery 对象、函数

# ② hasClass方法，hasClass(); hasClass(class)，判断某个元素是否有某个class，比较常用，和 is 一样，只不过只能传递class

# ③ slice方法，slice(start, end)，选择从 start 到 end 位置的元素，如果是负数，则从后开始

# ④ end方法，end()，获取当前元素前一次状态：可以找它的父节点，也可以找它的相邻前一个兄弟节点

# ⑤ contents方法，contents()，获取某元素下面所有元素节点，包括文本节点，如果是 iframe，则可以查找文本内容

# ⑥ filter方法，filter()，比较灵活的选择器，扩展性较好

# 9、表单选择器

# ① jQuery方法：通过type类型或者name字段获取表单组件，通过val()方法获取表单组件的值

# 10、jQuery操作DOM及CSS

# 1、设置元素及内容：html(),html(value),text(),text(value)

# 2、获取或设置表单内容：val()，val(value)

# 3、设置单选框、复选框默认选中状态val()，非常好用

# 4、元素属性操作：attr()和 removeAttr()

# 5、元素CSS样式操作

# Ⅰ、css()方法

# ① css()方法获取、设置元素样式

# ② css()方法传递多个样式属性的数组，得到样式属性值对象数组，$.each(box,function(attr,value){})遍历原生态对象数组，jQuery对象数组采用$(selector).each(function(index,element){})方法遍历

# ③ css()方法传递多个 CSS 样式的键值对

# ④ css()方法可以传匿名函数

# Ⅱ、addClass()方法、removeClass()方法、toggleClass()方法

# ① addClass()方法、removeClass()方法

# ② toggleClass()方法：切换class

# Ⅲ、jQuery提供其他css操作方法

# ① jQuery提供：width()、width(value)、width(function (index, width) {})方法：获取、设置、通过匿名函数设置某个元素的长度

# ② jQuery提供：height()、height(value)、height(function (index, width) {})方法：获取、设置、通过匿名函数设置某个元素的高度

# ③ jQuery提供内外边距和边框尺寸方法：innerWidth()，innerHeight()，outerWidth()，outerHeight()，outerWidth(ture)，outerHeight(true)

# ④ jQuery提供元素偏移方法：offset()、position()、scrollTop()、scrollTop(value)、scrollLeft()、scrollLeft(value)

# 11、jQuery提供的DOM节点操作方法

# 1、创建节点

# 2、插入节点

# ① 内部插入节点 append(content)：向指定元素内部后面插入节点content

# ② 内部移入节点（不需要创建节点） appendTo(content)：将指定元素移入到指定元素content 内部后面

# ③ 内部插入节点 prepend(content)：向指定元素 content 内部的前面插入节点

# ④ 内部移入节点（不需要创建节点） prependTo(content)：将指定元素移入到指定元素content 内部前面

# ⑤ 外部（同级）插入节点 before(content)：向指定元素的外部前面插入节点content

# ⑥ 外部（同级）移到节点（不需要创建节点）insertBefore(content)：将指定节点移到指定元素content 外部的前面

# ⑦ 外部（同级）插入节点 after(content)：向指定元素的外部后面插入节点content

# ⑧ 外部（同级）移到节点（不需要创建节点）insertAfter(content)：将指定节点移到指定元素content 外部的后面

# 3、包裹节点

# ① wrap(html)：向指定元素包裹一层html 代码

# ② wrap(element)：向指定元素包裹一层 DOM对象节点

# ③ wrap(function (index) {})：使用匿名函数向指定元素包裹一层自定义内容

# ④ unwrap()：移除一层指定元素包裹的内容

# ⑤ wrapAll(html)：用 html 将所有元素包裹到一起

# ⑥ wrapAll(element)：用 DOM 对象将所有元素包裹在一起

# ⑦ wrapInner(html)、wrapInner(element)、wrapInner(function (index) {})：向指定元素的子内容包裹一层

# 4、节点操作

# ① 复制节点 clone(true)、替换节点：replaceWith、replaceAll

# ② 删除节点：remove() 或者 detach()

# ③ 删除掉节点里的内容empty()

# 章节5.jQuery事件、动画、插件

# 一、事件

# 1、简写事件

# 2、复合事件：hover([fn1,]fn2)

# 3、jQuery中的事件对象：target、currentTarget、e.stopPropagation()、e.preventDefault()、return false

# 4、jQuery中的高级事件：on、off 和 one

# ① on方法

# ② off方法:移除事件

# ③ one方法:仅触发一次的事件

# 5、jQuery中的模拟操作

# 二、动画

# 1、显示：show、隐藏：hide

# ① 直接调用：显示show()、隐藏：hide()

# ② 传递一个参数（毫秒）：显示show(1000)、隐藏：hide(1000)

# ③ 传递一个预设参数：显示show(slow|normal|fast)，隐藏：hide(slow|normal|fast)，slow：600 毫秒，normal：默认 400 毫秒，fast：200 毫秒

# ④ 传递第二个参数回调函数，实现列队动画（排队动画）：show(毫秒数|slow|normal|fast，function(){})，hide(毫秒数|slow|normal|fast，function(){})

# ⑤ 列队动画，可以使用函数名调用自身或者arguments.callee 匿名函数自调用

# ⑥ toggle()切换show()和hide()

# 2、滑动：slideUp、卷动：slideDown、切换滑动卷动：slideToggle

# 3、淡入：fadeIn、淡出：fadeOut、切换淡入淡出：fadeToggle、指定透明度：fadeTo

# 4、自定义动画 animate

# ① animate基本用法：css样式自定义，同步动画

# ② animate用法：animate(css,动画时间,回调函数)

# ③ animate位移动画（将元素设置绝对定位或相对定位）

# ④ 列队动画方法:queue()方法，连缀执行下一个dequeue()方法，clearQueue()清理列队动画后面还没有执行的

# 5、动画相关方法：stop()强制停止动画，delay()延迟动画执行

# 6、判断在运动的动画，通过过滤器:animated

# 7、动画全局属性：$.fx.interval（设置每秒运行的帧数），$.fx.off（关闭页面上所有的动画），默认swing(缓动)，linear(匀速运动)

# 三、jQuery插件

# 1、引入：下载本地引入、或在线引入

# 2、使用插件方法

# 章节6.Ajax

# 一、原生js中的Ajax

# 1、XMLHttpRequest (简称 XHR，XHR API)

# ① 第一步：调用 open()方法准备发送请求（发送请求前的准备工作）：三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步

# ② 第二步：通过 send()方法进行发送请求：一个参数：作为请求主体发送的数据，如果不需要则，必须填 null

# ③ 第三步：发送完了之后，得监听结果（监听服务器给你的请求结果），通过readystatechange 事件监听服务器给你的结果

# 2、理解get、post请求

# ① getAllResponseHeaders()获取整个响应头信息，getResponseHeader()获取单个响应头信息，setRequestHeader()设置请求头信息

# ② get请求

# ③ post请求

# ④ 小结get和post请求

# 3、Fetch API

# ① Fetch API基本用法介绍

# ② XHR 与 Fetch 中的Content-Type(或者小写content-type)

# 4、 XHR（xhr）与 Fetch（fetch）的区别（包括：jQuery、Axios、umi-request的说明）

# 二、jQuery中的Ajax

# 1、第二层封装：load()方法，$.get()和$.post()方法

# ① load()方法是局部方法：异步加载静态文件如：html文件、json文件等

# ② $.get()和$.post()方法：是全局方法，无须指定某个元素，适合传递参数到服务器请求数据

# 2、最高层封装：$.getJSON() 和 $.getScript()

# ① $.getJSON()方法：专门用于加载 JSON 文件的

# ② $.getScript()方法：按需加载接口或js文件

# 3、最底层的封装：$.ajax()

# 4、表单序列化

# ① 常规形式的表单提交（表单提交数据）

# ② jQuery中的表单序列化提交数据（表单提交数据）

# ③ $.param()方法将对象转换为字符串键值对格式

# 5、jQuery中的跨域jsonp

# ① jQuery中的跨域jsonp使用

# ② 延伸一下：jQuery中的跨域jsonp模拟百度搜索提示数据

# 6、 jqXHR 对象: when()方法、done()方法、always()方法和fail()方法

# 章节7.Node.js基础

# 一、Node环境搭建（安装node.js）

# 1、下载安装node.js

# 2、检查node.js是否安装成功

# ① 命令行：node -v npm -v npx -v

# ② 命令行：node 运行js代码

# ③ 命令行：运行js文件代码，清屏命令: cls

# 二、NVM（node版本管理工具，切换node版本）

# 1、下载安装nvm

# 2、检查nvm是否安装成功：nvm -v

# 3、设置nodejs、npm下载源（可选）

# 4、使用NVM包管理器

# 三、NPM包管理（npm包管理工具）

# 1、 package.json 文件如何生成

# 2、 NPM (npm) 、 CNPM (cnpm)

# 1、npm

# 2、cnpm (可选)

# ① 安装cnpm

# ② 接下来就可以使用cnpm命令安装各个包、插件、模块等等

# ③ 在vscode中运行命令

# ④ npm 或 cnpm 常用命令

# 四、Node的模块

# 1、全局模块：process为例

# 2、系统模块： path、fs模块为例

# 3、自定义模块： exports、module输出、require引入

# 4、重要系统模块：http模块，搭建网页服务器

# 五、Node中的数据交互，重要系统模块：url模块处理get请求,querystring模块处理post请求

# 1、url模块处理GET（get）请求：url.parse(url,true)

# 2、querystring模块处理POST（post）请求：querystring.parse()

# 六、nodejs项目监测文件变化，自动重启工具：Nodemon

# 1、安装nodemon

# 2、修改package.json 中的启动命令

# 3、配置nodemon，告诉它哪些文件需要修改后重启服务（可选项）

# 七、nrm (使用nrm管理npm下载源)

# 1、安装nrm

# 2、nrm内置的命令函数

# 3、查看当前正在使用的 npm 镜像源

# 4、切换 npm 镜像源

# 八、系统模块：fs模块详解

# 1、读取文件：异步readFile、同步readFileSync、promise操作

# 2、可读流模式：createReadStream()方法

# 3、创建文件夹：mkdirSync , mkdir

# 4、删除文件夹：rmSync , rm

# 5、重命名文件：renameSync , rename

# 6、监听文件变化: watch

# 7、写入文件：writeFile、writeFileSync，追加写入文件：appendFile、appendFileSync

# 8、写入文件：创建可写流 createWriteStream()

# 9、软链接symlinkSync、symlink 硬链接linkSync、link

# 九、node.js + jQuery完成：网页 “联系我们” 页面的留言板功能

# 十、系统模块：crypto模块详解（加密：对称加密、非对称加密、哈希函数）

# 1、对称加密、封装加密函数

# 2、非对称加密

# 3、哈希函数加密

# 4、对留言板的手机号做一个加密

# 章节8.正则表达式

# 一、创建正则表达式

# ① new运算符创建正则表达式

# ② 字面量方式创建正则表达式

# 二、测试正则表达式

# ① test方法：在字符串中测试模式匹配，返回 true 或 false

# ② exec方法：在字符串中执行匹配搜索，返回结果数组，执行失败，则返回 null

# 三、字符串的正则表达式方法

# ① match方法：就是一个查找的功能，获取匹配的字符串，返回数组或 null

# ② search方法：根据匹配的字符串，返回位置索引（从0开始）

# ③ split方法：按照匹配模式，拆分成字符串数组

# ④ replace方法：替换匹配到的数据

# 小案例：模拟百度搜索，搜索的关键字设置成红色

# 四、正则表达式RegExp对象的静态属性、实例属性（了解）

# 1、静态属性

# ① 属性：input，短名：$_ ，当前被匹配的字符串

# ② 属性：leftContext，短名：$` ，最后一次匹配前的子串

# ③ 属性：rightContext，短名：$' ，在上次匹配之后的子串

# ④ 属性：lastMatch，短名：$& ，最后一个匹配字符串

# ⑤ 属性：lastParen，短名：$+ ，最后一对圆括号内的匹配子串

# 2、实例属性

# 五、正则表达式元字符（包含特殊含义的字符）

# 一、单个字符和数字、重复字符

# 1、点符号匹配除了换行符（\n）外的任意字符

# 2、点符号和重复字符配合使用

# ① 重复字符：x?，表示：匹配 0 个或 1 个 x （x可以换成任意字符）

# ② 重复字符：x*，表示：匹配 0 个或 1 个或者任意多个 x （x可以换成任意字符）

# ③ 重复字符：x+，表示：匹配至少1个或者任意多个 x （x可以换成任意字符）

# ④ 重复字符：x{m,n}，表示：匹配最少 m 个、最多 n 个 x， x{m}表示：只能有m个x， x{m,}表示：有m个x或者以上个x （x可以换成任意字符）

# ⑤ 重复字符：(xyz)+，表示：匹配至少一个(xyz)，括号可以看成分组，分组里面的元素可以是任意多个字符

# ⑥ 任意一个匹配：[a-z]匹配26个小写字母任意一个，[A-Z]匹配26个大写字母任意一个，[0-9]匹配0到9的数字任意一个，[a-zA-Z0-9]匹配混合字母和数字中的任意一个

# ⑦ 任意一个不匹配：[^a-z]不匹配26个小写字母，[^A-Z]不匹配26个大写字母，[^0-9]不匹配0到9的数字，[^a-zA-Z0-9]不匹配混合字母和数字

# 3、字符类：锚字符

# ① 锚字符：^ ，表示：从行首开始匹配

# ② 锚字符：$ ，表示：从行尾开始匹配

# 4、字符：\d ，匹配数字，和字符集合 [0-9]相同，字符：\D ，匹配非数字，同[^0-9]相同

# 5、字符：\w ，匹配字母和数字及_，和字符集合 [a-zA-Z0-9_]相同，字符：\W ，匹配非字母和数字及_，同[^a-zA-Z0-9_]相同

# 二、空白字符

# ① 字符：\s，表示：匹配空白字符、空格、制表符和换行符

# ② 字符：\b，表示：到达边界

# 三、选择字符（|）选择模式，匹配如：jpg|png|gif，非相等包含的意思

# 四、分组模式：()做分组，\1或$1匹配第一个分组中的内容，\2或$2匹配第二个分组中的内容，依次类推

# ① 分组模式：()做分组

# ② $1可以获取到第一个分组内容

# ③ 小案例：$1获取到第一个分组内容，并做替换

# ④ 小案例：获取多个分组内容，进行替换

# 六、正则表达式：贪婪和惰性

# 七、正则表达式使用 exec 返回数组

# 八、捕获性分组和非捕获性分组

# 九、分组嵌套、前瞻捕获、特殊字符匹配、换行模式

# 十、书写常用正则表达式

# ① 手机号正则

# ② 邮政编码正则

# ③ 简单的电子邮件正则

# ④ 匹配图片格式

# ⑤ 删除多余空格

# ⑥ 删除首尾的空格，中间的空格不删除

# ⑦ 延伸：将11位手机号中的4-7位号码换成 *

# 章节9.Vue.js基础

# 一、课前准备：启动node服务器，引入vue.js

# 二、体验vue的数据响应式：① 配置项data中的数据响应式，及渲染到页面上的真实DOM效果、② 循环语句，事件处理体验、③ vuejs计算属性体验

# 三、理解vue的注入、虚拟DOM及底层原理：vue实例成员的注入、虚拟DOM、虚拟DOM的底层原理

# 四、案例：node.js + vue.js 渲染企业网站

← 第二学期第一季（课程学习顺序：02）第二学期第三季（课程学习顺序：04） →