前沿视频教室————最好的CSS和Web设计与开发的视频教程

大家好，这组《精通JavsScript+jQuery》视频教程共16讲。

今天的第0讲中，我们将对这这套教程，以及与之配套的图书《精通JavaScript+jQuery》做一个比较全面的介绍，同时给出一些学习方法的建议。

希望对大家能够有所帮助！

本节课时长28分38秒，下载文件41.5兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。

以下为本课的讲义，供大家参考。

教程各章的简介

第一部分 JavaScript、Dom基础

第1章 JavaScript简介

本章从JavaScript的起源出发，介绍了浏览器之间的争斗以及JavaScript的基础知识，并且引入Web结构、表现、行为相分离的标准，为后续章节的进一步讲解打下基础。

第2章 JavaScript基础

本章对JavaScript的基础进行了深入的讨论，重点分析了JavaScript的核心ECMAScript，通过实例让读者从底层了解JavaScript的编写，包括JavaScript的基本语法、变量、关键字、保留字、语句、函数、BOM等。

第3章 CSS基础

CSS作为网页表现的标准语言，是网页美观、大方的重要基础。本章从CSS的概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，然后重点介绍CSS的基本语法，包括CSS选择器、CSS设置文字、图片、页面背景、超链接效果等。最后通过实用菜单的实例，作为本章知识的归纳和进一步运用。

第4章 CSS进阶

本章在上一章的基础上对CSS定位作详细介绍，并讲解利用CSS + div对页面元素进行定位的基本方法，以及CSS排版观念，通过排版实例“我的博客”对页面的基本布局做细致分析。最后讲解JavaScript与CSS配合，实现页面的各种特效。

第5章 理解和应用DOM模型

文档对象模型DOM定义了用户操作文档对象的接口，它使得用户对HTML有了空前的访问能力。本章主要介绍DOM模型的基础，包括页面中的节点、如何使用DOM、innerHTML属性、DOM与CSS的关系等。

第二部分 JavaScript进阶

第6章 理解和应用“事件”

事件是JavaScript最最引人注目的特性之一，它提供了一个平台，让用户不仅能浏览页面中的内容，而且还能够跟页面进行交互。本章围绕JavaScript处理事件的特性进行讲解，主要包括事件流、事件的监听、事件的类型以及浏览器的兼容性问题等。并通过实例“伸缩菜单”进一步熟练事件的运用。

第7章 使用JavaScript控制表格与表单

表格与表单都是网页中所不可缺少的元素，表格是数据的承载体，而表单作为与用户交互的窗口，时刻都扮演着信息获取和反馈的角色。本章围绕表格和表单介绍JavaScript、CSS控制它们的方法，以及实际运用中的一些技巧。最后通过实例“自动提示的文本框”进一步将理论运用到实际页面中。

第8章 JavaScript的调试与优化

编写JavaScript程序时或多或少的会遇到各种各样的错误，有语法错误、逻辑错误等等。即使代码没有问题，对于大网站而言执行的效率也是十分关键的，这就直接关系到代码的优化。本章围绕JavaScript的错误处理和优化做简要的介绍，包括常见的错误和异常、调试的技巧、调试的工具、优化的细则等。

第9章 Ajax

Ajax就是一种全新的技术，它使得浏览器与桌面应用程序之间的距离越来越近。本章围绕Ajax的基本概念，介绍异步链接服务器对象XMLHttpRequest，以及Ajax的一些实例，并对Ajax技术进行简单的分析。最后通过“自动校验的表单”和“Ajax实现自动提示的文本框”两个实例，进一步学习Ajax在实际页面中的强大功能。

第三部分 jQuery应用

第10章 jQuery基础

本章作为jQuery的第一章，重点讲解jQuery的概念以及一些简单的基础运用，为后面的章节打下基础，主要包括jQuery的概念、jQuery中的“$”、CSS3选择器、管理选择结果、jQuery链等等。

第11章 jQuery控制页面

本章在上一章的基础上介绍jQuery如何控制页面，包括页面元素的属性、CSS样式风格、DOM模型、表单元素、事件处理等。其中的实例大都为之前章节JavaScript实例的简化和升华，最后通过实例“快餐在线”完整的学习jQuery在实际页面中的运用。

第12章 jQuery制作动画与特效

jQuery中动画和特效的相关方法可以说为其添加了靓丽的一笔。开发者可以通过简单的函数实现很多特效，这在以往都是需要大量JavaScript代码开发的。本章主要通过实例，介绍jQuery中动画和特效的相关知识，包括自动显隐、渐入渐出、飞入飞出、自定义动画等。

第13章 jQuery的功能函数

在JavaScript编程中，开发者通常需要编写很多小程序来实现一些特定的功能，例如浏览器的检测、字符串的处理、数组的编辑、获取外部代码等等。jQuery将一些常用的程序进行了总结，提供了很多实用的功能函数。本章主要围绕这些功能函数对jQuery做进一步的介绍。

第14章 jQuery与Ajax

本章主要围绕jQuery中Ajax的相关技术进行讲解，重点分析jQuery对Ajax步骤的简化，主要包括获取异步数据、GET和POST方法、控制Ajax的细节。最后通过修改之前的“自动提示的文本框”实例，进一步学习jQuery的强大功能。

第15章 jQuery插件

