在jQuery中,有许多用于遍历DOM(Document Object Model)节点的方法。以下是一些常见的jQuery遍历方法及其详细代码示例:
1、**.parent()**:获取每个元素的父元素。
$(document).ready(function() {
$("p").parent().css({"border": "2px solid red"});
});
2、**.parents()**:获取元素的所有祖先元素,直到(但不包括)DOM树的顶部。
$(document).ready(function() {
$("p").parents().css({"border": "2px solid red"});
});
3、**.parentsUntil()**:获取元素的所有祖先元素,直到遇到匹配的选择器为止。
$(document).ready(function() {
$("p").parentsUntil("div").css({"border": "2px solid red"});
});
4、**.children()**:获取每个元素的直接子元素。
$(document).ready(function() {
$("div").children().css({"border": "2px solid red"});
});
5、**.siblings()**:获取每个元素的所有同胞元素。
$(document).ready(function() {
$("h2").siblings().css({"border": "2px solid red"});
});
6、**.next()**:获取每个元素的下一个同胞元素。
$(document).ready(function() {
$("p").next().css({"border": "2px solid red"});
});
7、**.nextAll()**:获取元素之后的所有同胞元素。
$(document).ready(function() {
$("p").nextAll().css({"border": "2px solid red"});
});
8、**.nextUntil()**:获取元素之后的所有同胞元素,直到遇到匹配的选择器为止。
$(document).ready(function() {
$("p").nextUntil("div").css({"border": "2px solid red"});
});
9、**.prev()**:获取每个元素的上一个同胞元素。
$(document).ready(function() {
$("p").prev().css({"border": "2px solid red"});
});
10、**.prevAll()**:获取元素之前的所有同胞元素。
$(document).ready(function() {
$("p").prevAll().css({"border": "2px solid red"});
});
11、**.prevUntil()**:获取元素之前的所有同胞元素,直到遇到匹配的选择器为止。
$(document).ready(function() {
$("p").prevUntil("div").css({"border": "2px solid red"});
});
12、**.find()**:获取元素的后代元素,根据提供的选择器进行过滤。
$(document).ready(function() {
$("div").find("p").css({"border": "2px solid red"});
});
13、**.closest()**:获取最近的匹配元素,从当前元素开始,沿着DOM树向上遍历。
$(document).ready(function() {
$("p").closest("div").css({"border": "2px solid red"});
});
这些只是jQuery中用于遍历DOM节点的一些常见方法。jQuery还提供了其他一些方法,如 .end()
,.filter()
,.first()
,.last()
,.eq()
等,用于更复杂的遍历和筛选操作。