需求说明:
使用 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>