使用 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="请输入一个 ...
随机推荐
- 虚机扩大容量与vm减少所占容量
Linux的虚拟机碎片整理 sudo dd if=/dev/zero of=/free bs=1M sudo rm -f /free 镜像压缩 移动镜像 VBoxManage internalcomm ...
- Why is the size of an empty class not zero in C++?
Predict the output of the following program? 1 #include<iostream> 2 using namespace std; 3 4 c ...
- 【Linux】【Basis】Grub
GRUB(Boot Loader): 1. grub: GRand Unified Bootloader grub 0.x: grub legacy grub 1.x: grub2 2. gr ...
- layui-入门
1.下载layui 2.导入layui <title>开始使用layui</title> <!-- 导入js样式 --> <link rel="st ...
- 【力扣】123. 买卖股票的最佳时机 III
给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 两笔 交易. 注意:你不能同时参与多笔交易(你必须在再次购买前出售掉之前的 ...
- 【C/C++】习题3-5 谜题/算法竞赛入门经典/数组和字符串
[题目] 有一个5*5的网络,恰好有一个格子是空的(空格),其他格子各有一个字母. 指令:A, B, L, R 把空格上.下.左.右的相邻字母移到空格中. [输入] 初始网格和指令序列(以数字0结束) ...
- Linux目录终章，单用户模式修改密码、环境变量、第三方软件安装
目录 今日内容概要 内容详细 解析映射文件 磁盘挂载文件 开机加载脚本 系统启动级别 使用单用户模式修改密码 变量加载文件 登录提示信息 第三方软件安装目录(编译安装目录) 系统日志目录 保存系统运行 ...
- centos7部署二进制mysql-5.6
目录 一.环境声明 二.程序部署 一.环境声明 [mysql-Server] 主机名 = host-1 系统 = centos-7.3 地址 = 1.1.1.1 软件 = mysql-5.6.39 3 ...
- Google Earth Engine 批量点击RUN任务，批量取消正在上传的任务
本文内容参考自: https://blog.csdn.net/qq_21567935/article/details/89061114 https://blog.csdn.net/qq_2156793 ...
- Windows 11实现录屏直播，搭建Nginx的rtmp服务
先!下载几个工具呗 官方下载FFmpeg:http://www.ffmpeg.org 官方下载nginx-rtmp-module:https://github.com/arut/nginx-rtmp- ...