Web前端（四）jQuery (4) jQ层级选择器

最新推荐文章于 2024-01-14 11:54:30 发布
最新推荐文章于 2024-01-14 11:54:30 发布
阅读量196 收藏 1
点赞数
分类专栏： Web前端 Web前端 文章标签： javaweb JavaScript jQuery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39782583/article/details/84205042
版权

Date ： 2018/11/18

层级选择器，无图，结衣镇楼：
在这里插入图片描述

源代码：

<!-- 
1、body div  body元素的所有下级，儿子、孙子、重孙子。。。
2、body > div   body元素所有的儿子
3、#two+div     two元素的同桌(向下数第一个同级元素)
4、#one~div     one元素的兄弟(不包括自己)
 -->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script src="../../js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div").css("background-color","gold");
				});
				
				$("#btn2").click(function(){
					$("body > div").css("background-color","gold");
				});
				
				$("#btn3").click(function(){
					$("#two+div").css("background-color","gold");
				});
				
				$("#btn4").click(function(){
					$("#one ~div").css("background-color","gold");
				});
			});
			
		</script>
		
		
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="选择body中的所有的div元素"/>
		<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
		<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
		<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>
馬冬梅啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery基础入门之jq选择器
vcezzyo的博客
12-20 294
JQ选择器 1、id选择器 $('#box').css('backgroundColor','pink'); 2、类名选择器 $('.box').css('backgroundColor','pink') 3、通用选择器 选取所有元素 $('*').css('color','red') 4、标签选择器 选取页面中所有div标签 $('div').css('color','blue') 5、多标签选择器 选取页面中的div和p标签 $('div,p').css('color','red')
jQuery选择器之层级选择器
qq_33130209的博客
03-31 397
层级选择器： $("parent>child")子选择器：选择所有指定“parent”元素中指定的“”child”的直接子元素 $("ancestor descendant")后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能是该元素的一个孩子、孙子、曾孙等 $("prev+next")相邻兄弟选择器：选择所有紧接在“”prev”元素后的”next”元素 $("prev~si
jQuery选择器
m0_67901663的博客
04-13 6050
jQuery选择器
jquery的选择器（选择器的分类和作用）
weixin_67138897的博客
10-19 3732
基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。
jQuery中的层次选择器
weixin_43350001的博客
02-26 2521
jQuery中的层次选择器 常见的层次关系包括：父子、后代、兄弟、相邻。 $(“M N”) 等价于 $(M).find(N)；表示选择后代。 $(“M>N”) 等价于 $(M).children(N)；表示选择子代。 $(“M~N”) 等价于 $(M).nextAll(N)；表示在兄弟之中选择后面所有兄弟。 $(“M+N”) 等价于 $(M).next(N)；表示在兄弟之中只选择后面那个兄弟。 HTML文件代码： <!DOCTYPE html> <html lang="en"
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
最新发布
Jin_Xiang123的博客
01-14 3746
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
JQuery中层级选择器
you4580的专栏
03-21 199
语法： $(“A > B”) 选择A元素内部的所有B子元素。语法： $("A B ") 选择A元素内部的所有B元素。
jquery选择器之层级过滤选择器详解
12-11
代码如下:$(“ancestor descendant”)：选取parent元素后所有的child元素$(...注:siblings是过滤器后两个用的比较少，一般会有其他选择器替代 代码如下:$(“prev + next”)等价于next()$(“prev ~ siblings”)等价
jquery层级选择器的实现(匹配后代元素div)
11-23
在jQuery中，层级选择器是用于选取文档结构中具有特定关系的元素。这些选择器使得开发者能够更加精确地定位到需要操作的DOM元素。在给定的标题和描述中，我们关注的是匹配后代元素的jQuery选择器。我们将深入探讨这...
基于jQuery的三层级联选择器
06-01
在本文中，我们将深入探讨如何实现一个基于jQuery的三层级联选择器，这种选择器通常用于网站中的下拉菜单或导航系统，以提供用户友好且交互性强的界面体验。我们将关注涉及的技术点，包括HTML结构、CSS样式以及...
jQuery大于号()选择器的作用解释
12-10
理解大于号（>`）选择器的重要性在于，它可以让你精确地定位到特定层级的子元素，避免了因选择过多不相关的后代元素而导致的副作用。这对于复杂的DOM结构和精确控制元素样式或行为来说，尤其有用。 总结一下，...
jQuery多级联动选择器
06-01
jQuery多级联动选择器是一种常见的前端交互功能，用于在网页上实现级联下拉菜单的效果。这种技术在网站设计中非常实用，特别是在处理地区选择、类别分类或者层级结构数据时。用户选择一个选项后，会根据所选内容动态...
Jquery 中的 选择器
qq_40662239的博客
04-28 155
选择器作用： 让我们能够更加精确找到我们要操作的元素 *****《一》基本选择器 - ID选择器 : #ID的名称 - 类选择器: 以 . 开头 .类名 - 元素选择器: 标签的名称 - 通配符选择器: * - 选择器,选择器: 选择器1,选择器2 ##### 基本选择器的案例 -----------javascript---------- ...
jQuery前端开发学习指南(07)——jQuery层级选择器
谷哥的小弟
03-22 510
层级选择器是根据元素的关系(例如：父子关系，兄弟关系)来获取其它元素。
JQuery层级选择器
荣耀之路
11-28 1924
JQuery层级选择器
jquery实现 级联选择器
weixin_42698255的博客
04-10 4483
看到UI在做设计图 有级联选择器 就先写写 （项目还在用jquery~~~~~~） 先上效果图 css .box{ position: relative; width: 800px; height: 800px; background: #2A363E; } .input{ font-size: 20px; ...
jQuery –子级和同级选择器示例
一名可爱的技术搬运工
05-21 1206
jQuery子级和同级选择器可以分为四个选择器：后代选择器（AB），子级选择器（A> B），相邻的同级选择器（A + B）和常规的同级选择器（A〜B）。 让我们通过一个例子来了解两者之间的区别。 首先，您必须了解什么是孩子和兄弟姐妹。 让我们看这个例子， <h1>Child and Sibling Selectors example</h1> <div...
jq级联选择，省市选择
fairyier
04-20 1190
一个简单的级联选择省、市：HTML：&lt;div class="wrap"&gt; &lt;select id="province"&gt;&lt;option value="0"&gt;选择省份&lt;/option&gt;&lt;/select&gt; &lt;select id="city"&gt;&l
Web前端学习笔记
PizAn的博客
12-15 1929
HTML Web前端（一）HTML css Web前端（二）HTMLHTML&amp;amp;amp;css（上）table+form 创建表单 Web前端（二）HTML&amp;amp;amp;css（下）css选择器和引入方式、css重构网站首页 JavaScript Web前端（三）JavaScript (1) 表单校验：弹出显示 Web前端（三）JavaScript (2) 轮播图片+弹出广告 Web前端（三）JavaS...
前端学习笔记：jQuery选择器详解
了解并熟练运用jQuery的选择器，对于前端开发者来说，不仅可以快速定位和操作DOM元素，还可以为创建动态、交互丰富的Web页面提供强大的支持。随着jQuery库的广泛使用，熟悉其选择器系统已经成为现代前端开发者必备的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值