无论jQuery再强大也不可能包含所有的功能，jQuery框架仅仅集成了JavaScript中最核心也是最常用的功能。然而jQuery有许许多多的插件，都是针对特定的内容，并以jQuery为核心编写的。本章通过实例，重点介绍jQuery中的一些常用插件，包括表单插件、UI插件等，让读者对jQuery插件有更深入的认识和理解。

第四部分 Javascript+jQuery综合案例

第16章 综合案例(1)——网络相册

本章通过一个完整的综合实例“网络相册”来讲解JavaScript、jQuery在实际运用中的方法，主要包括分析构架、模块拆分、功能细化、统一调整等各个步骤。

第17章 综合案例(2)——拖拽的清单

目前网络上拖拽的页面愈发的流行，例如iGoogle便是十分典型的案例。本节通过一个拖拽的清单实例，综合讲解这类页面的制作方法。

第18章 综合案例(3)——网络报价单

网络购物已经越来越流行，琳琅满目的商品充斥着整个网络世界。一个好的报价单对于商品销售的促进是无形的，尤其是电子产品。本节通过一个邮箱报价单的实例，综合说明这类页面的制作方法。

第19章 综合案例(4)——图片切割器

对于拍摄的相片通常都有一些多余的部分，在Photoshop等图像处理软件中有非常方便的图片切割工具。但对于网上的图片，利用jQuery就能模拟类似的切割效果。本章通过图片切割器的实例，综合介绍该操作的制作方法，供读者在遇到类似情况时参考。

学习方法建议

1. 重视基础，先掌握JavaScript，在学习jQuery或其他框架。

2. 学习相关的计算机专业基础课程;高级语言 / 数据结构 / 算法基础;程序= 数据结构 + 算法。

3. 实践+钻研

4. 学会提问和寻找答案

5. 学会调试

对于一个网页制作者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望页面能够方便网友们的使用，友好而大方，甚至像桌面应用程序一样，那么仅仅依靠HTML语言是不够的，JavaScript在这中间扮演着重要的角色。本章从JavaScript的起源出发，介绍其基础知识，为后续章节的进一步讲解打下基础。

本节课时长4分14秒，下载文件5.45兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。

1.JavaScript的起源

- 1992年，Nombas公司开发出C减减（C-minus-minus）的嵌入式脚本语言。

- Netscape公司开发LiveScript，于1995年11月与Sun公司联合把其改名为JavaScript。

- IE3.0中搭载JavaScript的克隆版本，命名为Jscript。

- 第39届技术委员会（TC39），最终锤炼出ECMA-262标准。

- 2005年初，Google公司的网上产品使得Ajax兴起并受到广泛好评。

2. JavaScript的实现

- ECMAScript

- DOM

- BOM

3. Web标准

- 结构（Structure）

- 表现（Presentation）

- 行为（Behavior）

上一章对JavaScript进行了概述性的介绍，从本章开始将对JavaScript进行深入的讨论。这一章将分析JavaScript的核心ECMAScript，让读者从底层了解JavaScript的编写，包括JavaScript的基本语法、变量、关键字、保留字、语句、函数、BOM等。

本节课时长4分14秒，下载文件5.45兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。

1. JavaScript的语法

- 区分大小写

- 弱类型变量

- 每行结尾的分号可有可无

- 括号用于代码块

- 注释的方式与C语言、Java相同

2. 变量

- JavaScript中变量是通过var关键字（variable的缩写）来声明的。

- 首字符必须是字母（大小写均可）、下划线（_）或者美元符号（$）。

- 余下的字母可以是下划线、美元符号、任意字母或者数字字符。

- 变量名不能是关键字或者保留字。

3. 数据类型

- 字符串

- 数值

- 布尔值

- 数组

4. 条件语句

- 比较操作符

- 逻辑操作符

- if语句

- switch语句

5. 循环语句

- while语句

- for语句

6. 函数

在进行JavaScript开发时，与CSS的配合是必不可少的，因为本课和下一节课中，将对CSS进行介绍，以使读者充分理解CSS的作用，为后面学习JavaScript控制CSS，以及使用就Query打下基础。

对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，然后重点介绍CSS的基本语法。

本节课时长15分19秒，下载文件24.2兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。

1. CSS的概念

- CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，是实现页面表现（Presentation）的核心元素。

- 传统HTML的缺陷

- CSS的引入

2. 使用CSS控制页面

- 行内样式

- 内嵌式

- 链接式

- 导入样式

3. CSS选择器

- CSS选择器

- 类别选择器

- ID选择器

- 选择器的集体声明

- 选择器的嵌套

- 子选择器

在网页设计时，能否控制好各个模块在页面中的位置是非常关键的。在上一章中，已经对CSS的基本使用有了一定的了解。本章在此基础上对CSS定位作详细介绍，并讲解利用CSS + div对页面元素进行定位的基本方法。

本节课时长12分17秒，下载文件22.5兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。

1. div与span标记

- 在使用CSS排版的页面中，<div>与<span>是两个常用的标记。<div>（division）简单而言是一个区块容器标记，即<div>…</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。

- <div>与<span>的区别

2. 盒子模型

- 一个盒子由content、border、padding、margin这四部分组成

3. 元素的定位

- float定位

- position定位

- z-index空间位置

4. CSS排版观念