57 lines
2.3 KiB
HTML
57 lines
2.3 KiB
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>
|
|||
|
|
</ol>
|
|||
|
|
</body>
|
|||
|
|
</html>
|