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 爬虫示例，方便日后参考

    参考网址:https://zhuanlan.zhihu.com/p/32037625 def getOneMoviesInfo(Mid,url): import requests from lxml ...

  2. 关于OPENSSL的EVP函数的使用

    4月份没什么做,就是做了OPENSSL的 加密和解密的应用,现在公开一下如何调用OPENSSL对字符串进行加密和解密,当中也学会了对加密数据进行BASE64编码,现在公开一下代码,在这感谢GITHUB ...

  3. Chrome & CORS & Fetch API & Chrome 多开，应用分身

    Chrome & CORS & Fetch API Chrome 浏览器的跨域设置 https://www.cnblogs.com/cshi/p/5660039.html https: ...

  4. bzoj5105 晨跑 数论lcm

    “无体育,不清华”.”每天锻炼一小时,健康工作五十年,幸福生活一辈子”在清华,体育运动绝对是同学们生活中 不可或缺的一部分.为了响应学校的号召,模范好学生王队长决定坚持晨跑.不过由于种种原因,每天都早 ...

  5. 光纤通信（codevs 1955）

    题目描述 Description 农民John 想要用光纤连通他的N (1 <= N <= 1,000)个牲口棚(编号1..N).但是,牲口棚位于一个大池塘边,他仅可以连通相邻的牲口棚.J ...

  6. [bzoj1485][HNOI2009]有趣的数列_卡特兰数_组合数

    有趣的数列 bzoj-1485 HNOI-2009 题目大意:求所有1~2n的排列满足奇数项递增,偶数项递增.相邻奇数项大于偶数项的序列个数%P. 注释:$1\le n\le 10^6$,$1\le ...

  7. Hive之侧视图(Lateral View)

    Lateral View和UDTF类功能函数一起使用,表中的每一行和UDTF函数输出的每一行进行连接,生成一张新的虚拟表,可以对UDTF产生的记录设置字段名称,新加的字段可以使用在sort by,gr ...

  8. MapReduce Cross 示例

    MapReduce Cross 示例 package com.bsr.cross; import java.io.IOException; import org.apache.hadoop.conf. ...

  9. JAVA 流程控制之选择语句

    在程序设计时,有三种基本技术可以改变程序的流程控制: 调用方法: 选择: 循环. 在这里,我们主要来讲讲选择语句. JAVA中的选择语句与C语言中的基本相同,包括: if 语句: if/else 语句 ...

  10. datagrid行操作

    //获取第一个被选中的行 var row=$('#dg').datagrid('getSelected'); //获取行对应的索引值 var index=$('#dg').datagrid('getR ...