使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式
查看本章节
查看作业目录
需求说明：
使用 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>
使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式的更多相关文章
- 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
- DOM——获取页面元素
获取页面元素 为什么要获取页面元素 例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作 根据id获取元素 var div = document.getE ...
- JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值
jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
随机推荐
- PLSQL导出oracle表结构和数据
1.导出表结构和数据 方式1.tools->export user objects是导出表结构 tools ->export user object 选择选项,导出.sql文件 说明:导出 ...
- Linux命令之用户权限管理
1.创建组.删除组.修改组名.查看组 groupadd 组名 #添加用户组 groupdel 组名 #删除用户组 groupmod -n 新组名 原组名 #修改用户组名称 groups 用户名 #查看 ...
- recyclerView DiffUtil使用
DiffUtil是和RecyclerView一块用的,DiffUtil用来比较两个数据集,他的最大用处是在RecyclerView刷新时,不在无脑. 以前adapter.notifyDataSetCh ...
- Linux基础命令---wget下载工具
wget wget是一个免费的文件下载工具,可以从指定的URL下载文件到本地主机.它支持HTTP和FTP协议,经常用来抓取大量的网页文件. 此命令的适用范围:RedHat.RHEL.Ubuntu.Ce ...
- Springboot Oauth2 集成Swagger2权限验证实战
Swagger是什么?能干什么?在这就不展开讲解了.本文主要讲解如何集成OAuth2的Password模式权限验证,验证接口是否具有权限. 引入依赖 <dependency> <gr ...
- vue-cli2嵌入html
1.使用iframe <!-- 相对路径/绝对路径 --> <iframe src="../../../static/zsw.html"></ifra ...
- 单元测试（Jest 和 Mocha）
Vue CLI 拥有通过 Jest 或 Mocha 进行单元测试的内置选项. Jest 是功能最全的测试运行器.它所需的配置是最少的,默认安装了 JSDOM,内置断言且命令行的用户体验非常好.不过你需 ...
- @Conditional 注解，基于条件实例对象
.catalogue-div { position: relative; background-color: rgba(255, 255, 255, 1); right: 0 } .catalogue ...
- Nginx安全检查
1.检查是否配置Nginx账号锁定策略 描述 1.执行系统命令passwd -S nginx来查看锁定状态 出现Password locked证明锁定成功 如:nginx LK ..... (Pass ...
- 熔断和降级的初步详解实现（NET Core控制台输出讲解Polly）
概述 很多朋友包括我,对于"八股文"可以说是比较熟练的,每次面试前都会专研不少东西,各种固定答案.专业术语都是张口就来,一个字,稳. 八股文:程序员八股文是指程序员在面试过程中经常 ...