主题：
学习jQuery的引入方式，jQuery的基本语法结构，灵活掌握三种使用方法。
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery基础知识</title>
<style type="text/css">
* {
font: 15px/22.5px "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}
body {
background-color: #0769AD;
}
div h1 {
text-align: center;
color:#fff;
font-size: 25px;
line-height: 1.1em;
}
div ol {
margin-left:12px;
}
div ol li {
width:100%;
color: #7ACEF4;
line-height: 1.5em;
font-size: 18px;
}
a {
font-size: 18px;
color:#7ACEF4;
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
.front {
width:800px;
margin:0 auto;
border:1px solid #272822;
overflow: hidden;
border-radius:30px;
/*box-shadow: 1px 1px 1px #ddd;*/
}
.teacher, .student {
width:399px;
float:left;
background-color: #05568D;
}
</style>
<!-- 引用本地js文件 -->
<!-- <script type="text/javascript" src="js/jquery-3.3.1.js"></script> -->
<!-- 引用CDN的js文件 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
// 方法一：
window.onload = function(){
$('.teacher h1').click(function(){
$('.teacher h1').css('color','#272822')
})
}
// 方法二：
// $(document).ready(
// function(){
// $('.teacher h1').css('color','#272822')
// }
// )
// 方法二简写：
// $(function(){
// $('.teacher h1').css('color','#272822')
// })
</script>
</head>
<body>
<div class="front">
<div class="teacher">
<h1>html+css+javascript<br>课件目录</h1>
<hr>
<ol>
<li>20180315：<a href="" target="_blank">前端开发初体验</a></li>
<li>20180316：<a href="" target="_blank">文本、图像、链接、表格</a></li>
<li>20180319：<a href="" target="_blank">列表与表单及实战</a></li>
<li>20180320：<a href="" target="_blank">内联框架与实战</a></li>
<li>20180321：<a href="" target="_blank">CSS基本术语</a></li>
<li>20180322：<a href="" target="_blank">CSS盒模型与表格</a></li>
<li>20180323：<a href="" target="_blank">元素居中_背景_列表与链接</a></li>
<li>20180326：<a href="-te" target="_blank">定位与浮动</a></li>
<li>20180327：<a href="" target="_blank">经典布局方式的原理分析</a></li>
<li>20180328：<a href="" target="_blank">实战_企业站点布局</a></li>
<li>20180329：<a href="-" target="_blank">javascript入门与实战</a></li>
<li>20180330：<a href="-" target="_blank">javascript实战2</a></li>
</ol>
</div>
<div class="student">
<h1>html+css+javascript<br>作业目录</h1>
<hr>
<ol>
<li>20180315：<a href="" target="_blank">html页面体验（背景卡片）</a></li>
<li>20180316：<a href="" target="_blank"></a></li>
<li>20180319：<a href="" target="_blank"></a></li>
<li>20180320：<a href="" target="_blank"></a></li>
<li>20180321：<a href="" target="_blank"></a></li>
<li>20180322：<a href="" target="_blank"></a></li>
<li>20180323：<a href="" target="_blank"></a></li>
<li>20180326：<a href="" target="_blank"></a></li>
<li>20180327：<a href="" target="_blank"></a></li>
<li>20180328：<a href="" target="_blank"></a></li>
<li>20180329：<a href="" target="_blank"></a></li>
<li>20180330：<a href="" target="_blank"></a></li>
</ol>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
理解：
jQuery的工厂函数语法结构使用方式多变，特别注意代码的执行顺序，一定要在html文档流加载完毕以后执行js代码，否则会出现各种问题，代码位置推荐放在html文档最后部分。
