今天是第四課主要學習過濾選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lesson4 過濾選擇器</title>
<link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
</head>
<body>
<h1>這是第四課</h1>
<h2>這是第四課</h2>
<h3>這是第四課</h3>
<h4>這是第四課</h4>
<h5>這是第四課</h5>
<ul>
<li><a href="#">#######</a></li>
<li class='aaa'><a href="#">aaaaaaaaa0</a></li>
<li class='aaa'><a href="#">aaaaaaaaa1</a></li>
<li ><a href="#">aaaaaaaaa2</a></li>
<li><a href="#">aaaaaaaaa3</a></li>
</ul>
<ul>
<li><a href="#">#######</a></li>
<li class='aaa'><a href="#">aaaaaaaaa1</a></li>
<li><a href="#">aaaaaaaaa2</a></li>
<li class='aaa'><a href="#">aaaaaaaaa3</a></li>
<li><a href="#">aaaaaaaaa4</a></li>
</ul>
<input type='text' />
<div id="div1">
這是隱藏內容！
<input type='text' hidden="hidden" />
</div>
<div id="div2">
這是隱藏內容！
<input type='text' hidden="hidden" />
</div>
</body>
</html>
<pre name=css" class="plain">
#div1{
display:none;
}
#div2{
visibility:hidden;
}
$(function(){
/*過濾選擇器簡稱：過濾器。它其實也是一種選擇器，而這種選擇器類似與 CSS3
*(t.mb5u.com/css3/)裏的僞類，可以讓不支持 CSS3 的低版本瀏覽器也能支持。和常規
*選擇器一樣，jQuery 爲了更方便開發者使用，提供了很多獨有的過濾器。
*/
//$("li:first").css("background-color","red"); //選取第一個元素
//$("li:last").css("background-color","red"); //選取最後一個元素
//$("li:not(.aaa)").css("background-color","red"); //選取calss不是aaa的li元素
//$("li:even").css("background-color","red"); //選取索引是偶數的li元素
//$("li:odd").css("background-color","red"); //選取索引值爲奇數的li元素
//$("li:eq(2)").css("background-color","red"); //選取第三個li元素
//$("li:gt(2)").css("background-color","red"); //選取從第三個元素開始後的所有元素(即四到最後一個)
//$("li:lt(2)").css("background-color","red"); //選取從第一個元素到第三個元素（不包含第三個元素）
//alert($(":header").get(0)); //返回[object HTMLHeadingElement]
//$(":header").css("background-color","red"); //選取h1-h6的標題元素
//alert($("div:hidden").get(0).firstChild.nodeValue); //:hidden 包含<input type='hidden' />
//alert($(":visible").size()); //獲取所有可見元素
/*for(var i in $("document")){
document.write(i+'<br>');
}*/
/*alert($("input:hidden").size()); //:hidden 包含<input type='hidden' />visibility:hidden;和display：none;
$("div:hidden").show("2000",function(){
$(this).css("display","block"); //this指向div：hidden 所選取的元素
});
$("div:animated").css("background-color","red"); //選取正在執行動畫的元素
*/
/*$("input").focus(); //注意只有爲input綁定focus事件後才能才能用$("input:focus")獲取到元素
$("input:focus").css("background-color","red");*/
//$("li:first-child").css("background-color","red"); //獲取每個父元素的第一個子元素
//$("li:last-child").css("background-color","red"); //獲取每個父元素的最後一個子元素
//$(":only-child").css("background-color","red"); //獲取只有一個子元素的元素
//$('li:nth-child(even)').css("background-color","red"); //獲取自定義的子元素的元素odd/even/eq(index)
/*alert($("li").is(function(){
return $(this).hasClass("aaa");
}));*/
//$("li").slice(0,2).css("background-color","red");
//$("ul").filter('.aaa').end().css("background-color","red");
alert($('div').contents().length);
/*jQuery 在選擇器和過濾器上，還提供了一些常用的方法，方便我們開發時靈活使用。
* 方法名 jQuery 語法 說明 返回
* is(s/o/e/f) $('li').is('.red') 傳遞選擇器、DOM、jquery 對象或是函數來匹配元素結合 集合元素
* hasClass(class)$('li').eq(2).hasClass('red') 其實就是 is("." + class) 集合元素
* slice(start, end) $('li').slice(0,2) 選擇從 start 到 end 位置的元素，如果是負數，則從後開始 集合元素
* filter(s/o/e/f) $('li').filter('.red').end()$('div').find('p').end()獲取當前元素前一次狀態 集合元素
* contents() $('div').contents() 獲取某元素下面所有元素節點，包括文本節點，
* 如果是 iframe，則可以查找文本內容 集合元素
*/
});
/*
*過濾器名 jQuery語法 說明 返回
*:first $('li:first') 選取第一個元素 單個元素
*:last $('li:last') 選取最後一個元素 單個元素
*:not(selector) $('li:not(.red)') 選取 class 不是 red 的 li元素 集合元素
*:even $('li.even') 選擇索引(0 開始)是偶數的所有元素 集合元素
*:odd $('li:odd') 選擇索引(0 開始)是奇數的所有元素 集合元素
*:eq(index) $('li:eq(2)') 選擇索引(0 開始)等於 index 的元素 單個元素
*:gt(index) $('li:gt(2)') 選擇索引(0 開始)大於 index 的元素 集合元素
*:lt(index) $('li.lt(2)') 選擇索引(0 開始)小於 index 的元素 集合元素
*:header $(':header') 選擇標題元素，h1 ~ h6 集合元素
*:animated $(':animated') 選擇正在執行動畫的元素 集合元素
*:focus $(':focus') 選擇當前被焦點的元素 集合元素
*:hidden $(':hidden') 選取所有不可見元素 集合元素
*:visible $(':visible') 選取所有可見元素 集合元素
*子元素過濾器名 jQuery語法 說明 返回
*:first-child $('li:first-child') 獲取每個父元素的第一個子元素 集合元素
*:last-child $('li:last-child') 獲取每個父元素的最後一個子元素 集合元素
*:only-child $('li:only-child') 獲取只有一個子元素的元素 集合元素
*:nth-child(odd/even/eq(index)) $('li:nth-child(even)') 獲取每個自定義子元素的元素(索引值從 1 開始計算) 集合元素
*/
<span style="font-size:18px;color:#FF0000;">未完待續。。。。。。。。</span>
