第四章：JQuery選擇器
1.Jquery選擇器簡介
(1) Jquery中的選擇器完全繼承了CSS的風格，利用Jquery選擇器，可以非常便捷和快速的找出特定的Dom元素，然后為他們添加相應的行為，而無需擔心瀏覽器是否支持這一選擇器，學會使用選擇器是學習Jqeury的基礎，Jquery的行為規則都必須在獲取到元素后才能生效。
2.jquery選擇器的優勢
(1) 簡潔的寫法，$()函數
(2)支持CSS1到CSS3選擇器
(3)完善的處理機制
3.選擇器分類
(1) 基本選擇器：通過元素id,class和標簽名等來查找Dom元素
1)$("#id") 根據給定的ID匹配一個元素，返回單個元素 $("#name")選取Id為test的元素
2)$(".class") 根據給定的類名匹配元素 返回集合元素 $(".class")選取所有class為class的元素
3)$("element") 根據給定的元素名匹配元素，返回集合元素 $("input")選取所有的input元素
4)$("*") 匹配所有的元素，返回集合元素，$("*")選取所有的元素
5)$("selector1,selector2,...,selectorN") 將每一個選擇器匹配到的元素合並后返回集合元素， $("div,span,p.myClass")選取所有<div>,<span>和擁有class為myClass的<p>標簽的一組元素
導入文件：
jQ庫：
jQuery1.11.1.js
eg：
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript"> $(function(){ $("span").css("background","pink "); }); $(function(){ $("body span").css("background","#6FF"); $("body>span").css("background","#F9F"); }); </script>
</head>
<body>
<h2>千與千尋</h2>
<p><span>別名：</span>神影少女</p>
<p><span>導演：</span>宮崎駿</p>
<p><span>簡介</span></p>
<p><span>千尋</span>和爸爸媽媽一同驅車前往新家，在郊外的小路上不慎進入了神秘的隧道--他們去了另一個詭秘世界...<span> >>詳細</span></p>
<a href="#">立即播放</a><strong><a href="#">極速播放</a></strong> <span>下載觀看</span>
</body>
(2)層次選擇器：如果想通過Dom元素之間的層次關系來獲取特定元素，例如后代元素，子元素，相鄰元素和同輩元素
1)$("ancestor descendant") 獲得ancestor元素里面的所有descendant(后代)元素，$("div span")選取<div>里的所有的<span>元素
2)$("parent>child") 選取parent元素下的child(子)元素，返回集合元素 $("div span")選取<div>元素下元素名為<span>的子元素
注解：和$("ancestor descendant")有區別，$("ancestor descendant")選擇的是后代元素
3)$("prev+next") 選取緊接在prev元素后的next元素，返回集合元素，$(".one+div")選取class為one的下一個<div>同輩元素
4)$("prev~siblings") 選取prev元素之后的所有siblings元素，$("#two~div")選取Id為two的元素后面的所有<div>同輩元素
注解:可以使用next()方法來替代$('prev+next')選擇器 $(".one").next("div");可以使用nextAll()方法來替代$("prev~siblings")選擇器 $("#two").nextAll(div)
(3)過濾選擇器：主要通過特定的過濾規則來篩選出所需要的Dom元素，按照不同的過濾規則，過濾選擇器可以分為基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾和表單對象屬性過濾選擇器
1)基本過濾選擇器
1)$(":first") 選取第一個元素，$("div:first")選取所有<div>元素中第一個<div>元素。
2)$(":last")選取最后一個元素，$("div:last")選取所有<div>元素中最后一個<div>元素。
3)$(":not(selector)")去除所有與給定選擇器匹配的元素，$("input:not(.myClass)")選取class不是myClass的<input>元素。
4)$(":even")選取索引是偶數的所有元素，索引從0開始，$("input:even")選取索引是偶數的<input>元素
5)$(":odd")選取索引是奇數的所有元素，索引從0開始，$("input:odd")選取索引是奇數的<input>元素
6)$(":eq(index)")選取索引等於index的元素，(index從0開始)，$("input:eq(1)")選取索引等於1的<input>元素
7)$(":gt(index)")選取索引大於index的元素，(index從0開始)，$("input:gt(1)")選取索引大於1的<input>元素(大於1，而不包括1)
8)$(":lt(index)")選取索引小於index的元素，(index從0開始)，$("input:lt(1)")選取索引小於1的<input>元素(小於1，而不包括1)
9)$(":header")選取所有的標題元素，例如：h1,h2,h3等等，$(":header")選取網頁中的所有的<h1>,<h2>,<h3>...
10)$(":animated")選取當前正在執行動畫的所有元素，$("div:animated")選取正在執行動畫的<div>元素。
11)$(":focus")選取當前獲取焦點的元素，$(":focus")選取當前獲取焦點的元素
2)內容過濾選擇器：主要體現在它所包含的子元素或者文本內容上面
1)$(":contains(text)")選取含有文本為"text"的元素，$("div:contains('我')")選取含有文本"我"的<div>元素
2)$(":empty")選取不包含子元素或者文本的空元素，$("div:empty")選取不包含子元素(包括文本元素)的<div>空元素
3)$(":has(selector)")選取含有選擇器所匹配的元素的元素，$("div:has(p)")選取含有<p>元素的<div>元素
4)$(":parent")選取含有子元素或者文本的元素,$("div:parent")選取擁有子元素(包括文本元素)的<div>元素
eg:過濾選擇器：
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript"> $(function(){ $("li:first").css("background-color","pink"); }); </script>
</head>
<body>
<h2>網絡小說</h2>
<ul>
<li>王姬不好當</li>
<li>致命交易</li>
<li class="three">伽藍寺</li>
<li>逆天之春</li>
<li>交錯時光的愛戀</li>
<li>張震鬼故事</li>
<li>第一次親密接觸</li>
</ul>
</body>
3)可見性過濾選擇器：根據元素的可見和不可見狀態來選擇相應的元素
1)$(":hidden")選取所有不可見的元素，$(":hidden")選取所有不可見的元素，包括<input type="hidden" />，
<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想選取<input>元素，可以使用$("input:hidden")
2)$(":visible")選取所有可見的元素，$("div:visible")選取所有可見的<div>元素
4)屬性過濾選擇器：通過元素的屬性來獲取相應的元素
1)$("[attribute]")選取擁有此屬性的元素，$("div[id]")選取擁有屬性Id的<idv>元素。
2)$("[attribute=value]")選取屬性的值為value的元素，$("div[title=test]")選取屬性title為"test"的<div>元素
3)$("[attribute!=value]")選取屬性的值不等於value的元素，$("div[title!=test]")選取屬性title不等於"test"的<div>元素(注意：沒有屬性title的<div>元素也會被選取)
4)$("[attribute^=value]")選取屬性的直以value開始的元素，$("div[title^=test]")選取屬性title以"test"開始的<div>元素
5)$("[attribute$=value]")選取屬性的值以value結束的元素，$("div[title$=test]")選取屬性title以"test"結束的<div>元素
6)$("[attribute*=value]")選取屬性的值含有value的元素，$("div[title*=test]")選取屬性title含有"test"的<div>元素
7)$("[attribute|=value]")選取屬性等於給定字符串或以給字符串為前綴(該字符串后跟一個連字符"-")的元素,$("div[title|="en"]")選取屬性title等於en或者以en為前綴(給字符串后跟一個"-")的元素
8)$("[attribute~=value]")選取屬性用空格分隔的值中包含一個給定值得元素，$("div[title~='uk']")選取屬性title用空格分隔的值中包含字符uk的元素
9)$("[attribute1][attribute2][attribute3]")用屬性選擇器合並成一個復合屬性選擇器，滿足多個條件，每選擇一次，縮小一次范圍
$("div[id][title$='test']")選取擁有屬性id，並且屬性title以"test"結束的<div>元素
eg:屬性選擇器：
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript">
//改變表頭顏色
$(function(){ $("h2[title]").css("background-color","#09F"); }); //改變奇數顏色
$(function(){ $("[class=odds]").css("background-color","pink"); }); //改變id不為box的元素背景顏色
$(function(){ $("ul").css("background-color","yellow"); $("h2").css("background-color","yellow"); }); //改變以h開頭的元素顏色
$(function(){ $("[title^=h]").css("background-color","green"); }); //改變以jp結尾的元素顏色
$(function(){ $("[title$=jp]").css("background-color","gray"); }); //改變含有s的元素顏色
$(function(){ $("[title*=s]").css("background-color","red"); }); //改變含有class屬性，且title屬性的值中含有y的<li>的元素顏色
$(function(){ $("li[class][title*=y]").css("background-color","black"); }); </script>
<style type="text/css"> #box {background-color:#FFF;border:2px solid #000;height:230px;width:200px;padding:5px;}
</style>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">動畫列表</h2>
<ul>
<li class="odds" title="kn_jp">名偵探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ki_jp">死神</li>
<li class="enens" title="ko_jp">妖精的尾巴</li>
<li class="odds" title="ht_jp">銀魂</li>
<li class="enens" title="yy_yy">黑貓警長</li>
<li class="odds" title="ss_hu">仙履奇緣</li>
</ul>
</div>
</body>
5)子元素過濾選擇器
注解：子元素過濾選擇器的過濾規則相對於其他的選擇器稍微有些復雜，只要將元素的父元素和子元素區分清楚，使用起來還是相當簡單的
1)$(":nth-child(idenx/even/odd/equation)")選取每個父元素下的第index個子元素或者奇偶元素(idnex從1算起)
:eq(index)只匹配一個元素，而:nth-child將為每一個父元素匹配子元素，並且:nth-child(index)的index是從1開始的，
而:eq(index)是從0開始的
2)$(":first-child")選取每個父元素的第一個子元素，:first只返回單個元素，而:first-child選擇符將為每個父元素匹配第一個
子元素，例如:$("ul li:first-child");選取每個<ul>中的一個<li>元素
3)$(":last-child")選取每個父元素的最后一個子元素,和上面一樣，:last只返回當個元素，而:last-child選擇符將為每個符永
元素匹配最后一個子元素，例如：$("ul li:first-child");選取每個<ul>中的最后一個<li>元素。
4)$(":only-child")如果某個元素是它父元素中唯一的子元素，那么將會被匹配，如果父元素中含有其他元素，這不會被匹配
$("ul li:only-child")在<ul>中選取是唯一子元素的<li>元素
5):nth-child()選擇器是很常用的子元素過濾器，詳細功能如下：
1)$(:nth-child(even))能選取每個父元素下的索引值是偶數的元素
2)$(:nth-child(odd))能選取到每個父元素下的索引值是奇數的元素
3)$(:nth-child(2))能選取到每個父元素下索引值等於2的元素
4)$(:nth-child(3n))能選取到每個父元素下索引值是3的倍數的元素(n從1開始)
5)$(:nth-child(3n+1))能選取每個父元素下索引值是(3n+1)的元素(n從1開始)
6)表單對象過濾選擇器：對所選擇的表單進行過濾
1)$(:enabled)選取所有可用元素，$("#form :enabled");選取id為"form"的表單內的所有可用元素
2)$(:disabled)選取所有不可用的元素，$("#form :enabled");選取id為"form"的表單內的所有不可用元素
3)$(:checked)選取所有被選中的元素(單選框，復選框)，$("input:checked")選取所有被選中的<input>元素
4)$(:selected)選取所有被選中的選項元素(下拉列表)，$("select option:selected")選取所有被選中的選項元素
eg:光棒效果：
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript"> $(function (){ //獲得所有的li
var lis=document.getElementsByTagName("li"); //給每一個li注冊事件
for(var i=0;i<lis.length;i++){ lis[i].onmouseover=function(){ //改變樣式
this.style.cssText="background:pink"; }; lis[i].onmouseout=function(){ //改變樣式
this.style.cssText="background:"; }; } }); </script>
</head>
<body>
<ul>
<li>就好了吼吼吼</li>
<li>和甲方根據客</li>
<li>換個房交會飛</li>
<li>和規范回復好</li>
</ul>
</body>
(6)表單選擇器：方便的獲取到表單的某個或者某類型的元素
1)$(":input")選取所有的<input>,<textarea>,<select>,<button>元素
2)$(":text")選取所有的單行文本框
3)$(":password")選取所有的密碼框
4)$(":radio")選取所有的單選框
5)$(":checkbox")選取所有的多選框
6)$(":submit")選取所有的提交按鈕
7)$(":image")選取所有的圖像按鈕
8)$(":reset")選取所有的重置按鈕
9)$(":button")選取所有的按鈕
10)$(":file")選取所有的上傳域
11)$(":hidden")選取所有的不可見元素
eg:英雄聯盟：
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(".yx").css("background-color","pink"); $("span").css("background-color","pink"); $("strong").css("font-size","20px"); $("li").css("show"); $("#show").css("background-color","pink"); }); }); </script>
<style type="text/css"> li{ text-decoration:underline;
}
</style>
</head>
<body>
<h1 >英雄聯盟</h1>
<p class="yx"><<英雄聯盟>>，簡稱LoL.</p>
<p> 由<strong>Riot Games</strong>開發，為3D競技場戰游戲，其<span class="z">主創團隊</br>由實力強勁的 <strong> 魔獸爭霸 </strong> 系列游戲多人即時對戰自定義</br>地圖的開發團隊 </span>..<a href="#">更多詳情</a>
</p>
<h2>目錄</h2>
<ul>
<li id="show">開發團隊</li>
<li>游戲周邊</li>
<li>游戲介紹</li>
<li>配置需求</li>
<li>游戲背景</li>
</ul>
</body>
總結：
編寫選擇器時要注意特殊符號和空格
1)選擇器中含有".","、","#","(","]"等特殊字符
根據w3c的規定，屬性中是不能含有這些特殊字符的，但在實際項目中偶爾會遇到表達式中含有"#","."等特殊字符，如果按照普通的方式去處理的話可能會出現錯誤，解決此類錯誤是使用轉義符轉義
例如：<div id="id#b">韓迎龍</div><div id="id[1]">韓迎龍</div>,這時的取法是這樣的 $("#id\\#b"),$("#id\\[1\\]")
2)屬性選擇器的@符號問題
在Jquery升級版本的過程中，jquery在1.3.1版本中徹底放棄了1.1.0版本遺留下來的@符號，加入你使用的是1.3.1以上的版本，
那么你不需要再屬性前添加@符號，例如：
$("div[@title='test']")，正確的寫法就是去掉@符號，$(div[title='test'])
(2)選擇器中含有空格的注意事項
選擇器中的空格是不容忽視的，多一個空格或者少一個空格也許會得到截然不同的結果
記住該記住的，忘記該忘記的。改變能改變的，接受不能改變的。
素而安然