开发者学堂课程【jQuery 开发教程：jQuery 遍历_树遍历4】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4306
jQuery 遍历_树遍历4
目录
一、 具体内容
二、 演示
三、复习
一、具体内容
1、.prev ()：
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。它的参数是可选的，如果有参数，它为一个选择器，如果没有参数，它则是选择默认的前一个同辈元素。
2、.prevAll():
获得集合中每个匹配元素的所有前面的兄弟元素，选择性筛选的选择器。
3、.prevUntil()：
获取每个元素但不包括选择器， DOM 节点，或者 jQuery 对象匹配的元素的所有前面的兄弟元素。
4、.siblings()：
获得匹配元素集合中每个元素的兄弟元素，可以提供一个可选的选择器。它的参数是一个选择器，可写可不写。
二、演示
1、.prev ()方法范例
<script src>="jquery-2.2.1.min.js"></script> <style> 赋予 div 样式 Div{ width：40px; height:40px; margin-left：10px; float:left; border：1pxsolidblue; } Button{ margin-left:10px }; </style> </head> <body> <div></div> <div></div> <div id="start"></div> <button>go to prev</button> <script> $(function() {
找到 id 为 start 的 div ，通过它开始点击 button 按钮，不断地向上查找 div 并依次给赋予div 样式。声明一个变量：
var start=$("#start");
赋予开始的这个 start 样式，背景颜色为粉色的效果。
start.css("background-color","#f99");
每次点击按钮，粉色的效果依次为前面的 div 进行添加，首先给按钮设置点击事件。
$("button").click(function() {
第一步将 start 的前一个同辈元素不断地复制给 start
start=start.prev();
把 div 的背景颜色初始化，不给背景颜色赋值即可。
$("div").css("background-color","");
start.css("background-color","#f99");
演示效果：
2、.prevAll()方法范例
<ul> <div>d1</div> <li> li 1</li <li class=”selected> </ul> <script> $(function() {
选择类名为 selected 的 li 标签的所有的前面的兄弟元素。此时不赋予 prevAll 参数。
console.log($(".selected").prevAll());
返回的是一个 li 标签加一个 div 标签。
如果赋予参数console.log($(".selected").prevAll(“div”));只返回 div 没有 li 标签。
3、.prevUntil()方法范例
<dl> <dt id="term-1>d1</dt> <dd>1a</dd> <dd>1b</dd> <dt id="term-2">d2</dt> <dd>2a</dd> <dd>2b</dd> <dt id="term-3">d3 <dd>3a</dd> <dd>3b</dd> </dl> <script> $(function() { $("#term-2").prevUntil("dt").css("backgroundcolor","red");
从 term2 开始向上匹配直到遇到 dt 为止，筛选出前面的所有的兄弟元素。这里只有一个参数，表示遇到 dt 停止匹配。演示效果如下图：
var term1=$("#term-1"); $("#term-3").prevUntil(term1,"dd").css("color","green");
这里有两个参数，表示从 term-3 开始向上匹配，一直到 term-1 为止，筛选出所有类型为 dd 的兄弟元素。第一个参数表示要停止匹配的位置，为 term1，第二个参数是筛选条件，为 dd
效果：只有类型为 dd 的标签才会被改变字体颜色。
4、.siblings()方法范例
<div>d1</div> <p class="selected">p1</p> <span class="selected">s1</span> <ul> <li>li 1</li> <li>li 1</li> <li>li 1</li> <li>li l</li> <li>li 1</li> </ul> <script> $(function() {
查找每个含有 selected 样式的 div 的所有的兄弟元素
$("div").siblings(".selected").css("color","red");
演示效果只有 p1 和 s1 被添加上了字体颜色。
如果删掉筛选条件 selected 则 div 的所有的兄弟元素都会被添加字体颜色。
三、 复习
Children 获得直接子元素，closest 获得最先匹配的祖先元素，find 获得每个元素的后代，next 获得每一个元素紧邻的后面同辈元素的元素集合，nextAll 获得所有的同辈元素，nextuntill 是从哪到哪的一个兄弟元素，parent 获得直接父元素，parents 获得所有的祖先元素，offsetParent 获得含有定位信息的祖先元素，parentsuntil 获得从哪到哪的前缀元素，prev 获得每个元素紧邻的前一个同辈元素集合，prevAll 获得所有的前面的同辈元素，prevUntil 获得从哪里到哪里的所有的前面的同类元素，siblings 获得每个元素的兄弟元素。
