jQuery 之层次选择器

最新推荐文章于 2023-10-12 10:13:06 发布

zjsunzone

最新推荐文章于 2023-10-12 10:13:06 发布

阅读量106

点赞数

分类专栏： jQuery 文章标签： jquery 层次选择器 java ViewUI

本文链接：https://blog.csdn.net/zjsunzone/article/details/84499038

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[size=small][color=olive][b]1.2：层次选择器：
说明：层次选择器通过DOM元素的层次关系获得元素，其主要的层次
关系包括后代、父子、相邻、兄弟关系，通过其中的关系可以快速定
位元素：
ancetor descendant 根据祖先元素匹配所有的后代元素，返回集合元素；
parent>child 根据付元素匹配所有的子元素，返回元素集合；
prev+next 匹配第一个的紧接在prev元素后的相邻元素，返回元素集合；
prev~siblings 匹配元素之后所有的兄弟元素，返回元素集合；

注意：其中prve+next 可以使用.next()替代，而prve~siblings可以使用nextAll()替代；[/b][/color][/size]

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
			<head>

			<style type="text/css">
			*{
				text-align: center;
			}
				.y{
					font-size: 14px;
					background-color: purple;
				}
			</style>
				<!-- ************************** 导入 *********************************** -->
				<script type="text/javascript" src="js/jquery-1.8.3.js">
		</script>
				<!-- ************************************************************* -->


				<script type="text/javascript">

		//程序入口
		$(document).ready(function() {
			test();
		});

		//提示:JQuery中的调用关系和java中方法调用类似
		function test(){
			//$("#xx").css("background","yellow");	//匹配id=xx 后代所有元素
			//$("#xx #xx2").css("background","red");	//匹配id==xx 后代 id==xx2的所有元素，包含关系
			//$("#xx p").addClass("y");				//匹配id=xx 后代所有的<p>元素，包含关系
			//$("#xx,#yy").addClass("y");				//匹配id=xx id=yy 后代所有元素
			//$("#xx>#xx2").addClass("y");			//匹配id=xx 后代id=xx2的所有元素
			//$("#xx>p").addClass("y");				//匹配当前ID 下的所有p元素
			//$("#xx+div").addClass("y");				//匹配id=xx 紧相邻的div元素，注意：是紧挨着的
			//$("#xx").next().addClass("y");			//匹配当前id元素的下一元素
			//$("#xx+div").next().addClass("y");		//匹配id=xx 紧挨着的div紧挨着的div; (紧挨着)  加号后面指定紧挨着的元素类型
			//$("#xx+div").nextAll().addClass("y");		//匹配id=xx 紧挨着的为div，以及该div后的所有元素
			//$("#xx").next().next().nextAll().addClass("y");
			//$("#xx").nextAll().addClass("y");			//匹配id=xx 之后的所有元素，并列的；
			//$("#xx~div").addClass("y");				//匹配当前ID 后面的所有div
			//$("#xx~").addClass("y");					//匹配当前ID后的所有元素
			//$("#xx1").parent().next().addClass("y");	//匹配当前id的父元素的下一元素
		}
		</script>
			</head>
			<body>
				<h3>层次选择器测试</h3>
				<div id="xx">
					<div id="xx1">xx的子元素xx1</div>
					<div id="xx2">xx的子元素xx2</div>
					<div id="xx3">xx的子元素xx3</div>	
					<p>我是p元素</p>		
				</div>	
				<p>我是p元素</p>	
				<div id="yy">
					<div id="yy1">yy的子元素yy1</div>
					<div id="yy2">yy的子元素yy2</div>
				</div>
				<div id="bb">我的ID 为 ：bb</div>
				<p>插一脚</p>
				<div id="aa">我的ID 为 ：aa</div>

			</body>
		</html>

zjsunzone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 之层次选择器

[size=small][color=olive][b]1.2：层次选择器：说明：层次选择器通过DOM元素的层次关系获得元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中的关系可以快速定位元素： ancetor descendant 根据祖先元素匹配所有的后代元素，返回集合元素； parent>child 根据付元素匹配所有的子元素，返回元素集合...
复制链接

扫一扫

专栏目录