使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
查看本章节
查看作业目录
需求说明：
使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
要求如下：
- 点击页面的“更改样式”按钮后，使用 jQuery 设置标题“Web 前端技术”的字体颜色为红色
- 第一层的无序列表 <ul> 即“使用 DIV+CSS 设计前端页面”“使用 JavaScript+jQuery 制作页面特效”，列表符号是正方形
- 第二层无序列表是说明具体章节内容的，其列表符号是三角形
实现思路：
- 在 HTML 页面中导入 jQuery 框架
- 在页面加载完毕事件中，获取标题对象，调用 css() 方法，设置字体颜色是红色
- 在页面加载完毕事件中，获取第一层的无序列表对象，调用 css() 方法，设置列表符号是
- 在页面加载完毕事件中，获取第二层的无序列表对象，调用 css() 方法，设置列表符号是
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(":input").click(function(){
$(":header").css("color","red");
$(":header+ul").css("list-style-type","upper-roman");
$(":header+ul>li>ul").css("list-style-type","lower-alpha");
})
})
</script>
</head>
<body>
<h2>Web前端技术</h2>
<ul>
<li>使用DIV+CSS设计前端网页</li>
<ul>
<li>页面布局</li>
<li>美化页面</li>
<li>页面特效</li>
</ul>
<li>使用JavaScript+Jquery制作页面特效</li>
<ul>
<li>JavaScript基础</li>
<li>Jquery选择器</li>
<li>Jquery操作DOM</li>
</ul>
</ul>
<input type="button" value="更改样式" />
</body>
</html>
使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。的更多相关文章
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式
查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- 转：Jquery如何获取某个元素前(后)的文本内容？
原文:[解决]Jquery如何获取某个元素前(后)的文本内容? <span> text here... <a id="target_element">百万创 ...
- jquery选择器:获取父级元素、同级元素、子元素
jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- [jQuery]无法获取隐藏元素（display:none）宽度(width)和高度(height)的新解决方案
在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
随机推荐
- db9串口接头的定义
这个接头都是以公头为准,所有接头还是以公头去记. RS-232端(DB9公头/针型)引脚定义 2: RXD 3:TXD 5:GND 1/4/6:内部相链接 7/8 :内部相链接 1．RS-232端 ...
- Linux学习 - 变量测试与内容替换
变量置换方式 变量y没有设置 变量y为空 变量y有值 x=${y-新值} x=新值 x空 x=$y x=${y:-新值} x=新值 x=新值 x=$y x=${y+新值} x空 x=新值 x=新值 x ...
- “==” 和 equals()的区别
※ "==" 和 equals()的区别 ※ == :比较. 基本数据类型比较的是值:. 引用类型比较的是地址值. ※ equals(Object o):1)不能比较基本数据类型, ...
- Git初始化及仓库创建和操作
一.基本信息配置 1.全局配置用户名 git config --global user.name "YeHuan-byte" 2.全局配置邮箱 git config --globa ...
- 可恶的Math.random()
生成随机数1-10 (包含1和10) 结果是这样的:Math.floor(Math.random()*10+1) 那么问题又来了 Math.floor(Math.random()*10)生成的只 ...
- MySQL 创建定时任务 详解
自 MySQL5.1.6起,增加了一个非常有特色的功能–事件调度器(Event Scheduler),可以用做定时执行某些特定任务,来取代原先只能由操作系统的计划任务来执行的工作.事件调度器有时也可称 ...
- java多线程9：线程池
线程池 线程池的优点 我们知道线程的创建和上下文的切换也是需要消耗CPU资源的,所以在多线程任务下,使用线程池的优点就有: 第一:降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造成的消耗. ...
- CF60A Where Are My Flakes? 题解
Content 有人发现他的麦片不见了,原来是室友把它藏在了 \(n\) 个盒子中的一个,另外还有 \(m\) 个提示,有两种: \(\texttt{To the left of }x\):麦片在第 ...
- CF1041B Buying a TV Set 题解
Content 给定四个数 \(a,b,c,d\),求满足以下条件的数对 \((x,y)\) 的个数: \(x\leqslant a,y\leqslant b\). \(\dfrac{x}{y}=\d ...
- LuoguP5006 [yLOI2018] 大美江湖 题解
Content 题意实在是太过复杂了,因此请回到题面查看. Data Range 本部分和 Solution 部分变量的含义同题面. \(1\leqslant n,m\leqslant 100,0\l ...