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