jQuery学习笔记之四_H5之家 - 中国HTML5教程资源分享第一站

jQuery学习笔记之四

jQuery学习笔记之四，有需要的朋友可以参考下。

1、jQuery之元素的遍历

HTML代码

<body> > > > <a> hello world </a> </p> </div> </div> </body>

style代码

#div1{ width: 200px; height: 200px; border: 3px solid cadetblue; } #div2{ : 3px solid chartreuse; } p{ : 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的元素 ); //class类不是p2的元素 });