收藏
批改状态：合格
老师批语：
window.onload 和 $(document).ready 还是需要多关注的，因为这影响到一个前端的用户体验。window.onload是等页面加载完后，才会处发此事件，包括，DOM元素，图片，视频，音乐等。而$(document).ready执行速度要比前者更快。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQusey快速入门</title>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid #808080;
}
.box ul{
padding: 10px;
margin: 0px;
list-style: none;
}
.box ul li {
margin-bottom: 5px;
overflow: hidden;
}
.mali{
background-color: lightgreen;
border:1px solid #808080;
}
.box ul li span{
width: 20px;
height: 20px;
float: left;
background-color: #808080;
text-align: center;
line-height: 20px;
border-radius: 50%;
color: #fff;
font-size: 13px;
margin-right: 10px;
}
.box ul li a{
text-decoration: none;
float: left;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="bos"><span>1</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>2</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>3</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>4</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>5</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>6</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>7</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>8</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>9</span><a href="">PHP中文网-专注PHP学习平台</a></li>
<li><span>10</span><a href="">PHP中文网-专注PHP学习平台</a></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// $(document).ready(function () {
// 调用CSS样式表里的样式属性
// $('.box li').addClass('mali')
// })
// 简写：
$( function (){
$('.box li').addClass('mali')
})
// $('<img src="../3.29/images/yanjing.png">').insertAfter('span').css('float','left')
</script>点击 "运行实例" 按钮查看在线实例
执行后效果图：
总结 ：只有在一个页面上具有图片或视频等效果才会比较明显。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
