通过关系查找jQuery对象的方法:
- children([selector])
- contents()
- find(selector)
- parent([selector])
- parents([selector])
- parentsUntil([selector])
- closet(selector)
children()和contents()都是查找子元素,不查找孙子元素。
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">
Lorem ipsum dolor sit amet.
</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
console.log($("#box3").children())
console.log($("#box3").contents())
})
</script>
<script type="text/javascript">
$(function(){
console.log($("#box3").children("ul"))
console.log($("#box3").contents("ul"))
})
</script>
1.不带参数的children和contents。children的长度为2,只有其子元素。contents的长度为5,除了其子元素外还有文本。
2.带参数的话。他们一样。只有ul一个子元素。
find():在后代元素中过滤。包括子元素和孙子元素。
parent():返回元素的直接父元素,有且只有一个。
parents([selector]):多个父元素。一直获取到HTML。加选择器就查找到这个指定的选择器。
parentsUntils([selector]):直到查找到的selector。不包括selector。
closest(selector):从元素本身开始,逐层向上开始元素的匹配,并返回最先匹配的元素。要返回自身。
closest和parents的区别:
- closest从当前元素开始匹配。parents从父元素开始找。
- closest逐级向上查找,查找到要找的元素就停止查找。parents会一直找找到根元素再把其放到集合里,用选择器筛,所以会找到多个。
- closest只会返回0个或1个元素。parents会返回多个。
- next([selector])
- nextAll([selector])
- nextUntil([selector])不包括selector
- prev([selector])
- prevAll([selector])
- prevUntil([selector])
- siblings([selector])
next([selector]) nextAll([selector]) nextUntil([selector])找紧邻的同辈元素。跟上面parent的类似。
siblings([selector])取到所有同辈元素的集合。把这个元素的兄弟姐妹全部取出来。但是取出来的元素不包含它本身。
$('.item6').siblings('li');//不包含item6