查看本章节

查看作业目录

需求说明：

使用 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. Shell学习（十）——du、df命令

    一.du 命令 1.命令格式: du [选项][文件] 2.命令功能: 显示每个文件和目录的磁盘使用空间. 3.命令参数: -a或-all 显示目录中个别文件的大小. -b或-bytes 显示目录或文 ...

  2. Oracle中dbms_random包详解

    Oracle之DBMS_RANDOM包详解参考自:https://www.cnblogs.com/ivictor/p/4476031.html https://www.cnblogs.com/shen ...

  3. SpringBoot-RestTemplate测试Controller

    1.功能测试类 package com.imooc.controller; import java.io.IOException; import java.math.BigDecimal; impor ...

  4. java关键字volatile内存语义详细分析

    volatile变量自身具有下列特性. 1.可见性.对一个volatile变量的读,总是能看到(任意线程)对这个volatile变量最后的写 入. · 2.原子性:对任意单个volatile变量的读/ ...

  5. Js判断数组中是否存在某个元素

    Js判断数组中是否存在某个元素 方法一:indexOf(item,start); Item:要查找的值:start:可选的整数参数,缺省则从起始位子开始查找. indexOf();返回元素在数组中的位 ...

  6. 转：Sed使用

    awk于1977年出生,今年36岁本命年,sed比awk大2-3岁,awk就像林妹妹,sed就是宝玉哥哥了.所以 林妹妹跳了个Topless,他的哥哥sed坐不住了,也一定要出来抖一抖. sed全名叫 ...

  7. Notepad++ 常用功能：批量取消替换换行、强制刷新数据

    批量取消替换换行 换行批量替换成空格 Ctrl+F 打开查找替换窗口,使用:\r\n 替换成 空格,全部替换 强制刷新数据源,重新加载数据 快捷键:Ctrl+R 或者 Alt+F 然后 L 或者点击菜 ...

  8. M函数目录（Power Query 之 M 语言）

    2021-12-11更新 主页(选项卡) 管理列(组) 选择列 选择列Table.SelectColumns 删除列 删除列Table.RemoveColumns 删除其他列Table.SelectC ...

  9. SQL 注入基础

    SQL注入 SQL注入是服务器端未严格校验客户端发送的数据,而导致服务端SQL语句被恶意修改并成功执行的行为. 本质:把用户输入的数据当作代码执行.任何和数据库产生交互的地方便有可能存在注入. SQL ...

  10. LuoguP2097 资料分发1 题解

    Content 有一些电脑,一部分电脑有双向数据线连接.如果一个电脑得到数据,它可以传送到的电脑都可以得到数据.现在,你有这个数据,问你至少将其输入几台电脑,才能使所有电脑得到数据. 数据范围:\(n ...