锋利Jquery第十一天 ----Jquery 子元素过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>子元素过滤选择器</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//改变每个class为one的div父元素 下 第二个子元素的背景色
$("div.one :nth-child(2)").css("background","red");
:nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素
:eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
可以使用:
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
返回值 Array<Element>
参数 index (Number) : 要匹配元素的序号，从1开始
示例
在每个 ul 查找第 2 个li
HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:nth-child(2)")
结果:
[ <li>Karl</li>, <li>Tane</li> ]
//改变每个class为one的div父元素 下 第一个子元素的背景色
$("div.one :first-child").css("background","yellow");
:first-child 匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
返回值 Array<Element>
示例
在每个 ul 中查找第一个 li
HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:first-child")
结果:
[ <li>John</li>, <li>Glen</li> ]
//改变每个class为one的div父元素 下 最后一个子元素的背景色
$("div.one :last-child").css("background","green");
:last-child
匹配最后一个子元素
':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
返回值
Array<Element>
示例
在每个 ul 中查找最后一个 li
HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:last-child")
结果:
[ <li>Brandon</li>, <li>Ralph</li> ]
//如果class 为one 的div 父元素下只有一个子元素。那么则改变这个子元素的背景色
$("div.one :only-child").css("background","blue");
:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
返回值 Array<Element>
示例
在 ul 中查找是唯一子元素的 li
HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
jQuery 代码:
$("ul li:only-child")
结果:
[ <li>Glen</li> ]
});
</script>
<style type="text/css">
div,span,p
{
width:140px; height:140px;
margin:5px;
background:#aaa;
border: solid 1px #000;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini
{
width:55px; height:55px;
background-color:#aaa;
font-size:12px;
}
div.hide
{
display:none
}
</style>
</head>
<body>
<h3 align="center">过滤选择器</h3>
<div class="one" id="one">
class等于one,id等于one
<div class="mini">class等于mini</div>
</div>
<div class="one" id="two" title="test">
class="one" id="two" title="test" 的DIV
<div class="mini" title="ohter">class为mini,title="ohter"</div>
<div class="mini" title="test">class为mini,title="test"</div>
</div>
<div class="one">
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini"></div>
</div>
<div class="mini">
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini" title="tesst">class等于mini,title="tesst"</div>
</div>
<div style="display:none" class="one">style="display:none" class="one"的div</div>
<div class="hide">class="hide"的div</div>
<div>包含input的type为"hidden"的div<input type="hidden" size="8" /></div>
<span id="mover">正在执行动画的span元素</span>
<div><p>含有p元素的div</p></div>
</body>
</html>