jQuery--遍历

遍历（重点）

①长辈

parent()//爸爸

parents()//爸爸爷爷...

parentsUntil()//爸爸爷爷..到某个标签结束

例:

jq(“span”).parent(“div”).css({"background-color":"blue"})//span的爸爸并且还得是div的背景为blue

jq(“span”).parents().css({"background-color":"blue"})//span的所有直系长辈的背景为blue

jq(“span”).parentsUntil(“div”).css({"background-color":"blue"})//span的爸爸爷爷..到div结束的背景为blue

//parent

//会返回每一个classname=div1的父亲

var div = $( ". div1 "). parent();

console. log( div);

//会设置每一个classname = div1 的父亲的样式

var div1 = $( ". div1 "). parent().css( "backgroundColor", "red");

console. log($( "body"). parent()); //body的父亲是html body是document的属性

//parents

//因为有两个相同类名为div1的盒子 所以他们的长辈都会显示出来

var div2 = $( ". div1 ").parents();

console. log( div2);

//parentsUntil

//到#div3停止 不包括#div3

var div4 = $( "#div4").parentsUntil( "#div2");

console. log( div4);

②晚辈

children()//儿子

find(“选择器”)//在xxx的范围内找“选择器”

//children

//只包括子所有节点 不包括子节点里面的子节点

var children1 = $( "#div1"). children();

console. log( children1);

//find（"选择器"） 在id为div1的子节点范围内寻找id为div4的子节点

var children2 = $( "#div1").find( "#div4"); //===$("#div1 #div4")

console. log( children2);

③同胞

siblings()//所有同胞元素

next()//下一个同胞元素

nextAll()//下一个和后面所有同胞元素

nextUntil(“元素1”)//到元素1之间的所有同胞

//siblings

//找到所有的同胞元素

var siblings1 = $( "#div").siblings();

console. log( siblings1);

//next

//找到下一个元素

var next1 = $( "#div").next();

console. log( next1);

//nextAll

//找到下一个和下一个后面的所有同胞元素

var next2 = $( "#div5").nextAll();

console. log( next2);

//nextUntil

//找到到#div1标签之间的所有同胞元素 但不保罗#div1；

var next3 = $( "#div").nextUntil( "#div1");

console. log( next3);