JavaScript 视频教程全集课程目录
第 01 节 JavaScript 面试中不可忽视的小问题
很多同学在 web 前端开发面试中, 感觉自己回答的不错, 结果却是未能收到招聘企业下轮的面试通知, 这是为什么呢?
因为您对问题所涉及的知识理解不深刻, 不能很好的转化成自己的语言说出来, 所以以在面试过程中给面试官的感觉不够专业, 怀疑您的答案是从网上搜的, 也是有可能的, 如果是这样, 那可就惨了~
这节课 KwooShung 老师为大家讲解, 那些同学们自认为很理解并且在 Web 前端开发 (JavaScript 方向) 面试中经常被面试官问到的问题, 看似简单, 但是很少有人能够全面的说出来, 更多的是说一部分, 那么面试官会认为您理解的比较片面, 很容易怀疑您的能力, 因为这是对 JavaScript 最基本的认识, 如果您的回答让面试官对你画个问号, 事情就不妙了. 虽然感觉自己回答的挺好, 就是面试完毕后, 没有了下文, 有类似经历的同学要注意了, 之所以会出现这种情况, 是因为您对 JavaScript 的认识不全面, 就一部分, 即使这部分你说的再好再专业, 也是不全面的.
这次 KwooShung 老师为大家全面讲解 JS 面试中常见的三个最基本问题, 各位同学一定不能错过!
===========================================================================
第 02 节 变量与常量及常用的开发工具介绍
1)JavaScript 引入的方式, 外联和内嵌, 使用方法的实例展示.
2)变量与常量的详细讲解并且通过实例进行深刻理解.
3)常见的专业命名法则, 提高您的专业指数和代码形象.
4)JavaScript 代码调试工具的基本使用, 为后面更高级调试方法的学习打基础, 帮助您写出最快最好的代码!
===========================================================================
第 03 节 函数
函数这节课很重要, 是咱们今后写出优秀的 JS 代码的基本哦, 内容如下:
自定义函数:
无参函数
单参函数
多参函数
递归函数
匿名函数
返回值函数
构造函数
系统 / 内置函数: 系统内置函数有很多, 在视频里会有详细介绍.
===========================================================================
第 04 节 数据类型
这节课给大家介绍一下 JavaScript 的数据类型, 数据类型在 JavaScript 中是重中之重, 因此请大家要认真学习哦~
数据类型
什么是数据类型?
原始数据类型:
- undefined
- null
- number
- string
- boolean
引用数据类型
原始数据类型和引用数据类型有什么区别?
===========================================================================
第 05 节 运算符
这节课学习以下运算符: 算术运算符(8 种): 它在 JS 中特别在动画缓动中起到至关紧要的作用.
赋值运算符(6 种): 在编写代码的时候, 咱们会有很多赋值的运算.
比较运算符(8 种): 在程序代码中, 比较运算符无处不在, 无时无刻都在做比较运算.
逻辑运算符(3 种): 逻辑运算符能够把语句连接成多种条件的复杂语句, 很多情况下我们都会用到.
其他运算符(4 种): 另外其他的一些运算符同样有很多, 但是最常用的大概有四种, 他们也起到了很大的作用.
以上运算符囊括了 JavaScript 中用的最多而最实用的运算符, 也是 JS 中非常重要的内容.
为了让大家更容易理解, 在视频里会有比文字教程更多更精彩的实例讲解, 大家一定不要错过哟~
===========================================================================
第 06 节 控制流 - 条件结构
这节课学习以下内容:
单一选择结构
二路选择结构
多重选择结构
三元运算符
switch 结构
在之前的课程中提到了三元运算符, 在这节课里我们来学习如何写出三元运算符, 选择结构是如何转变为三元运算符的.
而比较运算符, 逻辑运算符将会在本节课运用到, 条件结构是为了让我们让程序按照我们的想法思路去执行, 比如微博发布的字数, 注册时的格式验证等, 都需要我们的 JavaScript 代码判是否正确, 控制 JS 如何去运算执行.
视频会有比文字教程讲解更多的内容, 更加透彻, 更加精彩!
===========================================================================
第 07 节 控制流 - 循环结构
今天咱们来控制流的另一种 -- 循环, 内容如下:
do...while 循环
while 循环
for 循环
for...in
break(关键字)与循环的配合使用.
continue(关键字)与循环的配合使用.
在之前的课程中提到的选择结构在很多情况下需要与咱们的循环进行配合, 因此这节课同样重要, 如果没有它, 我们将无法实现网页上的各种效果, 比如幻灯片, 滑动门, 运动(动画), 瀑布流等效果. 所以请大家一定要认真听讲哦!
视频会有比文字教程讲解更多的内容, 更加透彻, 更加精彩!
===========================================================================
第 08 节 对象篇 - 类和对象
从这节课开始我们就要进入对象篇咯, JavaScript 是一种非纯面向对象的编程语言, 今天我们来讲解面向对象编程中最重要的两个知识 --"类" 和 "对象";
如果大家对 "类" 和 "对象" 不理解的话, 就无法编写出完美的面向对象的程序, 所以只要大家理解了面向对象的话, 无论今后大家学习 php,Java 和 C# 等面向对象的编程语言都会有莫大的帮助, 因此请大家一定要学习好并理解这节课讲解的概念和例子.
[注] 此节课只是针对不理解 "类" 和 "对象" 的概念的同学所量身定制的课程, 如果你对这两个概念已有深刻理解, 那么就可以跳过此节视频课程.
===========================================================================
第 09 节 对象篇 - 自定义对象
上节课我们学习了类与对象, 今天我们开始定义真正的对象了, 只有大家对下面的几个问题深刻理解了, 才能写出漂亮的面向对象的脚本.
本节课重点讲解:
如何创建自定义对象?
如何调用并使用自定义对象?
如何取得对象的属性?
如何设置对象的属性?
取得对象属性的方法有哪些?
===========================================================================
第 10 节 对象篇 - 类与对象(上)
咱们在第八课讲解了一些类和对象的概念, 这节课咱们来学习一下在 JavaScript 中如何实现类和对象, 而类分为几种呢?
本节课, 老师将带领大家学习以下内容:
什么是枚举?
什么是静态类?
如何创建一个非静态类?
静态类和非静态类有什么区别?
如何实例化一个类?
with 和 this 关键字的使用方法, 以及需要注意的问题是什么?
为什么 with 关键字要慎用?
什么是构造函数?
这节课是在 JavaScript 面向对象编程中极为重要的内容之一, 也是我们作为一个前端开发工程师 (JS 方向) 必须要掌握的内容!
===========================================================================
第 11 节 对象篇 - 类与对象(中)
这节课, 老师将带领大家学习类的属性, 方法以及构造函数的详细讲解, 内容如下:
构造函数详解
类的实例化属性
类的实例化方法
类的私有属性
类的私有方法
这节课是在 JavaScript 面向对象编程中极为重要的内容之一, 也是我们作为一个前端开发工程师 (JS 方向) 必须要掌握的内容!
===========================================================================
第 12 节 对象篇 - 类与对象(下)
这节课, 咱们主要讲解的内容如下:
portotype 详解(这里的 portotype 不是类库, 是用来扩建对象的一个东东, 它非常重要, 比如咱们今后的原型继承就得使用它来实现)
类属性
类方法
对象属性
对象方法
[注] 类属性和类方法不等同于实例化属性和实例化方法
===========================================================================
第 13 节 对象篇 - 内置对象 String(1)
从这节课开始, 咱们就开始讲解常用内置对象, 主要讲解的内容如下:
内置对象 String
什么是对象直接量
String 类型转换的方法 / 函数
===========================================================================
第 14 节 对象篇 - 内置对象 String(2)
这节课我们接着上节课继续讲 JavaScript 内置对象 - String 对象中常用的方法将对我们今后功能上做判断起到很大的作用, 也会简化我们很多操作!
今天课程的主要内容如下:
什么是 ASCII 码?
ASCII 码的作用是什么?
字符串的各种截取与连接方法;
字符串的替换方法;
正则表达式在替换方法中的应用;
这节课所讲解的 string 对象中的属性方法很重要, 因为它关系到我们今后很多功能的开发和实现, 比如判断文件扩展名, 注册 / 登录验证, 采集器, 甚至我们写自己的 dom 选择器 (比如类似 jQuery 或 CSS3 选择器的 js dom 选择器) 等都需要我们字符串中很多的方法, 因此请大家一定要好好掌握 String 对象!
===========================================================================
第 15 节 对象篇 - 内置对象 String(3)
这节课我们接着说 String 对象中的字符串分割截取功能, 在视频中我们也会第一次接触到数组!
今天课程的主要内容如下:
字符串分割成数组的方法;
字符串截取的方法;
这节课我们虽然主要讲解两个方法, 但它们的重要性不可小视, 比如我们平时设置文章的标签, 关键词等如何进行分割呢? 如何针对不同的需求截取字符串? 如何计算截取位置等? 我们将会在视频中进行演示, 在今后我们也会接触到更多的截取方法和需求.
===========================================================================
第 16 节 对象篇 - 内置对象 String(4)
今天是我们的最后一节 String 对象课程, 这节视频中我们将剩下的 String 对象的常用方法讲完!
主要内容如下:
字符的大小写转换;
大小写字母转换的实际应用案例;
如何扩建内置对象;
这节课扩建内置对象的方法尤为重要, 以及扩建内置对象到底好不好, 大小写字母转换在实际开发中的作用!
===========================================================================
第 17 节 对象篇 - 内置对象 Array(上)
这节课开始咱们就接触数组咯, 主要内容如下:
如何创建数组;
如何计算数组长度;
如何链接 (合并) 数组;
如何将数组元素按照指定的符号分割为字符串;
如何删除数组中的元素;
如何往数组中添加元素;
数组几乎是任何程序都必须要有的且十分重要的东东, 平时做任何稍微复杂点儿的开发, 数组是必须参与的!
===========================================================================
第 18 节 对象篇 - 内置对象 Array(中)
我们接着学习数组, 本节课主要内容如下:
如何清空数组;
如何向开头追加数组元素;
如何倒叙所有数组元素;
如何从数组尾部删除元素;
如何删除数组中的元素;
如何选择部分元素数组;
如何删除部分元素并追加部分元素;
如何按照顺序排序数组元素;
数组元素如何转换为字符串;
注: 这节课我们就把 Array 中最常用的方法讲解完毕了, 请大家一定要在课下好好练习.
===========================================================================
第 19 节 对象篇 - 内置对象 Array(下)
今天是我们 JS 课程中的数组的最后一部分, 本节课主要内容如下:
数组元素简单排序的思路;
数组元素简单排序的方法;
数组元素简单排序的精简方法;
什么是二维数组?
什么是多维数组?
二维数组如何进行循环迭代输出?
注: 咱们学习的这三节数组课程无论是在今后学习其他程序, 面试写 JS 效果都是非常至关重要的内容, 请大家课下要好好复习并多练习, 遇到问题可以到 "问问" 板块进行提问~
===========================================================================
第 20 节 对象篇 - 内置对象 Math
在今后的 JS 开发中, 我们经常会用到数学计算, 但是一些特殊的数学符号我们没有办法来实现计算, 因此 JavaScript 为我们提供了这种专门针对数学运算的对象 --Math! 在 Math 对象中将包含很多计算方法 / 函数和属性. 通过这些方法和属性我们就能够计算各种运算, 比如操作页面元素做出对应的动画运动等效果.
本节课主要内容如下:
对象属性:
取得自然对数;
取得 2 的自然对数;
取得 10 的自然对数;
取得以 2 为底的自然对数;
取得以 10 为底的自然对数;
取得圆周率;
取得 2 的平方根倒数;
取得 2 的平方根;
对象方法:
绝对值计算;
正弦值计算;
反正弦值计算;
余弦值计算;
反余弦值计算;
正切值计算;
反正切值计算;
角度计算;
自然对数计算;
上舍入计算;
下舍入计算;
四舍五入计算;
幂计算;
随机数计算;
计算最高值;
计算最低值;
[注] 本节课内容看上去可能感觉比较难, 其实有些数学运算符很简单, 只需要给出对应得值就能得出想要的结果, 这些一切都有计算机去计算, 并不需要我们上学的时候写很多公式才能计算出来. 只是在今后各种数学算法中, 会用的更多, 对我们今后的算法学习起到很大的作用.
===========================================================================
第 21 节 对象篇 - 内置对象 Date(上)
时间, 在我们日常开发中尤为重要, 在 JavaScript 中我们也需要做很多时间方面的效果, 比如团购网站的倒计时, 根据时间显示不同的提示语等等都需要我们的 js 去做时间方面的处理工作, 因此这节课我们来讲解一下 date(时间对象)的应用!
本节课主要内容如下:
年, 月, 日的获取方法;
时, 分, 秒的获取方法;
毫秒和特殊的毫秒获取方式;
获取年份的时候应该注意哪些?
getYear 为什么要废弃而启用新的获取方法呢?
获取月份的时候应该注意哪些?
[注] 本节课内容主要讲解时间方面的获取, 下节课我们来讲解时间设置, 倒计时等实现思路, 只有先把我们的时间获取掌握 OK, 才能更好的做出倒计时效果!
===========================================================================
第 22 节 对象篇 - 内置对象 Date(下)
上节课, 我们学习了内置对象 date 的一些基本应用, 比如得到当前时间, 这节课我们来更深入的学习一下 date 对象的应用.
本节课主要内容如下:
设置年, 月, 日方法;
设置时, 分, 秒的方法;
倒计时等实现思路;
倒计时时是如何进行计算的时间?
如何也面不刷新的情况下, 每隔一段时间运行一次代码呢?
编写倒计时效果注意哪些问题, 有哪些漏洞?
===========================================================================
第 23 节 内置对象 - Number 和 Function
这节课是我们内置对象这章内容的最后一节, 本节课我们将讲解剩下的两个对象, 分别是 Number 和 Function 对象.
内容如下:
在 JavaScript 中如何表示最大可用的数值大小?
在 JavaScript 中如何表示最小可用的数值大小?
在 JavaScript 中如何表示正无穷大, 在什么情况下会返回正无穷大?
在 JavaScript 中如何表示负无穷大, 在什么情况下会返回负无穷大?
NaN 为什么属于 Number 对象?
如何保留小数点 N 位?
什么是方法重载?
如何实现方法重载?
arguments 对象是什么, 有什么作用?
匿名方法如何实现递归调用?
如何通过 Function 对象如何定义函数, 它与 function 有什么不同?
[注] 下节课开始我们将开始学习 BOM & DOM 对象, 也就是说从下节课我们将开始对页面元素进行控制操作了.
===========================================================================
第 24 节 BOM & DOM 对象模型的介绍
这节课我们就进入了新的章节了 -- BOM&DOM 对象模型的应用与实战, 也就是说从从现在开始, 我们将开始对页面元素进行控制操作了!
本节课主要内容如下:
什么是 BOM 对象?
什么是 DOM 对象?
浏览器对象最大的对象 --window 的介绍.
window 对象主要包含哪几种最重要最常用的对象?
window 中最常用的方法函数讲解.
[注] BOM 对象以及 DOM 对象有很多同学都不太清楚, 在这里我们将对其进行详细的介绍, 请同学们要深刻理解, 因为这也是我们在职场面试的时候经常会问到的问题.
===========================================================================
第 25 节 BOM 对象 - Navigator
这节课我们来学习 Navigator 对象, 此对象主要用于得到浏览器的信息, 获取信息的时候我们将初次接触 JavaScript 正则表达式的应用.
本节课主要内容如下:
Navigator 对象是做什么的?
Navigator 对象什么属性最常用?
如何对浏览器名称及版本号进行判断?
如何使用正则表达式匹配字符串?
如何检查 Cookie 是否开启, 浏览器是否支持?
[注] 此节课相对来讲比较简单, 主要难点在与使用正则匹配字符串, 对于正则表达式掌握不好的同学也不要担心, 因为这节课只需要知道正则表达式怎么去用就行了, 在后面的课程我们会对正则表达式进行更详细的讲解!
===========================================================================
第 26 节 BOM 对象 - Screen
本节内容如下:
屏幕分辨率大小计算;
屏幕的可用分辨率大小计算;
网页的可见区宽度计算;
网页的可见区高度计算;
网页的可用区宽度计算;
网页的可用区高度计算;
网页的滚动条卷去的高度计算;
网页的滚动条卷去的宽度计算;
[注] 本节课的内容同样比较重要, 因为它们的计算直接影响我们常做的效果, 比如: 网页自动向下滚动, 导航始终固定在网页上方或底部, 返回网页顶部, 弹出框固定位置, 背景变灰的弹出框等等.
===========================================================================
第 27 节 BOM 对象 - History
这节课我们来讲解一下历史记录, 历史记录是在我们日常开发中经常用到的一个知识, 比如一个用户注册或登录后, 网站经常会提示:"xxx 注册 / 登录 成功! 3 秒钟后将自动返回你上次访问的页面, 如果没有自动跳转, 请单击下方链接进行跳转" 诸如此类的信息, 我们是如何找到用户上次所访问的页面呢?
本节课如下:
取得历史记录长度;
实现前进后退功能;
实现任意跳转到某个历史记录功能;
小案例, 3 秒钟自动返回上次用户所访问的页面;
个人小练习:
1, 将课堂中所讲的 3 秒钟自动返回小案例, 通过 CSS 定义的更加美观一些.
2, 将倒计时 3 秒钟的秒数, 1 秒钟自动累减一次, 当到 0 时, 自动返回用户上次访问的页面.
===========================================================================
第 28 节 BOM 对象 - 通过 Location 对象实现网站各种跳转
这节课我们将学习 Location 对象, 此对象主要包含了当前 URL 的信息.
如何设置或获取地址中的 URL 锚点?
如何跳转 URL 或返回当前 URL 地址?
如何设置或返回当前的主机名?
如何设置或返回 URL 路径部分?
如何设置或返回当前传输协议?
如何设置或返回从问号 (?) 开始的 URL 查询部分?
如何加载新的文档?
如何以新文档替换当前文档?
加载新文档和新文档替换当前文档有什么区别?
如何重新加载?
[注] 我们下节课将学习 DOM 对象, DOM 对象是 JS 中最重要的一部分内容, 如果没有此对象, 我们就没有办法对页面的元素进行操作, 因此希望大家将前面我们学习的 BOM 对象再进行一下温习.
===========================================================================
第 29 节 DOM 对象 - 如何对 html 标签进行增删改查操作(上)
这节课, 我们终于进入了 DOM 元素的操作了, 也就是说我们从现在开始能够对 HTML 中的各种标签元素进行操作了.
本节内容如下:
1, 访问 HTML 元素有哪几种方式, 应该注意什么?
2, 如何创建文本对象?
3, 文本也属于节点?
4, 如何通过 JS 创建一个标签对象?
[注] 在这节课中, 我们将大量使用 chrome 的开发人员工具, 它能够让我们清楚的看到, 我的是否成功的创建了对象以及我的得到的对象有哪些?
===========================================================================
第 30 节 DOM 对象 - 如何对 HTML 标签进行增删改查操作(下)
这节课, 我们学习 DOM 对象创建 HTML 元素的方法, 那么这节课我们来学习如何将他们插入到页面中去.
本节内容如下:
1, 如何在页面中插入 JS 创建的标签元素?
2, 如何在页面中前置 JS 创建的标签内容?
3, 如何删除页面中的标签元素?
4, 如何选择父节点?
5, 如何替换对应的标签元素?
[注] 下节课我们再深入的学习 DOM 对象, 所以请大家认真学习哟~
===========================================================================
第 31 节 DOM 对象 - 如何使用文档碎片提高 JS 执行效率
本节课我们先来讲解下上节课的所留下的作业, 然后我们再逐步引入文档碎片的使用方法.
本节课内容如下:
文档碎片是什么?
文档碎片的原理是什么?
为什么文档碎片能够提高 DOM 操作效率?
如何创建文档碎片?
如何使用文档碎片?
小于 10 的数字自动补零方法.
[注] 文档碎片的名称看起来感觉抽象, 其实使用起来并不复杂, 而且还能大大提高 DOM 操作效率!
===========================================================================
第 32 节 DOM 对象 - 玩转 DOM 表格对象
这节课我们主要来学习如何对表格操作, 表格也是我们在日常开发中最常用的标签元素, 自然少不了 JS 对其的控制.
本节课内容如下:
如何创建 Table?
如何创建表格描述?
如何创建表格表头?
如何创建表格底部?
如何创建表格表体?
如何插入行?
如何插入列?
创建描述, 表头, 底部, 表体有哪些方法, 优缺点是什么?
通过上面的学习, 利用表格实现九九乘法表的过程和算法;
[注] 这节课的九九乘法表虽然看似简单, 但是要求同学们学习完之后, 自己独立写出一个九九乘法表会让你对表格的操作更加熟练. 有兴趣的同学可以尝试多做几种算法表, 比如九九加法表, 九九除发表, 九九减法表等等.
===========================================================================
第 33 节 DOM 对象 - 元素的属性和样式 兼容性设置
这节课我们将要学习如何对元素设置属性, 比如 id name class 等各种元素属性进行设置, 并且对其中的兼容性进行介绍, 从而做到兼容各种浏览器.
本节课主要内容如下:
元素属性的设置 setAttribute, 有哪些兼容性问题?
元素属性的取得 getAttribute;
元素属性的移除 removeAttribute;
如何直接对元素属性进行设置?
如何直接对元素属性进行获取?
如何直接对元素属性进行清除?
如何设置元素样式?
setAttribute 设置和 style 的设置方式有什么区别?
CSSText 为什么是比较推荐的做法呢?
通过它如何实现简单的动画效果?
[注] 本节课有作业, 希望大家能够举一反三练习~
===========================================================================
第 34 节 DOM 对象 - 文本文档的兼容处理
这节课是我们 BOM & DOM 课程中的最后一节课了, 主要是针对文本文档的处理;
本节课主要内容如下:
除了创建文本节点以外, 还有什么方法实现文本文档的插入?
innerText 在 FireFox 下无效, 如何解决?
innerHTML 和 innerText 有什么区别?
在使用 outerText 和 outerHTML 应该注意那些问题?
FireFox 不支持 outerText 怎么办?
[注] 从下节课开始我们将进入新的篇章 -- 事件篇, 有了它我们便可以控制用户在什么情况下而触发对应的代码, 去做对应的事情.
===========================================================================
第 35 节 事件 - 利用鼠标键盘事件实现 tips 提示框
这节课我们就进入了新的篇章了 -- 事件! 在 JS 中, 事件是很重要的东西, 因为有了它我们才能够实现, 在我们需要触发的时候, 执行对应的代码, 从而让我们的页面可以与用户进行互动.
本节课主要内容如下:
什么是事件?
事件的种类有哪些?
常用的 HTML 相关事件;
键盘鼠标事件的应用;
如何做到 HTML 与 JS 相分离, 而不是直接在元素上绑定事件;
实现鼠标移入移出的小练习;
制作一个小贴士的提示案例;
在小贴士的案例中精简条件结构到极致;
===========================================================================
第 36 节 事件 - 通过表单事件实现漂亮友好的表单验证
本节课时间稍微长点, 在本节课我们将讲解众多表单验证的实现方法和思路的其中之一, 同时, 案例也综合了我们之前所学的内容.
本节课案例截图:
本节课主要内容如下:
表单的常用事件;
初次接触简单的闭包;
匿名方法的简单调用及优点;
为什么说 CSS 和 HTML 的定义及布局的好坏, 直接影响 JS 的执行效率和实现思路;
表单验证的实现思路;
正则表达式的应用与验证格式的方法 test();
dom 元素的获取;
元素 style 及 class 属性的设置方法;
===========================================================================
第 37 节 事件 - Event 事件对象(上)
event 对象是个很重要的东西, 我们在平时的日常开发和学习的时候经常要和事件打交道, 正因如此我们也会经常用到 event 事件对象, 例如经常听说的事件冒泡就是其中的应用之一!
本节内容如下:
Event 事件对象如何调用?
Event 事件对象的标准用法是怎样的?
Event 事件对象有那些常用属性?
Event 事件对象有哪些常用方法?
Event 事件对象中的各种坐标有什么区别?
[注] 这节课我们初次接触 Event 对象, 它本身的属性和事件都存在一些兼容性的问题, 我们后面的课程继续介绍!
===========================================================================
第 38 节 事件 - Event 事件对象(中)
这节课我们接着说 Event 对象, 本节主要内容讲解兼容方面的问题!
本节内容如下:
Event 事件对象在 IE6-IE8 下如何调用?
Event 事件对象的标准属性和非标准属性的应用;
Event 事件对象坐标属性的舍取;
Event 事件对象兼容方法;
Event 事件对象兼容精简;
"&&" 和 "||" 的另类应用和判断思路;
[注] 本节课 "&&" 和 "||" 的另类应用和判断思路有些同学一开始可能感觉难理解, 不过没有关系, 多看视频中我给大家说的它们的原理, 相信你很快就能理解!
===========================================================================
第 39 节 事件 - Event 事件对象 (下) 之事件流的应用
这节课我们将学习很重要的一个知识, 事件流!
本节课内容如下:
什么是事件流?
什么是冒泡型事件?
什么是捕获型事件?
事件流的特性是什么?
事件流有什么作用?
为什么要阻止事件冒泡?
事件冒泡在各种浏览器下的兼容性操作是怎么样?
如何实现各种下拉菜单, 实现点击空白隐藏?
小练习: 模拟 Google 页头导航菜单:
===========================================================================
第 40 节 事件 - 事件监听与处理(上)
这是我们事件最后一部分内容, JavaScript 事件监听与处理, 在我们开发的时候经常会在一个元素上多次重复的绑定事件, 这就会导致我们前面所学习的绑定方法出现事件被覆盖的情况.
本节主要内容如下:
初步认识事件监听函数;
事件监听函数的应用;
事件监听函数的参数意义;
标准的事件监听函数的捕获和冒泡的不同点及案例演示;
如何通过事件监听添加事件;
如何移除事件?
移除事件需要注意哪些问题?
===========================================================================
第 41 节 事件 - 事件监听与处理(下)
本节课是我们 JavaScript 事件篇的最后一节课, 也是很重要的一节课, 因为它涉及到了事件兼容性.
本节主要内容如下:
事件监听函数如何兼容 IE9 以下版本的浏览器?
IE 的事件监听函数与标准的事件监听函数的区别是什么?
IE 的事件监听函数是否也有 3 个参数, 参数不一致怎么办?
IE 的事件监听函数与标准的事件监听函数的参数取舍;
IE 的事件监听函数与标准的事件监听函数的事件参数值的区别是什么?
如何判断浏览器对其支持情况?
如何让它们同时并存, 并且不报错?
[注] 下节课我们将对我们学过的知识进行兼容方面的总结, 希望同学们课下能够对之前学过的内容进行复习.
===========================================================================
第 42 节 JS 兼容总结
本节课我们重点讲解以下 JavaScript 中所涉及到的各种各样的兼容性问题.
本节主要内容如下:
JavaScript 中事件方面一系列的兼容问题
JavaScript 中样式方面一系列的兼容问题
JavaScript 中函数方面一系列的兼容问题
JavaScript 中 DOM 方面一系列的兼容问题
[注] 本节课同样很重要, 希望同学们课下要多多练习复习.
===========================================================================
第 43 节 cookies(上)
本节课, 本来应该讲解动画运动内容的, 在录制新的课程的之前有部分同学想要先学习一下 Cookie 的操作, 于是此节课就先讲解 Cookie 的应用.
本节主要内容如下:
Cookie 的介绍;
Cookie 的作用;
Cookie 的体积容量;
各浏览器对 Cookie 的个数限制;
如果超出支持个数限制, 会有什么结果?
如果超出支持个数限制, 如何解决呢?
通过 JavaScript 添加 Cookie;
[注] 这节课代码部分主要讲解了如何添加 Cookie, 除此之外的内容也是非常重要的, 因为只有了解了它们的体积和限制个数等才能更好的对 Cookie 操作, 降低出错率.
===========================================================================
第 44 节 cookies(下)
这节课, 我们接着学习 Cookie!
本节主要内容如下:
Cookie 的获取方法;
Cookie 的删除方法及思路;
获得全部 Cookie 的方法;
[注] Cookie 的操作就是这样, 我们通过 js 设置 Cookie 也可以让后台程序 (比如 JavaEE,ASP.NET,PHP,ASP 等) 读取 Cookie 也是可以的.
===========================================================================
第 45 节 运动类 Tween 的应用
这节课我们开始学习运动算法, 通过它来实现运动效果:
本节课主要内容如下:
Tween 是什么, 有什么作用?
如何实现动画效果?
如何调用其应用?
offsetTop,offsetLeft 属性是什么?
使用 tween 算法库之后, 我们写的代码还是不是原生代码呢?
如何精简 tween 算法?
注: 我们下节课将学习更简单. 方便. 快捷算法, 可以说是 tween 的升级版本!
===========================================================================
第 46 节 运动类 TweenLite 的应用
这节课我们继续学习运动效果:
本节课主要内容如下:
TweenLite 是什么, 有什么作用?
TweenLite 和 Tween 有什么区别?
TweenLite 如何实现动画效果?
TweenLite 如何调用?
TweenLite 的优势在哪里?
TweenLite 的更高级用法, 去哪里下载库?
注: 下节课我们将使用算法库做一个小练习!
===========================================================================
第 47 节 滑动门的制作与难点剖析
这节课我们本应该讲解幻灯片的制作, 但备课时发现, 有一些知识和技巧需要掌握, 如果直接拿来做幻灯片, 内容就过多, 不易于迅速理解掌握, 因此先给大家讲解一下滑动门的制作和难点剖析!
本节课内容如下:
1, 我们将在案例中再次用到闭包;
2, 滑动门的三种实现思路之: 自定义方法;
3, 滑动门的三种实现思路之: 闭包
4, 滑动门的三种实现思路之: 自定义属性;
5, 滑动门的三种实现思路之间有什么区别? 哪一种更好?
===========================================================================
第 48 节 - W3Cfuns 首页幻灯片的最优化制作与难点剖析(上)
这节课我们将学习幻灯片的制作, 用到的知识点比较多(基本都是之前所学过的知识), 因此请大家不要有压力, 幻灯片在线 DEMO 效果演示请看首页 ^_^, 只不过首页上的效果需要依赖于 jQuery 框架, 而我们这次编写的是原生的!
本节课内容涉及到的知识点:
闭包的应用;
在实战中首次应用枚举;
缓动效果;
事件绑定;
DOM 操作与访问;
对象的应用;
数组对象的应用;
你可能不知道的 "&&" 和 "||" 运算符的应用技巧;
for 循环的优化;
本节课幻灯片实现过程
1, 先熟悉结构与样式;
2, 引入 JS;
3, 定义枚举;
4, 初始化变量;
5, 数组应用
6, 事件绑定;
7,"&&" 运算符的另类应用;
8, 测试效果;
===========================================================================
第 49 节 - W3Cfuns 首页幻灯片的最优化制作与难点剖析(下)
这节课, 咱们把幻灯片剩下的功能给完善咯~
本节课主要内容如下:
实现自动播放;
实现标题自动切换;
实现索引自动切换;
实现鼠标悬停停止播放;
实现鼠标离开继续播放;
实现正播放和倒播;
实现只有一张幻灯片的时候, 则无需自动播放;
===========================================================================
第 50 节 - Jason 的访问与操作
从这节课开始, 我们就进入了 Ajax 的世界啦! 在 Ajax 中一般常用的有 3 种数据交换格式, 分别是文本, XML 和 JSON, 在过去 xml 在 Ajax 中作为数据交换格式的很大比重, 而现在 json 成为了 Ajax 数据交换格式的主导, 因为它比 XML 更加轻巧灵活, 更神奇的是, 它本身就是 JavaScript 中的对象, 可以直接使用!
本节课主要内容如下:
什么是 JSON?
JSON 主要有什么组成?
JSON 和 XML 的简单对比;
如何访问并操作 JSON 数据?
如何使用前端开发工具箱分析 JSON?
===========================================================================
第 51 节 - Ajax 服务器端异步数据的请求与获取(上)
Ajax, 相信很多同学都听说过, 如果你没有听说过, 那么一定对 "局部刷新" 有所耳闻! 没错 Ajax 就能让我们实现页面中的局部刷新, 比如瀑布流效果, 当我们每次当页面滚动到底部后, 都会加载出新的内容, 让我们看都看不完; 再比如, 用户注册中验证用户名是否存在等效果都是 Ajax 完成的!
本节课内容如下:
什么是 Ajax?
Ajax 的工作原理是什么?
如何创建 XMLHttpRequest 对象?
如何让 XMLHttpRequest 兼容各种浏览器?
Ajax 如何建立请求?
Ajax 如何发送请求?
什么是 Ajax 请求状态?
Ajax 都有那些请求状态?
如何响应返回文本?
===========================================================================
第 52 节 - Ajax 服务器端异步数据的请求与获取(下)
通过上节课的学习, 我们对 Ajax 已经比较熟悉了, 那么这节课我们来实战一次! 我们将实现一个 Ajax 类的完美封装和 2 个 DEMO 的练习!
本节课内容如下:
封装一个 Ajax 对象, 简化 Ajax 操作;
异步调用 PHP 文件, 并输出时间;
异步验证用户名是否被注册, 并实现 Loading 加载效果;
注册成功后, 通过 JSON 数据交换格式, 承载数据, 通过回调函数返回, 并列出在页面上!
来源: http://www.qdfuns.com/note/15031/7c1b80db815ec3f9937e039d130e1efa.html