搂青毖睡晤哥奋护浆蜂佬凭褥
购物清单页面结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.horiz
{
float: left;
list-style-type:none ;
margin:10px;
}
</style>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></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>
<li>玩具</li>
</ul>
</li>
</ul>
</body>
</html>
执行；
为一级li添加类样式horiz，使得一级li左浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.horiz
{
float: left;
list-style-type:none ;
margin:10px;
}
</style>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></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>
<li>玩具</li>
</ul>
</li>
</ul>
</body>
</html>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('#list > li').addClass('horiz')
</script>
执行：
将js代码复制到顶部：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.horiz
{
float: left;
list-style-type:none ;
margin:10px;
}
</style>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('#list > li').addClass('horiz')
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></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>
<li>玩具</li>
</ul>
</li>
</ul>
</body>
</html>
会发现添加的类样式不起作用：
这是因为:执行$(‘#list > li’).addClass(‘horiz’)是找不到id为iist的ul元素，因为此时代码没有执行到ul处
修正方法：
window.onload=function(){}：使用window对象的onload事件:在页面元素加载完成,再调用这个js脚本(延迟调用)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.horiz
{
float: left;
list-style-type:none ;
margin:10px;
}
</style>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
window.onload=function(){
$('#list > li').addClass('horiz')
}
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></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>
<li>玩具</li>
</ul>
</li>
</ul>
</body>
</html>
执行：
使用jquery自己的就绪函数调用：
$(document).ready(function(){})
$(document)：选择当前html中的全部元素，即全部元素就绪后才会调用js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.horiz
{
float: left;
list-style-type:none ;
margin:10px;
}
</style>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(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>
</ul>
</li>
<li>数码产品
<ul>
<li><a href="">京东</a></li>
<li>笔记本电脑</li>
<li>手机</li>
</ul>
</li>
<li>食品保健
<ul>
<li><a href="">拼多多</a></li>
<li>奶粉</li>
<li>玩具</li>
</ul>
</li>
</ul>
</body>
</html>
执行：
简写：$(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.horiz
{
float: left;
list-style-type:none ;
margin:10px;
}
</style>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$('#list > li').addClass('horiz')
})
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></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>
<li>玩具</li>
</ul>
</li>
</ul>
</body>
</html>
执行：
为什么说:$(document).ready()方法比window.onload事件更高效呢?
html页面生成分为二步:
1. 生成DOM树: 告诉浏览器html文件中有多少元素以及他们之间的关系
2. 加载外部资源: 例如图像,外部文件等
window.onload事件必须要在dom树生成,外部资源全部加载完毕才可以触发
$().ready()事件:只要DOM创建完成就可以触发,不必等到元素全部加载完成,特别是有较大图片或文件时,效果非常明显
衡辟锑然沉填室侠判屯幸闻滇