跳到主要内容

简述jQuery中遍历节点的常用方法 ?

参考答案:

jQuery 提供了多种遍历 DOM 树和节点的方法。以下是一些常用的方法:

  1. parent():这个方法返回被选元素的直接父元素。
$(document).ready(function(){
  $("span").parent().css({"color": "red", "border": "2px solid red"});
});
  1. parents():这个方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素。
$(document).ready(function(){
  $("span").parents().css({"color": "red", "border": "2px solid red"});
});
  1. parentsUntil():这个方法返回被选元素的所有祖先元素,直到遇到匹配的选择器为止。
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
});
  1. children():这个方法返回被选元素的所有直接子元素。
$(document).ready(function(){
  $("div").children().css({"color": "red", "border": "2px solid red"});
});
  1. contents():这个方法返回被选元素的所有子节点,包括文本和注释节点。
$(document).ready(function(){
  $("div").contents().css({"color": "red", "border": "2px solid red"});
});
  1. siblings():这个方法返回被选元素的所有同胞元素。
$(document).ready(function(){
  $("h2").siblings().css({"color": "red", "border": "2px solid red"});
});
  1. next():这个方法返回被选元素的下一个同胞元素。
$(document).ready(function(){
  $("h2").next().css({"color": "red", "border": "2px solid red"});
});
  1. nextAll():这个方法返回被选元素之后的所有同胞元素。
$(document).ready(function(){
  $("h2").nextAll().css({"color": "red", "border": "2px solid red"});
});
  1. nextUntil():这个方法返回被选元素之后的所有同胞元素,直到遇到匹配的选择器为止。
$(document).ready(function(){
  $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
});
  1. prev()prevAll()prevUntil():这些方法与 next()nextAll()nextUntil() 类似,但是方向相反,它们分别返回被选元素的上一个同胞元素、之前的所有同胞元素、之前的所有同胞元素直到遇到匹配的选择器为止。

以上就是 jQuery 中常用的遍历节点的方法,可以根据实际需求灵活使用。