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

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

需求说明:


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


要求如下:


点击页面的“更改样式”按钮后,使用 jQuery 设置标题“Web 前端技术”的字体颜色为红色

第一层的无序列表 <ul> 即“使用 DIV+CSS 设计前端页面”“使用 JavaScript+jQuery 制作页面特效”,列表符号是正方形

第二层无序列表是说明具体章节内容的,其列表符号是三角形


64.png


实现思路:


在 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>
相关文章
|
1月前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
119 79
|
6月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
71 1
|
4月前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
657 60
|
4月前
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
179 5
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
|
3月前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
66 7
|
3月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
4月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
104 7
|
4月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
101 5
|
4月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
96 2
|
5月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
43 0