使用 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>
相关文章
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
JavaScript 前端开发
jQuery和CSS3超酷全屏视觉差幻灯片特效
jQuery和CSS3超酷全屏视觉差幻灯片特效
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
297 22
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
476 21
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
299 7
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
280 2
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
JavaScript
jQuery和CSS3精美翻页式电子时钟特效
jQuery和CSS3精美翻页式电子时钟特效
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效