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