今天说的是层次选择器，那层次选择器有哪几个？
$("ancestor descendant")：选取parent元素后所有的child元素
$("parent > child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了
$("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素
$("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器
这里要说下，由于最后2个用的比较少，一般会用其他选择器替代，请看下面：
$("prev + next")等价于next()
$("prev ~ siblings")等价于nextAll()
具体用法会在后面说到。
===========================================================================
下面我们来仔细说说这4个层次选择器
【1】$("ancestor descendant")：选取parent元素后所有的child元素
ancestor的中文意思是“祖先”，descendant的中文意思是“后代”，就像css定义层级元素方式一样,只需要不同的元素之间有空格表示，前者父级，后者子级，以此类推，同时我们把它写成这样的形式，$("Element1 Element2 Element3 Element...")。
下面是实例：
$("body div") 选取body元素下所有的div元素。
$("ul li") 选取ul元素下所有的li元素。
$("#test div") 选取id为“test”的元素所包含的所有的div子元素
$("div#test div") 选取id为“test”的div所包含的所有的div子元素
$(".test div") 选取class为“test”的元素所包含的所有的div子元素
$("div.test span") 选取class为“test”的div所包含的所有的span子元素
$("span.test .demo") 选取class为“test”的span所包含的所有的class为demo的元素
$(".test .demo") 选取class为“test”的元素所包含的所有的class为demo的元素
【2】$("parent > child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了
$("body > div") 选取body元素下所有的第一级div元素。
$("ul > li") 选取ul元素下所有的第一级li元素。
$("#test > div") 选取id为“test”的元素所包含的所有的第一级div子元素
$("div#test > div") 选取id为“test”的div所包含的所有的第一级div子元素
$(".test > div") 选取class为“test”的元素所包含的所有的第一级div子元素
$("div.test > span") 选取class为“test”的div所包含的所有的第一级span子元素
$("span.test > .demo") 选取class为“test”的span所包含的所有的第一级class为demo的元素
$(".test > .demo") 选取class为“test”的元素所包含的所有的第一级class为demo的元素
【3】$("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素.
（1）$("div + p")表示选择紧跟在 div 元素后的 p 一个元素
（2）$("#demo+img")选择id为demo元素后面的img对象.如果id为demo元素后面没有同级的img对象，那么这个$("#demo+img").length=0
【4】$("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器。
（1）$("div ~ p")表示匹配跟在 div 元素后的所有 p 元素
（2）$("#demo~[title]")选择id为demo的元素后面所有带有title属性的元素，同样如果id为demo的元素后面没有一个带有title属性的元素，那么$("#demo~[title]").length = 0
===========================================================================
这里说的是最后2个选择器的等价关系
$(".one + div")等价于$(".one").next("div")
$("#prev ~ div")等价于$(".prev").nextAll("div")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实例</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bt1").click(function(){
$("div > p").text("我们都是div中的儿子，我们的名字叫做p还记得教程中的$(\"父亲 > 儿子 > ...\")这种关系吗？就是以这种方式选择的我$(\"div > p\")");
})
$("#bt2").click(function(){
$("div + p").text("我是紧跟着div的p既然紧跟着，当然就得使用“+”紧密的连在一起嘛。以这种方式选择的我$(\"div + p\")");
})
$("#bt3").click(function(){
$("div ~ p").text("我们是div的跟随者，我们的名字叫做p要以这种方式选择的我$(\"div ~ p\")");
})
})
</script>
</head>
<body>
<input id="bt1" type="button" value="获取div下所有的p标签"/>
<input id="bt2" type="button" value="匹配紧跟在 div 元素后的 p 一个元素"/>
<input id="bt3" type="button" value="匹配跟在 div 元素后的所有 p 元素"/>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</body>
</html>
分享到：
相关推荐
选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景，熟悉并...
层次选择器允许我们根据元素在文档结构中的位置来选取元素。主要有子元素选择器（>`），后代选择器（`>`），相邻兄弟选择器（+）和后续兄弟选择器（~）。 - `$("div > p")` 选择所有直接位于`<div>`内的`<p>`元素。...
层次选择器用于根据元素之间的关系进行选择，包括子选择器（`>`）、后代选择器（` `）、相邻兄弟选择器（`+`）和后续兄弟选择器（`~`）。例如： - `$("#parent > #child")` 选择ID为`parent`的元素内的直接子元素`...
层次选择器专注于元素间的父子关系和兄弟关系，增强选择的精确度。 1. **直系子元素选择器**：`parent > child`，仅选取指定父元素的直接子元素，例如`$('div > span')`将选取所有直接位于`<div>`标签内的`<span>`...
3. **层次选择器** - `child`：`>` 选择子元素，如`$("ul > li")`。 - `descendant`：空格选择后代元素，如`$("div p")`。 - `adjacentSibling`：`+` 选择紧邻的同级元素，如`$("div + p")`。 - `generalSibling...
层次选择器基于DOM元素之间的层次关系选取特定元素，包括后代、子、相邻和兄弟元素。 - **后代选择器**：通过空格来选取后代元素，例如`$('div span')`选取所有`<div>`元素内的`<span>`元素。 - **子选择器**：通过...
其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择...
层次选择器允许我们根据元素之间的关系来选取元素。这些包括子选择器（`>`），后代选择器（` `），相邻兄弟选择器（`+`）和后续兄弟选择器（`~`）。例如，`$("div > p")`选取所有直接位于`<div>`元素内的`<p>`元素，...
#### 层次选择器 - **子元素选择器**：`$("#main > *")`选取ID为`main`的元素的所有直接子元素。 - **相邻兄弟选择器**：`$("label + input")`选取紧接在`<label>`元素后的`<input>`元素。 - **一般兄弟选择器**：`...
层次选择器允许开发者基于元素之间的关系来选择元素，这包括兄弟元素、后代元素等。这些选择器可以帮助我们更精确地定位到页面中的特定元素。 **实例：** 1. **选择紧接在另一个元素后的兄弟元素（相邻兄弟）** -...
2. 层次选择器：如`$("p div")`选择所有`<p>`元素内部的`<div>`元素。 3. 过滤选择器：包括简单过滤、内容过滤、可见性过滤、属性过滤、子元素过滤等，如`$("p:first")`（第一个`<p>`元素）、`$("tr:even")`（偶数行...
2. **层次选择器**： - **后代选择器**：`$('parent > child')` 选取 `parent` 元素的所有直接子元素 `child`。 - **子元素选择器**：`$('parent > .child')` 选取 `parent` 下所有类名为 `.child` 的子元素。 - ...
jQuery支持多种CSS选择器，包括基本选择器、层次选择器、属性选择器和类选择器等。这些选择器可以帮助我们更精确地定位到我们需要操作的DOM元素。 1. **基本选择器**： - `$("#id")`：通过ID选择元素，例如`$("#...
层次选择器则允许更复杂的元素选取： 1. **祖先和子孙选择器**: `jQuery("ancestor descendant")`，例如`jQuery("div p")`会选择所有`<div>`内的`<p>`元素。 2. **父子节点选择器**: `jQuery("parent > child")`，...
本文将详细介绍jQuery中的基本选择器和层次选择器的使用方法，为那些希望使用jQuery来增强网页功能的开发者提供参考。 首先，基本选择器是最为常用的，它包括ID选择器、类选择器、标签选择器以及通配符选择器。ID...
- **层次选择器**：`>`（子元素选择器）、`+`（紧邻兄弟选择器）、`~`（后续兄弟选择器）和` `（后代选择器）。 - **属性选择器**：`[attr]`（具有指定属性的元素）、`[attr=value]`（属性值等于指定值的元素）、`...
这些选择器可以分成多个类别，包括基本选择器、层次选择器、过滤选择器等，下面将详细介绍。 基本选择器包括id选择器、class选择器、element选择器和通配符选择器。id选择器通过元素的id属性来选取特定元素，例如`$...
2. **层次选择器** - `祖先 后代`：匹配所有祖先元素的后代，如`$("div p")`会选择所有在`<div>`内的`<p>`元素。 - `父 > 子`：匹配所有父元素的直接子元素，如`$("ul > li")`选取`<ul>`下的直接`<li>`子元素。 -...
jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈元素列表 4、...