使用 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="请输入一个 ...
随机推荐
- windows下 apache 二级域名相关配置 【转】
转至: http://www.th7.cn/Program/php/201306/141305.shtml 今天给大家总结下 windows 下 apache的二级域名的相关配置 下面就利用本地127 ...
- MySQL 迁移到 Redis 记
前些日子,一个悠闲又不悠闲的下午,我还在用 Node.js 写着某个移动互联网应用的 API 服务端.那时还是用 MySQL 作为数据库,一切都很好,所有功能正常运行.可是有很多问题让人不安: 频繁的 ...
- C语言实现鼠标绘图
使用C语言+EGE图形库(Easy Graphics Engine).思路是通过不断绘制直线来实现鼠标绘图的功能,前一个时刻鼠标的坐标作为直线的起点,现在时刻的坐标作为终点(严格意义是线段而不是直线) ...
- mysql的MVCC多版本并发控制机制
MVCC多版本并发控制机制 全英文名:Multi-Version Concurrency Control MVCC不会通过加锁互斥来保证隔离性,避免频繁的加锁互斥. 而在串行化隔离级别为了保证较高的隔 ...
- 工期设定（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 任务录入好以后,就得安排工期了不是,要不然每一个任务都如自动设置的从今天开始一个工作日内完成,这么简单的话,还要Proje ...
- VMware 安装Linux (以CentOS7-2009为例)
1.VMware下载安装 链接:https://pan.baidu.com/s/11Y-AFB3aaAFxafdGPw4zaw 提取码:hskj 2.CentOS镜像官网下载:https://www. ...
- git 省略 commit message
每次提交使用 git commit --allow-empty-message --no-edit 也可以设置命令别名 git config --global alias.nocommit " ...
- Qt Creator 源码学习笔记04，多插件实现原理分析
阅读本文大概需要 8 分钟 插件听上去很高大上,实际上就是一个个动态库,动态库在不同平台下后缀名不一样,比如在 Windows下以.dll结尾,Linux 下以.so结尾 开发插件其实就是开发一个动态 ...
- libevent源码学习（13）：事件主循环event_base_loop
目录开启事件主循环执行事件主循环校对时间 阻塞/非阻塞处理激活队列中的event事件主循环的退出event_base_loopexitevent_base_loopbreak开启事件主循环 ...
- More Effective C++ 基础议题（条款1-4）总结
More Effective C++ 基础议题(条款1-4)总结 条款1:仔细区别pointers和references 如果有一个变量,其目的是用来指向(代表)另一个对象,但是也有可能它不指向(代表 ...