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. xtu summer individual 6 F - Water Tree

    Water Tree Time Limit: 4000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Orig ...

  2. Light oj-1002 - Country Roads,迪杰斯特拉变形,不错不错~~

                                                                                               1002 - Co ...

  3. Linux下汇编语言学习笔记41 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  4. Codeforces 651D Image Preview【二分+枚举】

    题意: 若干张照片,从头开始可以向左右两边读,已经读过的不需要再读,有的照片需要翻转,给定读.滑动和翻转消耗的时间,求在给定时间内最多能读多少页? 分析: 首先明确,只横跨一次,即先一直读一边然后再一 ...

  5. sql语句执行的很慢

    一个 SQL 执行的很慢,我们要分两种情况讨论: 1.大多数情况下很正常,偶尔很慢,则有如下原因 (1).数据库在刷新脏页,例如 redo log 写满了需要同步到磁盘. (2).执行的时候,遇到锁, ...

  6. PopupMenu的演示样例

    弹出菜单是停靠在一个View上的一个模式菜单. 假设View对象下方有空间,那么弹出菜单将显示在停靠对象的下方,否则会显示在上方. 这是很实用的: 源代码地址:http://download.csdn ...

  7. symfony 数据库中文乱码

    这个问题 是由于编辑器没有设置utf8格式造成的,当然config里也要设置utf8 解决方法:编辑器设置utf8,重启 doctrine: dbal: driver: pdo_mysql host: ...

  8. TCP网络库:Acceptor、TcpServer、TcpConnection

    Acceptor类:用于接收新的TCP连接,该类是内部class,供TcpServer使用,生命期由TcpServer控制 类成员: class Acceptor : boost::noncopyab ...

  9. 010 ACL

    Router>en Router#config t Enter configuration commands, one per line.  End with CNTL/Z. Router(co ...

  10. 008 frame relay

    Router>en Router#config t Enter configuration commands, one per line.  End with CNTL/Z. Router(co ...