4-2 编程练习

结合所学的祖先后代选择器，实现如下图所示效果

任务

(1)使用祖先后代选择器将第二段文字背景色变成红色

(2)使用jQuery的.css()方法设置样式，语法css('属性 '属性值')

参考代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>慕课网4-2 编程练习</title>

</head>

<body>

    <div class="box">

        <ol>

            <li>道终来归正法</li>

            <li>课书聊自限三更</li>

            <li>网中跳出便飞腾</li>

            <li>首身离兮心不惩</li>

            <li>选取灵芝草尽芟</li>

        </ol>

        <ul>

            <li>前望舒使先驱兮</li>

            <li>端端正正人如月</li>

            <li>工夫却是花枝浅</li>

            <li>程文堆案晨兴早</li>

            <li>师尚父年浑未艾</li>

        </ul>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script>

    $(document).ready(function() {

      //此处填写代码

      $('ul li')

      .css({'background':'red'})

    });

    </script>

</body>

</html>

慕课网4-2 编程练习：jQuery祖先后代选择器小案例的更多相关文章

  1. 慕课网4-6 编程练习:jQuery后排兄弟选择器

    4-6 编程练习 结合所学的兄弟选择器" ~ ",实现如下图所示效果: 任务 (1)使用兄弟选择器" ~ "将技术语言的背景色变成红色 (2)使用jQuery的 ...

  2. 慕课网 javascript深入浅出编程练习

    任务 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false ...

  3. Jquery广告浮动效果小案例

    导入<script src="<%=path%>/html5/js/jquery.js"></script>文件 <SCRIPT type ...

  4. jQuery的DOM操作小案例

    案例一:下拉列表左右选择 <body> <div> <select style="width:60px" multiple size="10 ...

  5. 【学】jQuery的源码思路1——后代选择器

    jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...

  6. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  7. jQuery基础---常规选择器

    内容摘要: 1.简单选择器 2.进阶选择器 3.高级选择器 发文不易,转载请注明出处! jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名. ...

  8. 第一百六十四节，jQuery，常规选择器

    jQuery,常规选择器 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名. ...

  9. 慕课网2-5 编程练习：通过jQuery通配符选择器进行文字变色

    2-5 编程练习 请请使用*选择器将div标签中的字体颜色变成红色 效果图: 任务 (1)使用通配符选择器 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值') 参考代码 ...

随机推荐

  1. CodeForcesGym 100517I IQ Test

    IQ Test Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForcesGym. Orig ...

  2. [luoguP1021] 邮票面值设计（DFS + dp）

    传送门 数据很小,可以DFS,判断的时候用背包DP 然而不知到枚举到哪里.... 首先枚举前可以求一遍题目中的MAX,下一层DFS的时候可以只枚举到MAX + 1,因为再往上就必定会出现断层 蒟蒻很菜 ...

  3. 【BZOJ2818】Gcd（莫比乌斯反演，欧拉函数）

    题意:给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对 1<=N<=10^7 思路:莫比乌斯反演,同BZOJ2820…… ; ..max]of ...

  4. JSP的隐藏对象

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/implicit-objects.html: JSP隐式对象是Java对象,JSP容器使隐式对象在每一个页 ...

  5. sql 按中文排序

    sql server:select * from [表名]order by [字段],[字段] collate Chinese_PRC_CS_AS_KS_WS mysql:select * from ...

  6. hadoop的linux配置

    一.新建hadoop组跟用户(password:hadoop) [root@localhost home]# groupadd hadoop [root@localhost home]# userad ...

  7. 自已实现一个UI库

    [2014年写一个UI库时写的几个文章,公布出来] 几年前的一个嵌入式的UI开发,使自己有机会接触到了UI的一些底层知识,尽管之前也开发过非常多Windows下的信息应用系统,也做非常多的界面开发,但 ...

  8. C#如何开发多语言支持的Winform程序

    C# Winform项目多语言实现(支持简/繁/英三种语言)有很多种方案实现多语言,我在这里介绍一种最简单最容易理解的,作为教学材题应该从通俗易懂入手.在写这篇文章之前,本来想用枚举窗体对象成员的方式 ...

  9. 可利用空间表（Free List）

    写这篇文章的动因是因为 2015 年 04 月 02 日的阿里在线笔试题考到了这个知识点.我当时模模糊糊的写了一些,估计写的也不对,所以在这里总结一下. 原题 常常会有频繁申请.释放内存的需求,比如在 ...

  10. cout 堆栈，operator&lt;&lt; 运算符重载输出问题

    在C++中cout的输出流其中,有一些问题非常easy出错,就比方以下这道简单程序.看似简单.但却是一个值得深思的问题~~ #include <iostream> using namesp ...