鋒利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>