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

时间：2021-04-15 22:59:09

查看本章节

查看作业目录

需求说明：

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

要求如下：

  • 点击页面的“更改样式”按钮后，使用 jQuery 设置标题“Web 前端技术”的字体颜色为红色
  • 第一层的无序列表 <ul> 即“使用 DIV+CSS 设计前端页面”“使用 JavaScript+jQuery 制作页面特效”，列表符号是正方形
  • 第二层无序列表是说明具体章节内容的，其列表符号是三角形

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

实现思路：

  1. 在 HTML 页面中导入 jQuery 框架
  2. 在页面加载完毕事件中，获取标题对象，调用 css() 方法，设置字体颜色是红色
  3. 在页面加载完毕事件中，获取第一层的无序列表对象，调用 css() 方法，设置列表符号是
  4. 在页面加载完毕事件中，获取第二层的无序列表对象，调用 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>

相关文章