使用 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="请输入一个 ...
随机推荐
- 文件读写以及NMEA码中GPS信息的提取
首先先了解下什么是NMEA码,这里有很好的解释,就不直接搬运了 http://www.gpsbaby.com/wz/nmea.html 首先要找到包含GPS信息的文本行,即字符串GPGGA所在行 $G ...
- Swift Storyboard找不到类文件
Swift语言引入了Module概念,在通过关键字@objc(类名)做转换的时候,由于Storyboard没有及时更新Module属性,会导致如下两种类型错误: 1 用@objc(类名)标记的Swif ...
- oc中调用c函数 实现将字符串转换成unsigned char
帮助码友解决问题,从而复习了一下oc中调用c函数的方式 1,新建c 头文件 test.h 定义 c 函数 #ifndef test_h #define test_h void verificatio ...
- Linux服务器---论坛discuz
Discus Discuz是一款免费的论坛管理系统,大量的使用了AJAX,内部有丰富的模板风格. 1.下载discuz软件(https://cn.wordpress.org/download/rele ...
- zabbix之监控MySQL
#:先配置MySQL的主从 #:安装Percona Monitoring Plugins (地址:https://www.percona.com/downloads/)#:我安在从库,监控哪个就安哪个 ...
- Dockers启动Kafka
首先安装 Confluent Platform Quick Start for Confluent Platform (Local install) Use this quick start to g ...
- 【Java 调优】Java性能优化
Java性能优化的50个细节(珍藏版) 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: ...
- RocketMQ架构原理解析（三）：消息索引
一.概述 "索引"一种数据结构,帮助我们快速定位.查询数据 前文我们梳理了消息在Commit Log文件的存储过程,讨论了消息的落盘策略,然而仅仅通过Commit Log存储消息是 ...
- 赋能开发：捷码携手达内教育打造IT职业教育新生态
近日,达内教育与远眺科技签约联合培养的第一批低代码开发方向的高职学生,在杭州未来科技城捷码总部顺利毕业,首期合格学员总数超过30名.随着这些接受了"捷码"低代码平台全程" ...
- Jenkins性能测试
目录 一.简介 二.JMeter测试 一.简介 Taurus是-个开源的自动化框架,用于运行各种开源负载测试工具和功能测试工具.其支持最流行的开源负载测试工具Apache JMeter.Seleniu ...