jQuery实现电影排行榜

利用jQuery实现的一个简单的电影排行榜，先看一下效果图：
在这里插入图片描述
样式布局没什么可说的，重要的是jQuery通过添加或移除类来操作DOM元素，大家可以做做，有助于理解jQuery的DOM操作。如果有什么疑问，欢迎大家提问，留言或者私信都可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>toplist</title><style>* {padding: 0;margin: 0;}.toplist {width: 400px;height: 550px;border: 1px solid #000;margin: 50px auto;box-sizing: border-box;}.toplist > h1 {color: deeppink;font-size: 20px;border-bottom: 1px dashed #666666;padding: 10px;}.toplist > ul {list-style: none;}.toplist > ul li {line-height: 30px;border: 1px dashed #666666;padding: 5px;}.toplist li > span {display: inline-block;width: 20px;height: 20px;background-color: #666;margin-right: 10px;line-height: 20px;text-align: center;}/*li:nth-child(n+6)选中从第6个开始的子元素负方向范围:nth-child(-n+9)选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素*/.toplist ul li:nth-child(-n+3) span {background-color: deeppink;}.content {overflow: hidden;display: none;}.toplist .content p {font-size: 13px;}.content img {float: left;}.content p {width: 200px;height: 100px;float: right;}.toplist a {text-decoration: none;color: #000;}.current .content {display: block;}</style><script src="js/jquery-3.5.1.js"></script><script>$(function () {var lis = $('.toplist li');lis.hover(function () {$(this).addClass('current');}, function () {$(this).removeClass('current');});});</script>
</head>
<body>
<div class="toplist"><h1>电影排行榜</h1><ul><li><span>1</span><a href="#">电影名称</a><br><div class="content"><img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"alt="战狼"><p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p></div></li><li><span>2</span><a href="#">电影名称</a><br><div class="content"><img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"alt="战狼"><p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p></div></li><li><span>3</span><a href="#">电影名称</a><br><div class="content"><img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"alt="战狼"><p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p></div></li><li><span>4</span><a href="#">电影名称</a><br><div class="content"><img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"alt="战狼"><p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p></div></li><li><span>5</span><a href="#">电影名称</a><br><div class="content"><img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"alt="战狼"><p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p></div></li><li><span>6</span><a href="#">电影名称</a><br><div class="content"><img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"alt="战狼"><p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p></div></li></ul>
</div>
</body>
</html>