jQuery 遍历
向上遍历 DOM 树
- parent() parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
- parents() parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。也可以设定参数让它过滤对祖先元素的搜索
如：$(document).ready(function(){
$("span").parents("ul"); //这样它遍历的就是span的所有 ul 祖先元素
});
- parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
如：$(document).ready(function(){
$("span").parentsUntil("div"); //这样它遍历的就是在span到祖先div之间的所有元素（不包括div)
});
向下遍历 DOM 树
- children() children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。也可以使用可选参数来过滤对子元素的搜索。
例： $('.box1').children('ul.ula').css({ //可以通过传递参数来确定是哪一个子元素
'backgroundColor' : '#008700',
'border' : '1px solid #f00',
})
- find() 找到指定的所有后代元素，如果传递的参数是 * 号，则是指所有的后代元素。
$('.box1').find('span').css({ //找到指定的所有后代元素
'backgroundColor' : '#008700',
'border' : '1px solid #f00',
})
遍历 - 同胞
在 DOM 树进行水平遍历（遍历元素的同胞元素。）：
- siblings() siblings() 方法返回被选元素的所有同胞元素。也可以使用可选参数来过滤对同胞元素的搜索。
例： $('span').siblings('p').css({
'border' : '1px solid #f00',
'background' : '#008700',
});
- next() next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
例： $('p').next().css({
'display' : 'block',
'border' : '1px solid #f00',
'background' : '#008700',
});
- nextAll() nextAll() 方法返回被选元素的所有跟随的同胞元素。
例： //nextAll() 方法返回被选元素的所有跟随的同胞元素。
$('h2').nextAll().css({
'display' : 'block',
'border' : '1px solid #f00',
'background' : '#008700',
});
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
例： $('h2').nextUntil('span').css({
'display' : 'block',
'border' : '1px solid #f00',
'background' : '#008700',
});
- prev() 获取上一个同胞元素，该方法只返回一个元素,您也可以使用可选参数来过滤对同胞元素的搜索。
例: $('span').prev('h1').css({ //这里就是指定p元素的上一个兄弟元素,并且必须是h1元素
'border' : '1px solid #f00',
'background' : '#008700',
});
- prevAll() 获取被选元素的所有前面的同胞元素（兄元素）。您也可以使用可选参数来过滤对同胞元素的搜索。
例: $('span').prevAll('h1').css({ //这里就是指定p元素的所有为h1的兄元素
'border' : '1px solid #f00',
'background' : '#008700',
});
- prevUntil() 方法返回介于两个给定参数之间的所有（兄）同胞元素。不设置参数默认搜索到最前面一个
例： $('span').prevUntil('p').css({ //要注意这里是指定到p元素之间的，不包括p元素
'border' : '1px solid #f00',
'background' : '#008700',
});
遍历- 过滤
缩小搜索元素的范围
三个最基本的过滤方法（它们允许您基于其在一组元素中的位置来选择一个特定的元素。）：
1. first() first() 方法返回被选元素的首个元素。
例: $('#btn').click(function(){
$('div.box2 p').first().css({ //匹配首个带有p元素的div里面的p元素， 里面即使有多个p元素也是只返回首个p元素
'background' : '#000087',
})
})
2. last() last() 方法返回被选元素的最后一个元素。
例： $('div p').last().css({ //匹配最后一个带有p元素的div里面的p元素， 里面即使有多个p元素也是只返回最后一个p元素
'background' : '#000087',
})
3. eq() eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
例: $('ul li').eq(2).css({ //匹配首个带有li元素的ul里面的第3个li(因为从零开始，第一个为零)
'background' : '#000087',
})
其他过滤方法，比如允许您选取匹配或不匹配某项指定标准的元素。
filter() filter()方法允许您规定一个标准。返回匹配的元素。
例: $('p').filter('.abs').css({ //filter()方法允许您规定一个标准。返回匹配的元素。
'background' : '#000087',
})
not() not() 方法返回不匹配标准的所有元素。
例： $('p').not('.abs').css({ //这里的是的返回所有不带有.abs这个类的p元素
'background' : '#000087',
})