自下而上(获取父节点)
通过jQuery对象可以向上遍历DOM树
- parent()返回被选元素的直接父元素。该方法只会向上一级对DOM 树进行遍历。返回要给jQuery对象
- parents([type])
-
- 返回被选元素的祖先元素
- 可传入字符串过滤类型，返回被选元素中为该类型的祖先元素
- parentsUntil("type") 返回介于两个给定元素之间的所有祖先元素
<body>
<div id="myDiv2">myDiv.parents
<div>myDiv.parent
<div id="myDiv">myDiv</div>
</div>
</div>
<button id="btn">返回myDiv元素</button>
<button id="btn2">返回myDiv元素父节点</button>
<button id="btn3">返回myDiv元素祖先节点</button>
<button id="btn4">返回myDiv元素div祖先节点</button>
<button id="btn5">返回myDiv与myDiv2元素中间的节点</button>
</body>
<script type="text/javascript">
$(
function(){
$("#btn").click(function(){
console.log($("#myDiv").text())
})
$("#btn2").click(function(){
console.log($("#myDiv").parent().text())
})
$("#btn3").click(function(){
console.log($("#myDiv").parents().text())//返回html节点内容
})
$("#btn4").click(function(){
console.log($("#myDiv").parents("div").text())//返回html节点内容
})
$("#btn5").click(function(){
console.log($("#myDiv").parentsUntil("#myDiv2").text())//
})
}
)
</script>自上而下（获取子/后代节点）
- children() 返回被选元素的所有直接子元素
-
- 可传入字符串过滤类型，返回被选元素中为该类型的子元素
- find() 返回被选元素的后代元素，一路线下直到最后一个后代
-
- 可传入字符串过滤类型，返回被选元素中为该类型的后代元素
<body>
<div id="myDiv">myDiv.parents
<div>myDiv.parent
<div>myDiv</div>
</div>
</div>
<button id="btn">返回myDiv元素的子元素</button>
<button id="btn2">返回myDiv元素的后代元素</button>
</body>
<script type="text/javascript">
$(
function(){
$("#btn").click(function(){
console.log($("#myDiv").children().text())
})
$("#btn2").click(function(){
console.log($("#myDiv").find("div").text())
})
}
)
</script>水平遍历
- siblings() 上一个
- next() 下一个
- nextAll() 后面所有的
- nextUntil() 区间的
- 均可传入参数过滤标签类型 eg: "div" "span"
节点的过滤
- first()
-
- 返回被选元素的首个元素
- last()
-
- 返回被选元素的最后一个元素
- eq()
-
- 返回被选元素中带有指定索引的元素
- filter（）
-
- 自定义标准
- not()
-
- 自定义标准取反
