如下图,显示了HTML中的结构树,通过 JQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
遍历 - 父级(祖先)
向上遍历DOM数。- parent()
- parents()
- parentsUntil()
1.JQuery parent()
parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。
函数,可获取当前元素的直接父级元素
var elem = $('span').parent();
console.log(elem);
});
2.JQuery parents()
parents() 方法返回被选元素的所有父元素。
函数,可获取当前元素的所有父级元素
var elem = $('span').parents();
console.log(elem);
});
3.JQuery parentsUntil()
parentsUntil() 方法返回介于两个给定元素之间的所有父级元素
获取span在body标签下的所有父级元素
var elem = $('span').parentsUntil('body');
console.log(elem);
});
遍历 - 子级(后代)
向下遍历DOM树。向下遍历可以使用如下两个函数:
1.children() 2.find()
1.JQuery children()
children() 方法返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。
获取section标签下的所有直接子元素
var elem = $('section').children();
console.log(elem);
});
2.JQuery find()
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
获取section标签下的所有p标签的子元素
var elem = $('section').find('p');
console.log(elem);
// 获取section标签下的所有子元素
var elems = $('section').find('*');
console.log(elems);
});
遍历 - 同级(兄弟)
有以下几个方法:
1.sibings()
除自身外,遍历同级的所有元素,修改适用于同级所有元素2.next()
除自身外,仅下一个元素修改3.nextAll()
除自身外,修改下面的所有元素4.nextUntil()
除自身外,对下面的元素进行区间修改5.prev()
修改上一个元素6.preAll()
修改位于元素之上的所有元素7.preUntil()
对位于区间之上的元素进行区间修改
.bd *{
margin:5px;
padding:3px;
border:3px solid black;
}