作者：男孩形式恋人 | 来源：互联网 | 2023-09-13 12:50
jQuery 是众多 Javascript 库之一。它旨在简化客户端的脚本编写。jQuery 最容易识别的特性是它的美元符号($)语法。使用它，您可以轻松地操纵
jQuery 是众多 Javascript 库之一。它旨在简化客户端的脚本编写。jQuery 最容易识别的特性是它的美元符号($
)语法。使用它，您可以轻松地操纵元素、创建动画和处理输入事件。
使用 jQuery 选择元素的父元素
每个 HTML 标签都默认继承（inherits）
其父标签（parent element）
的 CSS 属性。
例如，h3
标签jQuery Playground
的父标签是，
的父标签是
body。
jQuery 有一个parent()
方法，可以访问被选取标签的父标签。
下面的代码展示了使用parent()
方法把left-well
标签的父标签背景色设置成蓝色（blue）
的方式：
$("#left-well").parent().css("background-color", "blue")
我们在上篇文章代码的基础上进行练习，把#target1
标签的父标签背景色设置成红色（red）
。
调整后的完整代码如下 所示：
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red")
});
script>
<body>
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playgroundh3>
<div class="row">
<div class="col-xs-6">
<h4>#left-wellh4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1button>
<button class="btn btn-default target" id="target2">#target2button>
<button class="btn btn-default target" id="target3">#target3button>
div>
div>
<div class="col-xs-6">
<h4>#right-wellh4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4button>
<button class="btn btn-default target" id="target5">#target5button>
<button class="btn btn-default target" id="target6">#target6button>
div>
div>
div>
div>
body>
运行效果图如下所示 ：
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。练习网站已经正式上线，大家可以登陆网站 http://www.icoderoad.com 进行文章中示例的练习。
推荐阅读
-
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
-
本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议，它允许在服务器端通过Script tags返回至客户端，并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法，它是一种面向数据结构的分析和设计方法，以活动为中心，将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码，使用了jQuery的ajax方法请求一个Jsonp数据。 ...
[详细]
蜡笔小新 2023-12-10 10:55:21
-
-
最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
-
本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ...
[详细]
蜡笔小新 2023-12-12 18:01:10
-
Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
[详细]
蜡笔小新 2023-12-12 15:59:36
-
本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
-
JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ...
[详细]
蜡笔小新 2023-12-11 11:40:52
-
本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
-
本文介绍了如何使用JS实现一键分享功能，并提供了2019独角兽企业招聘Python工程师的标准。同时，给出了分享到QQ空间、新浪微博和人人网的链接。 ...
[详细]
蜡笔小新 2023-12-10 19:55:57
-
这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ...
[详细]
蜡笔小新 2023-12-14 16:19:10
-
本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ...
[详细]
蜡笔小新 2023-12-14 15:52:03
-
目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ...
[详细]
蜡笔小新 2023-12-14 15:03:14
-
本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
-
本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ...
[详细]
蜡笔小新 2023-12-14 13:56:20
-
本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 12:01:13
-
京公网安备 11010802041100号