index.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. * { font-size: 18px; }
  8. h2 { font-size: 22px; }
  9. h3 { font-size: 20px; }
  10. ul li { list-style: circle; }
  11. </style>
  12. </head>
  13. <body>
  14. <h2>JavaScript课堂案例</h2>
  15. <hr>
  16. <h3>Make English as your working language!!!</h3>
  17. <h3>浏览器中的JavaScript:</h3>
  18. <ul>
  19. <li>ECMAScript: JavaScript语法规范</li>
  20. <li>BOM: 浏览器对象模型(Browser Object Model),把浏览器当成一个对象(window),通过这个对象可以操控浏览器</li>
  21. <li>DOM: 文档对象模型(Document Object Model),把整个页面当成一个对象(document),通过这个对象可以操作整个页面</li>
  22. </ul>
  23. <hr>
  24. <h3>课堂案例</h3>
  25. <ol>
  26. <li><a href="example01.html">例子1:BOM和DOM的感性认识</a></li>
  27. <li><a href="example02.html">例子2:成都机动车限行查询</a></li>
  28. <li><a href="example03.html">例子3:延迟跳转到百度</a></li>
  29. <li>
  30. <a href="example04.html">例子4:轮播广告</a>
  31. <span><a href="#homework01">完整效果请参考作业1</a></span>
  32. </li>
  33. <li><a href="example05.html">例子5:事件冒泡和事件捕获</a></li>
  34. <li><a href="example06.html">例子6:获取事件源和访问相关元素</a></li>
  35. <li><a href="example07.html">例子7:动态添加和删除元素</a></li>
  36. <li><a href="example08.html">例子8:流氓浮动广告</a></li>
  37. <li><a href="example09.html">例子9:jQuery实现表格效果</a></li>
  38. <li><a href="example10.html">例子10:jQuery实现动态列表</a></li>
  39. <li><a href="example11.html">例子11:Ajax加载美女图片(原生JavaScript)</a></li>
  40. <li><a href="example12.html">例子12:Ajax加载美女图片(jQuery)</a></li>
  41. </ol>
  42. <h3>课后练习</h3>
  43. <ol>
  44. <li>
  45. <a name="homework01"></a>
  46. <a href="homework01.html">练习1:轮播广告</a>
  47. </li>
  48. <li><a href="homework02.html">练习2:缩略图效果</a></li>
  49. <li><a href="homework03.html">练习3:闪烁的方块</a></li>
  50. <li><a href="homework04.html">练习4:表格效果</a></li>
  51. <li><a href="homework05.html">练习5:购物车效果(仿京东)</a></li>
  52. <li><a href="homework06.html">练习6:可拖拽的元素</a></li>
  53. <li><a href="homework07.html">练习7:周公解梦(Ajax)</a></li>
  54. </ol>
  55. </body>
  56. </html>