点击DIV，修改第二个p元素的背景色为"orange"

最新推荐文章于 2023-03-03 16:23:11 发布

原创最新推荐文章于 2023-03-03 16:23:11 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

学习专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的交互效果，当点击ID为'div04'的DIV元素时，其下的第二个p子元素背景色将被更改为橙色，通过eq(1)选择器定位到目标元素并应用css方法来改变样式。

点击DIV，修改第二个p元素的背景色为"orange"

<div id="div04">
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
</div>
  $("#div04").on('click',function(){
            $("#div04>p").eq(1).css("background","orange");
        });

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ceremony_feeling

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Educoder jQuery遍历

Junds0的博客

06-11

1463

1.<!doctype html> Document <style> .container{ width: 300px; margin: 30px auto; border: 2px solid #000; } .item{ font-size: 60px; text-align: center; color: red; } </style>

使用jQuery点击DIV，修改第二个p元素的背景色为"orange"

weixin_43424506的博客

10-27

1054

点击DIV，修改第二个p元素的背景色为"orange" 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ ...

参与评论您还未登录，请先登录后发表或查看评论

jQuery点击DIV，修改第二个p元素的背景色为"orange"

qq_45747484的博客

10-26

1159

<div> <p>我是第一个p元素</p> <p>我是第一个p元素</p> <p>我是第一个p元素</p> </div> <script type="text/javascript"> $(function(){ $("div").on("c...

jQuery选择器

aohaoxing3762的博客

06-20

176

* jQuery和DOM //DOM和jQuery不可以使用对方的任何方法 var h1 = $("#test").html(); var h2 = document.getElementById("test").innerHTML; //DOM和jQuery对象互转，或者使...

任务描述本关任务：掌握 jQuery 基础的过滤选择器，实现一个色彩分明的表格。效果图如下：相关知识为了完成本关任务，你需要掌握：1.设置css属性，2.基础的过滤选择器。设置css属性设置单个属性 <div id="single">设置单个属性</div> 如果给上面的div标签添加css属性：background：orange; ，应该怎么实现呢？对于div标签，用jQuery可以这样写： $("#single").css("background","orange"); 效果如下：这是设置单个属性常用的方法。语法总结如下： $(selector).css(attr,value); 设置多个属性 <p class="more">设置多个属性</p> 如果给上面的p标签添加css属性： "background":"#ccc"; "text-align":"center"; "line-height":"40px"; 应该怎么办呢？对于p标签，用上面的方法一条一条的写，也是可以的，但是比较麻烦，下面是设置多个css属性的方法： $(".more").css({ "background":"#ccc", "text-align":"center", "line-height":"40px" }) 效果如下：可以看出，设置多个css属性是用对象的方式来实现的。语法总结如下: $(selector).css({ attr1: value1, attr2: value2, ... }) 过滤选择器(重点) <ul> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li> <li>第五个li</li> <li>第六个li</li> </ul> 基础效果图如下：现在分别获取获取指定的li元素，并添加相应的背景色。利用过滤选择器选择指定的li元素：获取第一个li标签，添加背景色orange, 代码如下：获取第一个li标签：$("li:first") 添加背景色： $("li:first").css("background","orange")；获取最后一个li标签，添加背景色green, 代码如下：获取最后一个li标签：$("li:last") 添加背景色： $("li:last").css("background","green")；效果图如下：获取下标为偶数的li标签，添加背景色#ccc, 代码如下：获取下标为偶数的li标签：$("li:even") 添加背景色： $("li:even").css("background","#eee")；获取下标为奇数的li标签，添加背景色#ccc, 代码如下：获取下标为奇数的li标签：$("li:odd") 添加背景色： $("li:odd").css("background","#ccc")。效果图如下：注：下标是从0开始的，li标签第一个下标是0，是偶数，所以背景色是"#eee"。编程要求 jQuery 已经引入，在右侧编辑器补充begin至end间的代码，实现一个色彩分明的表格。要求如下：用过滤选择器获取要操作的DOM元素；设置表头颜色为 yellowgreen；设置奇数行颜色为 lightyellow；设置偶数行颜色为 lavenderblush；提供的代码不允许修改，只允许填充begin至end中间的代码。提示：要先设置奇数行和偶数行的颜色，最后设置表头的颜色，否则会被覆盖的；这里css的背景色用 background, 不用 background-color。注意：为了方便评测，这里统一用双引号 "" 来表示字符串，切记。效果图如下：测试说明平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；

最新发布

11-15

`$('tr:odd').css('background-color', 'lightyellow')` 选择所有奇数行并将其背景颜色设置为 `lightyellow`，`$('tr:even').css('background-color', 'lavenderblush')` 选择所有偶数行并将其背景颜色设置为 `...

如何在HTML中将两种或以上的背景渐变效果叠加应用到同一个元素上？

10-29

/* 添加第二个背景渐变，这里是径向渐变 */ background-image: radial-gradient(circle, yellow, green); /* 使用叠加模式，两个渐变会混合在一起 */ background-blend-mode: multiply; } <div class="my-...

整体布局位于界面中央 vue实现奖学金评选资格判断：评奖学金对成绩有较高要求，请实现：学生输入姓名和各科成绩，点击按钮之后判断是否可以参评奖学金。假设课程数量为5门。奖学金评选条件为：成绩平均分90分以上；单科成绩不低于80分。源码中的参数变量，以及方法名称，需要增加姓名首字母小写和下滑杠作为特殊标记，为：“hzd_”在界面设置一个按钮，并使用事件监听的方式为该按钮编写响应事件，实现基础功能。要求新增2个div，使用双向绑定数据的方式分别记录成功之后和不成功的关键信息。在第二个div中以累加的方式记录成功信息的div为绿色，第二个div大小为200×200、在第三个div中以累加的方式记录不成功信息的div为橙色，第三个div大小为200×200；使用“template模板”的方式。

06-12

好的，这是一个比较复杂的问题，需要用到 Vue 的相关知识。...这两个 div 都设置了宽度、高度、背景颜色、字体颜色、内边距和外边距等样式。希望这个例子能够帮助你理解如何使用 Vue 实现奖学金评选资格判断。

点击DIV，修改第二个p元素的背景色

weixin_45746590的博客

10-27

253

2022-4-20作业

Cloud_vv的博客

04-20

552

1.使用jquery修改div元素的背景色(随意颜色) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1

点击DIV修改第二个p元素的背景色为"orange"

weixin_45747808的博客

10-26

333

<div> <p>我是第一个p元素</p> <p>我是第二个p元素</p> <p>我是第三个p元素</p> </div> <script> $('p').eq(1).css('background','orange') </script> ...

jQuery和ajax案例练习

m0_46467017的博客

03-03

1602

可以通过jQuery的last()和html()方法来实现。last()方法返回匹配元素集合中的最后一个元素，html()方法用于获取或设置元素的HTML内容。// li.remove() 删除li标签 }) });

Jquery练习题

PanHanJia的博客

09-17

649

1.使用jquery修改div元素的背景色(随意颜色) 第一个div已经点击，第二个未点击！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="JQuery/jquery-3.4.1...

【无标题】

weixin_48322694的博客

04-20

2538

jQuery 1.使用jquery修改div元素的背景色(随意颜色) <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-

jQuery

xiaoyu5632的博客

05-10

754

##jQuery基础