实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.jquery的执行方式</title>
<style type="text/css">
.horiz {
float: left;
list-style-type: none;
margin: 10px;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//window.onload：在页面元素全部加载完成后会自动调用的事件
// window.onload = function(){
// $('#list > li').addClass('horiz')
// alert($(document).length)
$(document).ready(function(){
$('#list > li').addClass('horiz')
})
// $(function(){
// $('#list > li').addClass('horiz')
// })
// $(document).ready() ======= window.onload()
//页面的渲染顺序
// 1.第一步生成DOM结构
// 2.加载资源：图片、文字
// window.onload():只要生成DOM结构才会触发。
// $(document).ready():只要生成DOM结构就会出发。
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品：
<ul>
<li><a href="">淘宝</a></li>
<li><a href="">衣服</a></li>
<li><a href="">鞋子</a></li>
</ul>
</li>
<li>数码产品：
<ul>
<li><a href="">京东</a></li>
<li><a href="">衣笔记本电脑</a></li>
<li><a href="">手机</a></li>
</ul>
</li>
<li>食品保健：
<ul>
<li><a href="">拼多多</a></li>
<li><a href="">奶粉</a></li>
<li><a href="">玩具</a></li>
</ul>
</li>
</ul>
</body>
</html>
<!-- <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('#list > li').addClass('horiz')
</script> -->运行实例 »
点击 "运行实例" 按钮查看在线实例
