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. python接口自动化测试（一）

    本节开始,开始介绍python的接口自动化测试,首先需要搭建python开发环境,到https://www.python.org/下载python 版本直接安装就以了,建议 下载python2.7.1 ...

  2. linux & command line & console & logs

    linux & command line & console & logs how to get the logs form linux command console htt ...

  3. Sumdiv（poj1845）

    题意:求A^B的因子的和. /* 首先将A分解 A=p1^a1*p2^a2*...*pn*an A^B=p1^a1B*p2^a2B*...*pn*anB 因子之和sum=(1+p1+p1^2+...+ ...

  4. hdu3756（三分）

    题意:三维坐标轴,有以原点为圆心,底面在xoy平面上,顶点在z轴上的圆锥,问圆锥的最小体积为多少才能完全覆盖空间里的所有点(n<=10000) 分析: 很容易想到转成二维问题,将其投影到xoz平 ...

  5. 选择器的使用(nth-child和nth-last-child选择器)

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  6. Ubuntu 16.04安装Markdown编辑器MarkMyWords

    继上一篇文章http://www.cnblogs.com/EasonJim/p/7119345.html中使用Sublime Text 3进行Markdown的编辑,总觉得操作上比较繁琐,现在推荐使用 ...

  7. PHP关于文件与文件夹（1） 写入文件 文件权限 三、锁定文件

    一.文件权限 总之中的一个切都是为了保证文件夹的安全,保证文件夹的安全比保证文件的安全更重要. 二.写入文件 file_put_contents($file,$data);  //假设没有的话会创建. ...

  8. yarn 和 npm 的区别

    npm 与 yarn 命令对比 npm yarn npm install yarn install (N/A) yarn install --flat (N/A) yarn install --har ...

  9. psping

    psping工具功能主要包括:ICMP Ping.TCP Ping.延迟测试.带宽测试,是微软出品. 下载地址:https://download.sysinternals.com/files/PSTo ...

  10. 《从零開始学Swift》学习笔记（Day67）——Cocoa Touch设计模式及应用之MVC模式

    原创文章,欢迎转载.转载请注明:关东升的博客   MVC(Model-View-Controller,模型-视图-控制器)模式是相当古老的设计模式之中的一个,它最早出如今Smalltalk语言中. 如 ...