index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* { font-size: 18px; }
			h2 { font-size: 22px; }
			h3 { font-size: 20px; }
			ul li { list-style: circle; }
		</style>
	</head>
	<body>
		<h2>JavaScript课堂案例</h2>
		<hr>
		<h3>Make English as your working language!!!</h3>
		<h3>浏览器中的JavaScript：</h3>
		<ul>
			<li>ECMAScript: JavaScript语法规范</li>
			<li>BOM: 浏览器对象模型（Browser Object Model）,把浏览器当成一个对象（window），通过这个对象可以操控浏览器</li>
			<li>DOM: 文档对象模型（Document Object Model），把整个页面当成一个对象（document），通过这个对象可以操作整个页面</li>
		</ul>
		<hr>
		<h3>课堂案例</h3>
		<ol>
			<li><a href="example01.html">例子1：BOM和DOM的感性认识</a></li>
			<li><a href="example02.html">例子2：成都机动车限行查询</a></li>
			<li><a href="example03.html">例子3：延迟跳转到百度</a></li>
			<li>
				<a href="example04.html">例子4：轮播广告</a>
				<span><a href="#homework01">完整效果请参考作业1</a></span>
			</li>
			<li><a href="example05.html">例子5：事件冒泡和事件捕获</a></li>
			<li><a href="example06.html">例子6：获取事件源和访问相关元素</a></li>
			<li><a href="example07.html">例子7：动态添加和删除元素</a></li>
			<li><a href="example08.html">例子8：流氓浮动广告</a></li>
			<li><a href="example09.html">例子9：jQuery实现表格效果</a></li>
			<li><a href="example10.html">例子10：jQuery实现动态列表</a></li>
			<li><a href="example11.html">例子11：Ajax加载美女图片（原生JavaScript）</a></li>
			<li><a href="example12.html">例子12：Ajax加载美女图片（jQuery）</a></li>
		</ol>
		<h3>课后练习</h3>
		<ol>
			<li>
				<a name="homework01"></a>
				<a href="homework01.html">练习1：轮播广告</a>
			</li>
			<li><a href="homework02.html">练习2：缩略图效果</a></li>
			<li><a href="homework03.html">练习3：闪烁的方块</a></li>
			<li><a href="homework04.html">练习4：表格效果</a></li>
			<li><a href="homework05.html">练习5：购物车效果（仿京东）</a></li>
			<li><a href="homework06.html">练习6：可拖拽的元素</a></li>
			<li><a href="homework07.html">练习7：周公解梦（Ajax）</a></li>
			<li><a href="homework08.html">练习7：表单验证（正则表达式）</a></li>
		</ol>
	</body>
</html>