jquery子元素过滤选择器
子元素过滤选择器
根据该元素是父元素下出现的位置来选中子元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
子元素选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<div class="one">
<div id="one" class="one" >
XXXXXXXXX one
</div>
<div id="two" class="one" >
XXXXXXXXX two
</div>
<div id="three" class="one" >
XXXXXXXXX three
</div>
<div id="four" class="one" >
XXXXXXXXX four
</div>
</div>
<div class="one">
<div id="one" class="one" >
XXXXXXXXX one
</div>
</div>
</body>
<script language="JavaScript">
//****每个class为one的div父元素下的第2个子元素
$('#b1').click(function(){
$('div.one:nth-child(2)').css("background","red");
});
//*****每个class为one的div父元素下的第一个子元素
$('#b2').click(function(){
$('div.one:first-child').css("background","red");
});
//*****每个class为one的div父元素下的最后一个子元素
$('#b3').click(function(){
$('div.one:last-child').css("background","red");
});
//**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$('#b4').click(function(){
$('div.one:only-child').css("background","red");
});
</script>
</html>
