查看本章节
查看作业目录
需求说明：
使用 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>