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>
变化前:
变化后:
好了,时间不早了,今天就学到这~~~。