使用 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月前
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
23 0
|
1月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
24 1
jQuery+CSS3自动轮播焦点图特效源码
|
1月前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
|
1月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
32 1
|
1月前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
24 1
|
1月前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
1月前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。
|
1月前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
1月前
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
12 0
|
JavaScript
jquery对象和dom对象-6
jquery对象和dom对象-6
76 0
jquery对象和dom对象-6