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. 后代选择器(后代元素) 后代选择器通过空格分隔,能够选择所有指定祖先元素下的后代元素,包括直接子元素以及更深层次的元素。其语法如下: `...