jQuery之层级选择器学习笔记

来源：互联网发布：流程管理软件 hr软件编辑：程序博客网时间：2024/04/30 00:01

层级选择器：

总共有4种：子元素选择器、后代元素选择器、紧邻同辈元素选择器、相邻同辈元素选择器。

1】子元素选择器：用于在给定父元素下查找父元素下的子元素。

语法：$(“parent>child”)//parent为任意有效的选择器；child也是一个选择器，且是parent的子元素。

Eg:

<form>

<div >

</div>

</form>

匹配form下所有的input标签：

$(“form>input”)//找到的只是form下的。结果是<input name=”title”/>

2】后代元素选择器：用于在给定的祖先元素下匹配所有的后代元素

语法：$(“ancestor descendant”)//ancestor 为任意有效的选择器；descendant也是一个选择器，可能是ancestor 的子元素、孙元素、重孙元素。

Eg：

<form>

<label>label1</label>

<label>label3</label>

<div >

<label>label2</label>

</div>

</form>

匹配form后代标签中的input标签：

$(“form input”)

结果：

3】紧邻同辈元素选择器：用于匹配所有紧接在prev元素后的next元素

语法：$(“prev+next”)//prev为任意有效的选择器,next为紧接着Prev选择器的一个选择器

Eg:

<form>

<div>

</div>

</form>

匹配div后边的span元素：

$(“div+span”)

结果：<span>span1<span>

4】相邻同辈元素选择器：用于选择某元素后边的所有同辈元素

语法：$(“prev~siblings”)

Eg:

p{color:blue;font-size:14px;}

Div,input{border:1px solid red ; width:200px;height:100px;}

</style>

<body>

</body>

用jquery改变input元素和p元素的样式

$(document).ready(function(){

$(div~input).css(“border” ,”2px solid blue”);

$(div~p).css(“color” ,”red”);

})

综合例子：

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

<label>form元素的后代input元素为：input1,input2,input3</label></br>

<div id="div1">maindiv的子元素：id为div1</div>

<div id="div2">maindiv的子元素：id为div2</div>

</div>

<label>maindiv的所有子元素为：div1,div2</label>

</form>

$(document).ready(function(){

$("form input").css("color","red");

$("div>div").css("background","#FCF");

$("div~input").css("border","2px solid blue");

$("div+input").css("border","2px solid red");

})

</script>

</body>

</html>

效果图：

0 0