需求说明:
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
实现思路:
在 HTML 页面中导入 jQuery 框架 在页面加载完毕事件中,获取 <span> 标签对象,调用 css() 方法,设置字体颜色为红色
在页面加载完毕事件中,获取 <a> 标签对象,调用 css() 方法,去掉 <a> 标签的下划线
在页面加载完毕事件中,获取 id 为 score 的 <span> 标签对象,调用 css() 方法,设置字体颜色为橙色
在页面加载完毕事件中,获取 class 为 more 的 <a> 标签对象,调用 css() 方法,设置 <a> 标签的下划线
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ font-size: 14px; } dl{ height: 200px; width: 400px; } dt{ float: left; margin-right: 20px; } dd{ line-height: 20px; } </style> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("dd>span").css("color","red"); $("#score").css("color","orange"); $("a").css({"text-decoration":"none","color":"blue"}) $(".more").css("text-decoration","underline") }) </script> </head> <body> <dl> <dt><img src="img/bg.png" width="150" height="200"></dt> <dd><span>评分:</span><span id="score">8.4</span></dd> <dd><span>别名:<span>冰雪大冒险/魔雪奇缘</dd> <dd><span>演员:</span>易迪娜门泽尔<a href="#"></a></dd> <dd><span>导演:</span><a href="#">克里斯·巴克Jennifer Lee</a></dd> <dd><span>地区:</span>美国</dd> <dd><span>简介:</span>Frozen》讲述一个诅咒令王国被冰天雪地永久覆盖,乐观无畏的安娜(由克里斯汀·贝尔配音)和一个大胆的...</dd> <dd><a href="#" class="more">more</a></dd> </dl> </body> </html>