1、jQuery之元素的遍历
HTML代码
<body> <div id="div1"> <div id="div2"> <p id="p"> <a> hello world </a> </p> </div> </div> </body>
style代码
#div1{ width: 200px; height: 200px; border: 3px solid cadetblue; } #div2{ width: 150px;height: 150px; border: 3px solid chartreuse; } p{ width: 100px; height: 100px;border: 3px solid chocolate; } a{ border: 2px solid cornflowerblue; }
js代码
/**
* 向下遍历 * children 只对标签的下一级子标签 里面的参数是可选参数 * find() 必须写参数,对指定的任意子标签生效 */ $(document).ready(function(){ //$("#div1").children().css({border:"3px solid #FF0000"}); $("#p").find("#div1").css({border:"3px solid #FF0000"}); // });
/** * 向上遍历 * parent 只对直接父元素 * parents 可以填写参数元素对指定的元素都有效 不指定参数对其所有的父元素都有效果 * parentsUntil 填写参数对其之间(区间)的元素有效 不指定参数对其所有父元素都有效果 */ $(document).ready(function(){ //$("a").parent().css({border:"3px solid #FF0000"}); //a标签的直接父元素有效 $("a").parents("#div1").css({border:"3px solid #FF0000"}); //a标签之上所有父元素都有效 // $("a").parentsUntil("#div2").css({border:"3px solid #FF0000"}); //a元素和div2元素之间的p元素有效果 });
/** * 同级遍历 * sibings 同级 * next 下一个 * nextAll 下边所有 * nextUntil 向下区间 * prev 上一个 * prevAll 上边所有 * preUntil 向上区间 */ $(document).ready(function(){ //$("h1").siblings("h2").css({border:"3px solid #FF0000"}); //同级元素生效 如果填写参数对指定的参数生效 // $("h1").next().css({border:"3px solid #FF0000"});//只对下一个元素 参数不生效 // $("h2").nextAll().css({border:"3px solid #FF0000"});//h2下边所有的元素 // $("h1").nextUntil("h3").css({border:"3px solid #FF0000"});//元素区间的生效 只对向下区间的元素 没有参数默认向下所有 // $("h3").prev().css({border:"3px solid #FF0000"});//上一个元素 // $("h3").prevAll("h1").css({border:"3px solid #FF0000"});//只对h3上边所有的元素生效 $("h3").prevUntil().css({border:"3px solid #FF0000"});//元素区间的生效 只对向上区间的元素 没有参数默认向上所有 });
/** * 遍历之过滤 * first() last() eq() filter() not() */ $(document).ready(function(){ //$("div p").first().css("background-color","#FF0000"); //p元素的同级元素的第一个 //$("div p").last().css("background-color","#FF0000"); //p元素的同级元素中德最后一个 //$("div p").eq(4).css("background-color","#FF0000"); //在p元素的同级元素中寻找索引为4的元素 //$("div p").filter(".p2").css("background-color","#FF0000"); //类是p2的元素 $("div p").not(".p2").css("background-color","#FF0000"); //class类不是p2的元素 });