1.2：层次选择器：
说明：层次选择器通过DOM元素的层次关系获得元素，其主要的层次
关系包括后代、父子、相邻、兄弟关系，通过其中的关系可以快速定
位元素：
ancetor descendant 根据祖先元素匹配所有的后代元素，返回集合元素；
parent>child 根据付元素匹配所有的子元素，返回元素集合；
prev+next 匹配第一个的紧接在prev元素后的相邻元素，返回元素集合；
prev~siblings 匹配元素之后所有的兄弟元素，返回元素集合；
注意：其中prve+next 可以使用.next()替代，而prve~siblings可以使用nextAll()替代；
<%@ 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>
分享到：
相关推荐
选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景，熟悉并...
层次选择器专注于元素间的父子关系和兄弟关系，增强选择的精确度。 1. **直系子元素选择器**：`parent > child`，仅选取指定父元素的直接子元素，例如`$('div > span')`将选取所有直接位于`<div>`标签内的`<span>`...
层次选择器允许我们根据元素在文档结构中的位置来选取元素。主要有子元素选择器（>`），后代选择器（`>`），相邻兄弟选择器（+）和后续兄弟选择器（~）。 - `$("div > p")` 选择所有直接位于`<div>`内的`<p>`元素。...
其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择...
层次选择器基于DOM元素之间的层次关系选取特定元素，包括后代、子、相邻和兄弟元素。 - **后代选择器**：通过空格来选取后代元素，例如`$('div span')`选取所有`<div>`元素内的`<span>`元素。 - **子选择器**：通过...
3. **层次选择器** - `child`：`>` 选择子元素，如`$("ul > li")`。 - `descendant`：空格选择后代元素，如`$("div p")`。 - `adjacentSibling`：`+` 选择紧邻的同级元素，如`$("div + p")`。 - `generalSibling...
层次选择器允许我们根据元素之间的关系来选取元素。这些包括子选择器（`>`），后代选择器（` `），相邻兄弟选择器（`+`）和后续兄弟选择器（`~`）。例如，`$("div > p")`选取所有直接位于`<div>`元素内的`<p>`元素，...
层次选择器用于根据元素之间的关系进行选择，包括子选择器（`>`）、后代选择器（` `）、相邻兄弟选择器（`+`）和后续兄弟选择器（`~`）。例如： - `$("#parent > #child")` 选择ID为`parent`的元素内的直接子元素`...
- **层次选择器**：`>`（子元素选择器）、`+`（紧邻兄弟选择器）、`~`（后续兄弟选择器）和` `（后代选择器）。 - **属性选择器**：`[attr]`（具有指定属性的元素）、`[attr=value]`（属性值等于指定值的元素）、`...
层次选择器允许开发者基于元素之间的关系来选择元素，这包括兄弟元素、后代元素等。这些选择器可以帮助我们更精确地定位到页面中的特定元素。 **实例：** 1. **选择紧接在另一个元素后的兄弟元素（相邻兄弟）** -...
jQuery支持多种CSS选择器，包括基本选择器、层次选择器、属性选择器和类选择器等。这些选择器可以帮助我们更精确地定位到我们需要操作的DOM元素。 1. **基本选择器**： - `$("#id")`：通过ID选择元素，例如`$("#...
#### 层次选择器 - **子元素选择器**：`$("#main > *")`选取ID为`main`的元素的所有直接子元素。 - **相邻兄弟选择器**：`$("label + input")`选取紧接在`<label>`元素后的`<input>`元素。 - **一般兄弟选择器**：`...
《jQuery树形选择器代码详解》 在网页开发中，数据的展示方式多种多样，其中树形结构是一种常见的数据组织形式，尤其适用于层次关系复杂的场景。jQuery作为一个强大的JavaScript库，提供了丰富的选择器来操作DOM...
本文将详细介绍jQuery中的基本选择器和层次选择器的使用方法，为那些希望使用jQuery来增强网页功能的开发者提供参考。 首先，基本选择器是最为常用的，它包括ID选择器、类选择器、标签选择器以及通配符选择器。ID...
本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这是jQuery中最基础也最常见的选择器。它们主要包括： 1. **ID选择器 (#id)**: 通过指定的ID来选取页面上唯一的一个元素。ID在HTML中...
2. **层次选择器** - `祖先 后代`：匹配所有祖先元素的后代，如`$("div p")`会选择所有在`<div>`内的`<p>`元素。 - `父 > 子`：匹配所有父元素的直接子元素，如`$("ul > li")`选取`<ul>`下的直接`<li>`子元素。 -...
在jQuery中，选择器分为多种类型，包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**： - `#id`：通过ID选择器选取具有特定ID的元素...
层次选择器是jQuery的核心功能之一，它允许我们根据元素在HTML文档结构中的位置来选取元素。下面我们将详细讲解几种主要的层次选择器，并通过实例演示它们的用法。 1. **后代选择器（Descendant Selector）** - ...
接下来将详细介绍JQuery层次选择器的用法，并通过实例进一步阐释。 1. 后代选择器（后代元素） 后代选择器通过空格分隔，能够选择所有指定祖先元素下的后代元素，包括直接子元素以及更深层次的元素。其语法如下： `...