简述jQuery中遍历节点的常用方法 ?
参考答案:
jQuery 提供了多种遍历 DOM 树和节点的方法。以下是一些常用的方法:
- parent():这个方法返回被选元素的直接父元素。
$(document).ready(function(){
$("span").parent().css({"color": "red", "border": "2px solid red"});
});
- parents():这个方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素。
$(document).ready(function(){
$("span").parents().css({"color": "red", "border": "2px solid red"});
});
- parentsUntil():这个方法返回被选元素的所有祖先元素,直到遇到匹配的选择器为止。
$(document).ready(function(){
$("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
});
- children():这个方法返回被选元素的所有直接子元素。
$(document).ready(function(){
$("div").children().css({"color": "red", "border": "2px solid red"});
});
- contents():这个方法返回被选元素的所有子节点,包括文本和注释节点。
$(document).ready(function(){
$("div").contents().css({"color": "red", "border": "2px solid red"});
});
- siblings():这个方法返回被选元素的所有同胞元素。
$(document).ready(function(){
$("h2").siblings().css({"color": "red", "border": "2px solid red"});
});
- next():这个方法返回被选元素的下一个同胞元素。
$(document).ready(function(){
$("h2").next().css({"color": "red", "border": "2px solid red"});
});
- nextAll():这个方法返回被选元素之后的所有同胞元素。
$(document).ready(function(){
$("h2").nextAll().css({"color": "red", "border": "2px solid red"});
});
- nextUntil():这个方法返回被选元素之后的所有同胞元素,直到遇到匹配的选择器为止。
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
});
- prev()、prevAll()、prevUntil():这些方法与
next()
、nextAll()
、nextUntil()
类似,但是方向相反,它们分别返回被选元素的上一个同胞元素、之前的所有同胞元素、之前的所有同胞元素直到遇到匹配的选择器为止。
以上就是 jQuery 中常用的遍历节点的方法,可以根据实际需求灵活使用。