![[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
一、jQuery是一个快速、简洁的JavaScript框架，能够极大提高开发人员的效率，以下代码时JQ的两种引入方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的两种引入方式</title>
</head>
<body>
<h1>test</h1>
</body>
</html>
<!-- 1.本地引入 -->
<script src="./js/jquery.js"></script>
<!-- 2.cdn在线 -->
<!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script type="text/javascript">
$('h1').click(function() {
alert('success!');
})
</script>点击 "运行实例" 按钮查看在线实例
二、$(document).ready()使用和简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$(document).ready()</title>
<style type="text/css">
.horiz {
float: left;
list-style-type: none;
margin: 10px;
}
</style>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
window.onload = function() {
$('li').addClass('horiz');
}
// $(document)获取整个HTML文档
// ready()加载完成之后
// $(document).ready(function() {
// $('li').addClass('horiz');
// })
// $(function() {
// $('li').addClass('horiz');
// })
// window.onload()：必须要等到加载资源全部完成才会触发
// $(document).ready()：只要生成DOM结构就会触发
</script>
</head>
<body>
<h1>列表</h1>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、总结
网页渲染顺序：
第一步：生成DOM结构
第二步：加载资源
window.onload()：等到加载资源全部完成才会触发
$(document).ready()：只要生成DOM结构就会触发
