查看本章节

查看作业目录

需求说明：

使用 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. JavaIO——转换流、字符编码

    1.转换流 转换流是将字节流变成字符流的流. OutputStreamWriter:将字节输出流转换成字符输出流. public class OutputStreamWriter extends Wr ...

  2. haproxy动态增减主机与keepalived高级应用

    一:本文将详细介绍haproxy的配置使用以及高级功能的使用,比如通过haproxy进行动态添加删除负载集群中的后端web服务器的指定主机,另外将详细介绍keepalived的详细配置方法.配置实例及 ...

  3. 页面屏蔽backspace键

    1 //页面加载完成 2 $(document).ready(function(){ 3 //禁止退格键 作用于Firefox.Opera 4 document.onkeypress = banBac ...

  4. 【Spring Framework】Spring入门教程（七）Spring 事件

    内置事件 Spring中的事件是一个ApplicationEvent类的子类,由实现ApplicationEventPublisherAware接口的类发送,实现ApplicationListener ...

  5. ANTLR 简介

    <ANTLR 4权威指南>由机械工业出版社出版,有兴趣的读者推荐购买阅读. 本专题大多内容来源于我读<ANTLR 4权威指南>的随手笔记以及个人实践,仅供参考学习,请勿用于任何 ...

  6. Mongodb集群调研

    目录 一.高可用集群的解决方案 二.MongoDB的高可用集群配置 三.Mongo集群实现高可用方式详解 四.Sharding分片技术 一.高可用集群的解决方案 高可用性即HA(High Availa ...

  7. 如何优雅的在scrapy中使用selenium —— 在scrapy中实现浏览器池

    1 使用 scrapy 做采集实在是爽,但是遇到网站反爬措施做的比较好的就让人头大了.除了硬着头皮上以外,还可以使用爬虫利器 selenium,selenium 因其良好的模拟能力成为爬虫爱(cai) ...

  8. [BUUCTF]PWN——picoctf_2018_rop chain

    picoctf_2018_rop chain 附件 步骤: 例行检查,32位,开启了NX保护 试运行一下程序,看到输入太长数据会崩溃 32位ida载入,习惯性的检索程序里的字符串,看见了flag.tx ...

  9. 合并函数Combiner.Combine…（Power Query 之 M 语言）

    按相同分隔符合并: =Combiner.CombineTextByDelimiter("分隔符", 引号字符) 分隔符 直接输入 特殊符号 制表符:#(tab) 回车:#(cr) ...

  10. 10 - Vue3 UI Framework - Tabs 组件

    标签页是非常常用的组件,接下来我们来制作一个简单的 Tabs 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 可以选择标签页排列的方向 选中的标签页应当有下划线高亮显示 切换选中时 ...