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
});