jQuery过滤、遍历同级元素、向上遍历、向下遍历

话不多说，直接贴代码（我只是希望能在温习原生js的同时，发现一些有趣的东西！）

.html:

p1

p1

p1

p1

p1

p

pp

1

2

3

4

div1

div2

p

Hello!

//下图代码块用于向上及向下遍历

// go on

.js:

$(document).ready(function(){
// filterElement()
// siblingElement();
// toDown();
toUp();
})


function filterElement(){
/*
jQuery过滤
first()
last()
eq()
filter()
not()
*/
$("div p").first().css("background-color","red");//div下的p元素中的第一个
$("div p").last().css("background-color","blue");//最后一个
$("div p").eq(1).css({"background-color":"grey","color":"red"});
$("div p").filter(".cla").css("background-color","grey");//过滤div中的p元素，class为cla的
$("div p").not(".cla").css("background-color","red");//过滤div下的所有p元素，class不为cla的
}


function siblingElement(){
/*
jQuery遍历同级元素
siblings() 所有同级元素
next() 下一个同级元素
nextAll() 下面所有的同级元素
nextUntil() 下面元素的区间
prev() 上一个同级元素
prevAll() 上面所有的同级元素
prevUntil() 上面元素的区间
*/
// $("#sibling h3").siblings().css({border:"3px solid #FF0000"});
// $("#sibling h3").next().css({border:"3px solid #FF0000"});
// $("#sibling h2").nextAll().css({border:"3px solid #FF0000"});
// $("#sibling h1").nextUntil("h4").css({border:"3px solid #FF0000"});//到h4,不包括h4
// $("#sibling h4").prev().css({border:"3px solid #FF0000"});
// $("#sibling h4").prevAll().css({border:"3px solid #FF0000"});
$("#sibling h4").prevUntil("p").css({border:"3px solid #FF0000"});//到p,不包括p
}


function toDown(){
/*
* jQuery向下遍历
* children() 只向下遍历一级（儿子辈）
* find() 可向下遍历任意子元素（儿孙满堂）
* */
// $("#toDown1").children().css({border:"3px dashed #FF0000"});
// $("#toDown1").children("#toDown2").children("p").css({border:"3px dashed #FF0000"});//带参 只能是直接子元素
$("#toDown1").find().css({border:"3px dashed #FF0000"});//不带参 不寻找
$("#toDown1").find("p").css({border:"3px dashed #FF0000"});//带参 可跨元素寻找  如：中间有一个#toDown2
}


function toUp(){
/*
* jQuery向上遍历
* parent() 只向上遍历一级（爸爸辈）
* parents() 可向上遍历任意子元素（长辈们）
* parentsUntil() 向上遍历一个区间
* */
// $("#pid").parent().css({border:"3px dashed #FF0000"});
// $("#pid").parent("toDown1").css({border:"3px dashed #FF0000"});//带参，没有任何变化，只能遍历直接父元素
// $("#pid").parents().css({border:"3px dashed #FF0000"});//包括body和html
// $("#pid").parents("toDown1").css({border:"3px dashed #FF0000"});//可访问非直接父元素
$("a").parentsUntil("#toDown1").css({border:"3px dashed #FF0000"});
}

.css:

#sibling {
margin-top: 10px;
background-color: none;
height:300px;
width: 48%;
float:left;
}


#sibling * {
display: block;
border: 2px dashed gray;
color: grey;
padding: 5px;
margin: 5px;
}


#toDown1{
width: 48%;
height:300px;
border: 2px solid chocolate;
float: left;
}


#toDown2{
width: 80%;
height:80%;
margin-top: 10px;
margin-left: 10px;
border: 2px solid chocolate;
}


#toDown2 p{
margin-left: 10px;
margin-top: 10px;
width: 50%;
height: 20%;
border:  2px solid chocolate;
vertical-align: middle;
line-height: 40px;
}

基础差的，有兴趣可以贴到编译器中玩一玩。大牛勿喷。