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

查看本章节

查看作业目录

需求说明：

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

要求如下：

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

实现思路：

  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>

 

posted @ 2020-11-11 23:24  明金同学  阅读(67)  评论(0)  编辑  收藏  举报