查看本章节

查看作业目录

需求说明：

使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式

实现思路：

  1. 在 HTML 页面中导入 jQuery 框架 在页面加载完毕事件中，获取 <span> 标签对象，调用 css() 方法，设置字体颜色为红色

  2. 在页面加载完毕事件中，获取 <a> 标签对象，调用 css() 方法，去掉 <a> 标签的下划线

  3. 在页面加载完毕事件中，获取 id 为 score 的 <span> 标签对象，调用 css() 方法，设置字体颜色为橙色

  4. 在页面加载完毕事件中，获取 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＞ 标签的样式的更多相关文章

  1. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  2. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  3. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  4. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  5. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  6. DOM——获取页面元素

    获取页面元素 为什么要获取页面元素 例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作 根据id获取元素 var div = document.getE ...

  7. JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

    jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...

  8. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  9. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

随机推荐

  1. windows Notepad++ 上配置 vs 编译器 ， 编译并运行

    windows 中 配置 vs编译器 在Linux下,Kris是倾向于在终端中使用gcc和g++来编译C/C++的,在Windows下相信很多人都是选择臃肿的Visual Studio,我亦不免如此. ...

  2. 查看linux系统CPU和内存命令

    cat /proc/cpuinfo查看linux系统的CPU型号.类型以及大小,如下图所示.   通过greap命令根据Physical Processor ID筛选出多核CPU的信息.   cat ...

  3. mysql与clickhouse的字段类型对应表

  4. entfrm-app赋能entfrm零代码开发平台 开启多平台分发

    entfrm-app是基于uni-app 框架.使用 Vue.js 语法开发的移动端 App开源产品.它可以编译为 H5.IOS App.Android App.微信小程序.QQ小程序.钉钉小程序.支 ...

  5. Actuator监控器

    一.简介 Actuator(激励者;执行器)是Spring Boot提供的一个可挺拔模块,用于对工程进行监控.其通过不同的监控终端实现不同的监控功能.其功能与Dubbo的监控中心类似,不同的是,Dub ...

  6. ES6 object.defineProperty

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. Object.defineProperty(obj, prop, ...

  7. Java poi导出设置 Excel某些单元格不可编辑

    小白的总结,大神勿喷:需要转载请说明出处,如果有什么问题,欢迎留言 一.需求: 1.某一列 .某一行或某些单元格不可编辑,其他列可以编辑 二.期间遇到的问题 1.无法设置成不可编辑 2.设置为不可编辑 ...

  8. Log4j 被曝核弹级漏洞，开发者炸锅了！

    大家好,我是鱼皮,开门见山,知名的开源项目 Apache Log4j 出事了! 2021 年 12 月 9 日,该项目被曝存在 严重安全漏洞 ,攻击者只需要向目标机传入一段特殊代码,就能触发漏洞,自由 ...

  9. python自带性能强悍的标准库 itertools

    可迭代对象就像密闭容器里的水,有货倒不出 itertools是python内置的标准模块,提供了很多简洁又高效的专用功能,使用得当能够极大的简化代码行数,同时所有方法都是实现了生成器函数,这就意味着极 ...

  10. Mysql脚本 优化检测

    下载地址: wget https://launchpad.net/mysql-tuning-primer/trunk/1.6-r1/+download/tuning-primer.sh 安装依赖: y ...