JQuery入门到实践（四）

JQuery遍历

• 向下遍历

$(document).ready(function(){$(\"#div1\").children(\"#div2\").css({border:\"3px solid #FF0000\"}); //只适用于儿子类，向下遍历一级$(\"#div1\").find(\"#div2\").css({border:\"3px solid #FF0000\"});  //适用于下层所有类，向下遍历任一级});

• 向上遍历

$(document).ready(function(){$(\"#div2\").parent(\"#div1\").css({border:\"3px solid #FF0000\"}); //向上遍历一级$(\"#div3\").parents(\"#div1\").css({border:\"3px solid #FF0000\"});  //全部向上遍历，任一一级$(\"#div3\").parentUntil(\"#div1\").css({border:\"3px solid #FF0000\"});  //适用于区间，向上遍历div1和div3之间});

• 同级遍历

/$(document).ready(function(){$(\"#div\").sibliings().css({border:\"3px solid #FF0000\"}); //同级别全部遍历$(\"#div\").next().css({border:\"3px solid #FF0000\"});  //遍历同级下一个$(\"#div\").nextAll().css({border:\"3px solid #FF0000\"});  //遍历同级下面所有的$(\"#div\").nextUntil(\"#p\").css({border:\"3px solid #FF0000\"}); //遍历同级div到p之间的$(\"#div\").pre().css({border:\"3px solid #FF0000\"});  //遍历同级上一个$(\"#div\").preAll().css({border:\"3px solid #FF0000\"});  //遍历同级上面所有的$(\"#div\").preUntil(\"#p\").css({border:\"3px solid #FF0000\"});  //遍历同级p到div之间的}});

• 过滤

$(document).ready(function(){$(\"#div\").first().css({border:\"3px solid #FF0000\"}); //过滤第一个div$(\"#div\").last().css({border:\"3px solid #FF0000\"});  //过滤最后一个div$(\"#div\").eq(0).css({border:\"3px solid #FF0000\"});  //过滤第一个div$(\"#div\").filter(\"p\").css({border:\"3px solid #FF0000\"});  //过滤含有p元素的div$(\"#div\").not(\".style\").css({border:\"3px solid #FF0000\"});  //过滤没有style的class属性的div});