层级选择器:
总共有4种:子元素选择器、后代元素选择器、紧邻同辈元素选择器、相邻同辈元素选择器。
1】子元素选择器:用于在给定父元素下查找父元素下的子元素。
语法:$(“parent>child”)//parent为任意有效的选择器;child也是一个选择器,且是parent的子元素。
Eg:
<form>
<label>标题</label>
<input name=”title”/>
<div >
<input name=”context”>
</div>
</form>
匹配form下所有的input标签:
$(“form>input”)//找到的只是form下的。结果是<input name=”title”/>
2】后代元素选择器:用于在给定的祖先元素下匹配所有的后代元素
语法:$(“ancestor descendant”)//ancestor 为任意有效的选择器;descendant也是一个选择器,可能是ancestor 的子元素、孙元素、重孙元素。
Eg:
<form>
<label>label1</label>
<input name=”news1” type=”text” value=”text1”/>
<label>label3</label>
<div >
<label>label2</label>
<input name=”news2” type=”text” value=”text1”/>
</div>
</form>
匹配form后代标签中的input标签:
$(“form input”)
结果:
<input name=”news1” type=”text” value=”text1”/>
<input name=”news2” type=”text” value=”text1”/>
3】紧邻同辈元素选择器:用于匹配所有紧接在prev元素后的next元素
语法:$(“prev+next”)//prev为任意有效的选择器,next为紧接着Prev选择器的一个选择器
Eg:
<form>
<div>div1</div>
<span>span1<span>
<div>
<span>span2<span>
</div>
</form>
匹配div后边的span元素:
$(“div+span”)
结果:<span>span1<span>
4】相邻同辈元素选择器:用于选择某元素后边的所有同辈元素
语法:$(“prev~siblings”)
Eg:
<style type=”text/css”>
p{color:blue;font-size:14px;}
Div,input{border:1px solid red ; width:200px;height:100px;}
</style>
<body>
<div></div>
<input type=”text”/>
<input type=”text”/>
<p>段落标记</p>
</body>
用jquery改变input元素和p元素的样式
$(document).ready(function(){
$(div~input).css(“border” ,”2px solid blue”);
$(div~p).css(“color” ,”red”);
})
综合例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="F://jQuery_study/jquery-1.11.1.min.js"></script>
</head>
<body>
<form id="form1">
<label>form元素的后代input元素为:input1,input2,input3</label></br>
<input type="text" id="input1" value="文本框1"/>
<div id="maindiv">
<div id="div1">maindiv的子元素:id为div1</div>
<div id="div2">maindiv的子元素:id为div2</div>
</div>
<input type="text" id="input2" value="文本框2"/>
<input type="text" id="input3" value="文本框3"/></br>
<label>maindiv的所有子元素为:div1,div2</label>
</form>
<script type="text/javascript">
$(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>
效果图: