JQuery学习04篇(层次选择器)

直接po图和代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习04篇(层次选择器)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
div span{background: #F79F81;
}
</style>
</head>
<body style="background-color: #CCE8CF;"><h3 style="color: red;">JQuery学习04篇(层次选择器)</h3><p><input type="text" /> <span>江西省</span><span>赣州市</span></p><p><input type="text" /><span>于都县</span><span>家乡特产赣南脐橙</span></p><p><input type="text" /><span>柿子饼</span><span>番薯干</span></p><div><span>我老家在江西省赣州市于都县</span><span>脐橙糕</span><span>酸枣糕</span><span>高山青草奶</span><p><span>擂茶</span><span>珍珠粉</span></p></div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//JQuery层次选择器跟css样式写法很类似
//div下的span
$("div span").css("background", "#BCA9F5");
$("div span").css("font-size", "24px");/*
参考网页https://blog.csdn.net/czh500/article/details/102945911
https://blog.csdn.net/czh500/article/details/102945962
https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
https://www.csdn.net/gather_29/OtDaggysMTkwLWJsb2cO0O0O.html
*///紧挨着input元素的第1个(兄弟/同级)span  (即选取input后面的第1个的span兄弟节点)
$("input + span").css("background", "#FA5882"); //相邻兄弟选择器//紧挨着input元素的所有(兄弟/同级)span  (即选取input后面的所有的span兄弟节点)
$("input ~ span").css("background", "#D358F7"); //一般相邻选择器/一般兄弟选择器//子选择器
//选择所有div元素里面的子元素span(直接子元素)
$('div > span').css("background", "#F78181");//后代选择器
//选择所有div元素里面的span元素(后代可以是儿子，孙子，曾孙等等)
$('div span').css("background", "#DC143C");</script>
</html>

JQuery学习04篇(层次选择器)相关推荐

CSS学习04之层次选择器
回顾什么是选择器在 CSS 中,选择器是选取需设置样式的元素的模式. 选择器的作用 CSS 选择器用于"查找"(或选取)要设置样式的 HTML 元素. 方便我们对元素添加样式. ...
JQuery学习22篇(事件委托)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jQuery学习之旅 Item1 选择器【一】
点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称说明举例 #id 根据元素Id选择 $("divId") 选择I ...
jQuery 学习-样式篇（三）：jQuery 选择器类型详解
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
JQuery学习四（过滤选择器）
:first选择第一个元素.$("div:first")进行选择第一个<div> :last 选择最后一个最后一个元素 $("div:last")选 ...
jQuery 学习-DOM篇（四）：jQuery 删除 DOM 元素的方法
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
jQuery 学习-DOM篇（一）：jQuery 创建元素并添加属性
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
jQuery 学习-样式篇（九）：jQuery 存储和删除元素私有数据的方法
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...

JQuery学习04篇(层次选择器)

JQuery学习04篇(层次选择器)相关推荐

最新文章

热门文章