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

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

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

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

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

我们第二季的课程主讲:面向对象与原型封装js库过渡到jQueryjQueryjQuery事件、动画、插件AjaxNode.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()

# 九、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 渲染企业网站

更新时间: 2025年2月14日星期五晚上7点31分