使用 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>
相关文章
|
4月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
4月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
55 10
|
5月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
66 1
|
4月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
86 5
|
3月前
|
前端开发 JavaScript UED
|
3月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
80 2
|
4月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
119 2
|
4月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
41 0

热门文章

最新文章