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. HDU 5492 Find a path

    Find a path Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID ...

  2. hihoCode #1151 : 骨牌覆盖问题·二

    #1151 : 骨牌覆盖问题·二 Time Limit:10000ms Case Time Limit:1000ms Memory Limit:256MB 描述 上一周我们研究了2xN的骨牌问题,这一 ...

  3. poj 1330lca模板题离线算法

    #include<iostream> #include<vector> using namespace std; const int MAX=10001; int pre[MA ...

  4. [NOIP2006] 提高组 洛谷P1064 金明的预算方案

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”.今 ...

  5. [NOIP2006] 普及组

    明明的随机数 STL真是偷懒神器 /*by SilverN*/ #include<algorithm> #include<iostream> #include<cstri ...

  6. 【Codevs1237&网络流24题餐巾计划】（费用流）

    题意:一个餐厅在相继的 N 天里,每天需用的餐巾数不尽相同. 假设第 i 天需要 ri块餐巾(i=1,2,…,N).餐厅可以购买新的餐巾,每块餐巾的费用为 p 分: 或者把旧餐巾送到快洗部,洗一块需 ...

  7. 整体二分初识--POJ2104：K-th Number

    n<=100000个数有m<=5000个询问,每次问区间第k大. 方法一:主席树!…… 方法二:整体二分. 整体二分一次性计算半个值域对一个区间的询问的贡献,然后根据“这半边的贡献在某个询 ...

  8. Ubuntu 16.04 GNOME下解决Sublime Text3中文输入（ibus）（转）

    解决方法: 1.进入Sublime Text3插件管理文件夹 cd ~/.config/sublime-text-3/Packages 2.获取InputHelper插件 git clone http ...

  9. linux命令dmesg查看进程被杀死原因

    有一次一个python进程挂了,使用了下这个命令. 可以看到原因:虚拟机总共内存8082608KB,结果python项目就消耗掉了7341764KB,内存泄露,导致python进程被系统杀死 顺带介绍 ...

  10. How to enable Google Play App Signing

    how to enable google play app signing  ------------------------------------------------------------- ...