![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
两种引入方法：
1.在线引入 谷歌、微软、百度都有提供在线的jQuery引用。比如 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2.本地导入 jQuery文件与html文件位于同一目录下，可直接写jQuery的文件名 <script type="text/javascript" src="jquery-3.3.1.js"></script> 不处于相同位置的 <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
两种的好处：如果你处于线上建议使用第一种，如果处于线下建议使用第二种，不存在优劣，可自信选择
$(document).ready()使用方式与简写：
$(function(){
//js代码
})
$(document).ready(function () {
//js代码
})例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.jquery代码的执行方式</title>
<style type="text/css">
.horiz {
float:left;
list-style: none;
margin: 10px;
}
</style>
<!-- 导入1. -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 导入2. -->
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<script type="text/javascript">
// $(document).ready
// 例子1.
$(function(){
$('li').css('backgroundColor','lightgreen')
})
// 例子2.
// $(document).ready(function () {
// $('#list > li').addClass('horiz')
// })
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></li>
<li>箱包</li>
<li>衣服</li>
<li>鞋子</li>
</ul>
</li>
<li>数码产品
<ul>
<li><a href="">京东</a></li>
<li>笔记本电脑</li>
<li>显示器</li>
</ul>
</li>
<li>食品保健
<ul>
<li><a href="">拼多多</a></li>
<li>奶粉</li>
<a href="">玩具</a>
</ul>
</li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
