jquery选择器（原创）<二>
jquery选择器，选择接着学：
前面学习了基本选择器中的CSS选择器，现在学层级选择器：
1.子元素选择器
子元素选择器，用于在给定的父元素下，查找这个父元素下面的所有的子元素，语法格式，如下：
$("parent>child")
其中，参数parent是任意有效的选择器；child也是一个选择器，并且它是第一个选择器的子元素，用于筛选子元素。两个参数之间，用“>”分隔：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery子元素选择器</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function () {
$("form>input");
});
</script>
</head>
<body>
<form>
<label>标题</label>
<input name="title" type="text"/>
<div>
<input name="content" type="text"/>
</div>
</form>
</body>
</html>
结果是;<input name="title" type="text"/>
2,后代元素选择器
后代元素选择器，用于在给定祖先元素下匹配所有的后代元素，语法格式：
$("ancestor descendant")
其中，参数ancestor是任意有效的选择器，descendant也是一个选择器，用于筛选后代元素，后代元素可能是ancestor元素的子元素，孙元素，重孙元素等，两个参数之间用空格分隔。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>后代元素选择器</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form input");
});
</script>
</head>
<body>
<form>
<label>label</label>
<input name="news" type="text" value="text1"/>
<label>label3</label>
<div>
<label>label2</label>
<input type="text" name="news2" value="text1"/>
</div>
</form>
</body>
</html>
结果是：
3，紧邻同辈元素选择器
紧邻同辈元素选择器，用于匹配所有紧接在Prev元素后的next元素，语法格式：
$("prev+next")
其中，prev（selector）表示任意有效的选器器；next(selector)表示一个有效选择器并且紧接着第一个选择器，两者用“+”分隔.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>紧邻同辈元素选择器</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function () {
$("div+span")
});
</script>
</head>
<body>
<form>
<div>div1</div>
<span>span1</span>
<div>
<span>span2</span>
</div>
<span>span3</span>
</form>
</body>
</html>
结果是：
4.相邻同辈元素选择器
相邻同辈元素选择器，用于选择某元素后面的所有的同辈元素，语法格式：
$("prev~siblings")
其中，参数prev表示任意有效的选择器，siblings也是一个选择器，用于筛选prev后面的所有同辈元素，两者之间用破浪线（~）分隔，
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>相邻同辈元素选择器</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div~input").css("border", "2px solid blue");
$("input~p").css("color", "red");
});
</script>
<style type="text/css">
p
{
color:blue;
font-size:14px;
}
div, input
{
border:1px solid red; width:200px;height:100px;
}
</style>
</head>
<body>
<div></div>
<input type="text" value=""/>
<input type="text" value=""/>
<p>段落标记</p>
</body>
</html>
变化前：
变化后：
好了，时间不早了，今天就学到这～～～。
每天学一点，每天积累一天，进步就不止一点点！PS：好记性不如烂笔头，学会总结，学会思考～～～
----要飞翔，必须靠自己！
