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

最新推荐文章于 2022-06-27 23:54:38 发布

明金同学

最新推荐文章于 2022-06-27 23:54:38 发布

阅读量4.9k

点赞数 2

分类专栏： JavaScript交互式练习文章标签：列表 css jquery java js

本文链接：https://blog.csdn.net/weixin_44893902/article/details/109633264

版权

JavaScript交互式练习专栏收录该内容

32 篇文章 21 订阅

订阅专栏

查看本章节

查看作业目录

需求说明：

使用 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>

明金同学

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

查看本章节查看作业目录需求说明：使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。要求如下：点击页面的“更改样式”按钮后，使用 jQuery 设置标题“Web 前端技术”的字体颜色为红色第一层的无序列表 <ul> 即“使用 DIV+CSS 设计前端页面”“使用 JavaScript+jQuery 制作页面特效”，列表符号是正方形第二层无序列表是说明具体章节内容的，其列表符号是三角形实现思路：在 HTML 页面中
复制链接

扫一扫