學習內容
- jQuery層次選擇器
- jQuery屬性選擇器
- jQuery表單選擇器
- jQuery過濾選擇器
能力目標
- 熟悉jQuery各種選擇器的使用場合
- 能熟練使用jQuery各種選擇器
本章簡介
上一章我初步接觸了jQuery，並能夠編寫一些簡單的jQuery代碼，其中重點是jQuery基本選擇器。jQuery的選擇器非常強大，它是jQuery的根基，基本上任何操作都要依賴於選擇器。本章重點學習jQuery選擇器，包括層次選擇器、屬性選擇器、表單選擇器、內容選擇器和過濾選擇器等。
核心技能部分
4.1 jQuery選擇器
jQuery選擇器的主要功能是查找、匹配並獲取頁面元素，這是進行任何操作的前提。jQuery提供了衆多功能強大且使用方便的選擇器，完全能滿足開發需求。
jQuery選擇器使用起來非常簡單，因爲它完全繼承了CSS選擇器的風格，但是功能更強大，並且進行了跨瀏覽器處理。
jQuery選擇器主要包括：基本選擇器、層次選擇器、屬性選擇器、表單選擇器、內容選擇器和過濾選擇器。基本選擇器在上一章已經做過介紹，此處不再多述，其他選擇器會在下面逐一進行介紹。
4.1.1 層次選擇器
層次選擇器是通過DOM對象之間的層次關係來獲取並匹配元素的，例如後代元素、子元素、相鄰元素等，具體說明見表4-1-1所示。
表4-1-1 層次選擇器
層次選擇器 |
說明 |
$("ancestor descendant") |
匹配並獲取ancestor元素裏的所有後代descendant元素 |
$("parent > child") |
匹配並獲取parent元素裏的子元素 |
$("prev + next") |
匹配並獲取緊挨着prev元素後的next元素 |
$("prev ~ siblings") |
匹配並獲取prev元素後的所有siblings元素 |
下面我們通過具體的示例來演示層次選擇器的用法。
示例4.1
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例4.1</title><script src="jquery-1.7.2.min.js"></script><style>div{width:120px;}.sec{margin-left:15px;}.three{margin-left:25px;}a:link,a:visited{text-decoration:none;color:black;}</style></head><body><div id="g1"><img src="img/jia.gif" /><a href="#" >國產</a><div><div class="sec"><img src="img/jia.gif" /><a href="#" >北京奔馳</a></div><div class="sec"><img src="img/jia.gif" /><a href="#" >北京現代</a><div><div class="three"><img src="img/flag.gif"/><a href="#">悅翔</a></div><div class="three"><img src="img/flag.gif"/><a href="#">索納塔</a></div><div class="three"><img src="img/flag.gif"/><a href="#">途勝</a></div><div class="three"><img src="img/flag.gif"/><a href="#">伊蘭特</a></div></div></div><div class="sec"><img src="img/jia.gif" /><a href="#" >比亞迪</a></div></div></div></body></html><script>alert($("#g1 div").html());alert($("#g1 a").html());alert($("#g1 .sec").size());alert($("#g1 > .sec").size());</script>上述代碼實現了一個如圖4.1.1所示的樹形層次結構，我們以此來演示jQuery層次選擇器。
$("#g1 div")表示獲取id是g1的元素裏所有的後代div。
$("#g1 a")表示獲取id是g1的元素的子元素a
$("#g1 .sec")兩個選擇器之間是空格，$("#g1 > .sec")兩個選擇器之間是>，具體差別可以通過最後兩個彈出的對話框表現出來
$("#g1 .sec")表示獲取id是g1的元素裏所有的類名是.sec的元素，一共有3個。$("#g1 > .sec")也是獲取id是g1的元素裏類名是.sec的元素，但它只匹配g1裏的子元素，即必須是g1的一級子節點，所以最終是0個。
示例4.1演示了表4-1-1中前兩種層次選擇器的用法，下面我們通過示例4.2演示後兩種層次選擇器的用法。
示例4.2
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例4.2</title><script src="jquery-1.7.2.min.js"></script></head><body><div><div id="g">測試</div><a href="#">悅翔</a><a href="#">索納塔</a><div><a href="#">途勝</a></div><div><a href="#">悅動</a></div></div></body></html><script>document.write("匹配#g+a<br/>");$("#g+a").each(function(){document.write($(this).html()+"<br/>");});document.write("匹配#g~a<br/>");$("#g~a").each(function(){document.write($(this).html()+"<br/>");});</script>$("#g+a")表示獲取id是g的元素後面的第一個超鏈接，所以第一個each只會循環輸出一次，如圖4.1.6所示。$("#g~a")表示獲取id是g的元素後面的所有超鏈接，但必須是g的一級節點元素，所以第二個each會循環輸出兩次。
4.1.2 屬性選擇器
顧名思義，屬性選擇器是指通過元素某個屬性及其值來匹配並獲取相關元素的。具體說明見表4-1-2所示。
表4-1-2 屬性選擇器
屬性選擇器 |
說明 |
$(" selector [ attr ] ") |
獲取匹配selector選擇器的並且擁有attr屬性的元素 |
$(" selector [ attr =' val ' ] ") |
獲取匹配selector選擇器的並且attr屬性的值是val的元素 |
$(" selector [ attr !=' val ' ] ") |
獲取匹配selector選擇器的並且attr屬性的值不是val的元素 |
$(" selector [ attr ^=' val ' ] ") |
獲取匹配selector選擇器的並且attr屬性的值是以val開始的元素 |
$(" selector [ attr $=' val ' ] ") |
獲取匹配selector選擇器的並且attr屬性的值是以val結尾的元素 |
$(" selector [ attr *=' val ' ] ") |
獲取匹配selector選擇器的並且attr屬性的值包含val的元素 |
$(" selector [ ] [ ] [ ] ...") |
屬性選擇器組合 |
下面通過一個示例來演示屬性選擇器的具體用法。該示例實現了一個註冊表單，當用戶單擊【註冊】按鈕時對所有的文本框進行非空驗證，如圖4.1.7所示。
圖4.1.7 註冊頁面
這裏只給出腳本代碼，如下所示。
示例4.3
<script>$("#btn").click( //單擊事件function(){$("input[type='text']").each(function(){if($(this).val()==""){alert("所有的文本框都必須填寫！");return false;}});});</script>文本框元素的標籤名是input，type屬性的值是text，所以獲取所有文本框的屬性選擇器就可以這樣寫：$("input[type='text']")，然後通過each( )逐個遍歷，並通過val( )進行非空驗證。
4.1.3 表單選擇器
表單在Web前端開發中使用非常頻繁，jQuery專門加入了表單選擇器，這給開發人員操縱表單帶來了極大的便利，詳見表4-1-3所示。
表4-1-3 表單選擇器
名稱 |
說明 |
匹配並獲得表單中所有input, textarea, select和button元素 |
|
匹配並獲得所有的文本框 |
|
匹配並獲得所有密碼框 |
|
匹配並獲得所有單選按鈕 |
|
匹配並獲得所有複選框 |
|
匹配並獲得所有提交按鈕 |
|
匹配並獲得所有圖片 |
|
匹配並獲得所有重置按鈕 |
|
匹配並獲得所有按鈕 |
|
匹配並獲得所有文件域 |
|
:hidden |
匹配並獲得所有隱藏域 |
下面通過一個示例來演示表單選擇器的具體用法
示例4.4
<script>document.write("表單元素一共有："+$(":input").size());document.write("文本框一共有："+$(":text").size());document.write("複選框一共有："+$(":checkbox").size());document.write("單選按鈕一共有："+$(":radio").size());</script>通過查看圖4.1.8，我們能判斷出該表單中一共有10個元素，其中文本框1個，複選框3個，單選按鈕2個
4.1.4 表單屬性選擇器
表單屬性選擇器是對錶單選擇器的有力補充，詳見表4-1-4所示。
表4-1-4 表單屬性選擇器
名稱 |
說明 |
:enabled |
匹配並獲得所有正常使用的元素 |
:disabled |
匹配並獲得所有禁用的元素 |
:checked |
匹配並獲得所有被選中的複選框 |
:selected |
匹配並獲得下拉列表框的選中項 |
示例4.5展示了表單屬性選擇器的具體用法，代碼如下所示。
示例4.5
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例4.5</title><script src="jquery-1.7.2.min.js"></script></head><body><FORM><TABLE width="50%" border="1"><TR><TD>來自：</TD><TD><select name="select"><option value="北京">北京</option><option value="上海">上海</option><option value="廣州">廣州</option></select> </TD></TR><TR><TD>愛好：</TD><TD><input type="checkbox" value="籃球" name="hop">籃球<input type="checkbox" value="足球" name="hop">足球<input type="checkbox" value="排球" name="hop" checked="checked">排球</TD></TR><TR><TD> </TD><TD><input type="button" id="btn" value="提交"/><input type="reset" value="重置" disabled="disabled"></TD></TR></TABLE></FORM><p><div id="content1"></div><div id="content2"></div><div id="content3"></div></body></html><script>$("#btn").click(function(){$("#content1").html("下拉列表框的選中項的值是："+$(":selected").val());$("#content2").html("選中的複選框的值有：");$("input:checked").each(function(){$("#content2").html($("#content2").html()+$(this).val());});$("#content3").html("被禁用的元素的值是："+$("input:disabled").val());})</script>上述代碼使用表單屬性選擇器對下拉列表框好複選框進行了操作
4.1.5 內容選擇器
內容選擇器主要使用通過元素所包含的文本或子元素進行匹配或獲取，詳見表4-1-5所示。
表4-1-5 內容選擇器
名稱 |
說明 |
:contains ( txt ) |
匹配並獲得包含有txt文本的元素 |
:empty |
匹配並獲得沒有子元素或者文本的元素 |
:has ( selector ) |
匹配並獲得包含有selector選擇器的元素 |
示例4.6展示了內容選擇器的具體用法，代碼如下所示。
示例4.6
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例4.6</title><script src="jquery-1.7.2.min.js"></script></head><body><div>I love jQuery</div><div><a href="www.baidu.com" id="a">百度</a><div></div></div><script>document.write($("div:contains('jQuery')").html());document.write($("div:empty").size());document.write($("div:has('#a')").html());</script></body></html>$("div:contains('jQuery')")表示獲取包含jQuery文本的div；$("div:empty")表示獲取不包含子元素或文本的元素；
$("div:has('#a')")表示獲取包含#a選擇器的元素，運行效果如圖4.1.11所示。
圖4.1.11 運行效果
4.1.6 過濾選擇器
過濾選擇器是在獲取到元素後通過索引進一步進行過濾或篩選，詳見表4-1-6所示。
表4-1-6 過濾選擇器
名稱 |
說明 |
獲得匹配到的第一個元素 |
|
獲得匹配到的最後一個元素 |
|
獲得除了匹配的元素之外的元素 |
|
匹配所有索引值爲偶數的元素，從0開始計數 |
|
匹配所有索引值爲奇數的元素，從0開始計數 |
|
匹配一個給定索引值的元素，從0開始計數 |
|
匹配所有大於給定索引值的元素，從0開始計數 |
|
匹配所有小於給定索引值的元素，從0開始計數 |
示例4.7展示了過濾選擇器的具體用法，代碼如下所示。
示例4.7
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例4.7</title><script src="jquery-1.7.2.min.js"></script></head><body><table width="289" height="184" border="1"><tr><td align="center">0</td><td align="center">第0行</td></tr><tr><td align="center">1</td><td align="center">第1行</td></tr><tr><td align="center">2</td><td align="center">第2行</td></tr><tr><td align="center">3</td><td align="center">第3行</td></tr><tr><td align="center">4</td><td align="center">第4行</td></tr><tr><td align="center">5</td><td align="center">第5行</td></tr><tr><td align="center">6</td><td align="center">第6行</td></tr><tr><td align="center">7</td><td align="center">第7行</td></tr><tr><td align="center">8</td><td align="center">第8行</td></tr></table><script>document.write($("tr:first").html());document.write($("tr:last").html());$("tr:odd").each(function(){document.write($(this).html());});$("tr:even").each(function(){document.write($(this).html());});document.write($("tr:eq(5)").html());$("tr:gt(6)").each(function(){document.write($(this).html());});</script></body></html>爲了更清晰的演示過濾選擇器的索引，我們在本示例中添加了一個9行2列的表格，然後使用各種過濾選擇器獲取表格中的行。
4.1.7 可見性選擇器
可見性選擇器比較簡單，主要是通過顯示/隱藏狀態來獲取和匹配元素的，詳見表4-1-7。
表4-1-7 可見性選擇器
名稱 |
說明 |
匹配所有的隱藏元素 |
|
匹配所有的可見元素 |
示例4.8展示了可見性選擇器的具體用法，代碼如下所示。
示例4.8
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例4.8</title><script src="jquery-1.7.2.min.js"></script></head><body><input type="text" style="display:none" value="文本框1" /><input type="text" style="display:block" value="文本框2"/><script>alert($("input:hidden").val());alert($("input:visible").val());</script></body></html>4.2 選擇器注意事項
4.2.1 選擇器中含有"."、"#"、"("、"]"特殊符號
根據W3C的規定，屬性的值中是不能含有一些特殊字符的，例如"."、"#"、"("、"]"等。但在實際開發中可能會出現使用這些特殊字符的情況，例如下面的代碼：
<div id="t#b">I Love jQuery</div>
<div id="t[1]"></div>
那麼這時如果使用jQuery選擇器來獲取元素的話，代碼如下所示：
$("#t#b").html();
$("#t[1]").html();
但是這樣寫是獲取不到元素的，因爲選擇器包含有特殊字符，那麼我們可以通過轉義字符來解決這個問題。
$("#t\\#b").html();
$("#t\\[1\\]").html();
jQuery中使用\\來進行字符的轉義。
4.2.2 選擇器中的空格
選擇器中有時需要出現空格，這需要大家特別注意，因爲多一個空格和少一個空格會導致出現截然不同的效果，例如下面的代碼。
示例4.9
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>示例4.9</title><script src="jquery-1.7.2.min.js"></script></head><body><div class="test"> <div style="display:none">1</div><div style="display:none">2</div><div style="display:none">3</div><div style="display:none">4</div></div><div class="test" style="display:none">5</div><div class="test" style="display:none">6</div></body></html><script>document.write($(".test :hidden").size()); //選擇器中包含空格document.write($(".test:hidden").size()); //選擇器中沒有空格 </script>帶有空格的$(".test : hidden")表示後代選擇器；而沒有空格的$(".test:hidden")表示可見性選擇器。
本章總結
選擇器是jQuery的核心，基本上任何業務及功能的實現都需要選擇器。jQuery提供了諸多功能強大的選擇器，包括層次選擇器、屬性選擇器、表單選擇器、內容選擇器等，內容比較多，大家在使用的時候要注意每種選擇器的語法以及它們的適用場合。
任務實訓部分
1：實現樹形菜單
訓練技能點
jQuery層次選擇器
需求說明
在示例4.1的基礎上使用jQuery層次選擇器實現樹形菜單的收縮/展開特效。單擊一級、二級節點能夠收縮和展開其下面的子節點。
2：實現表單驗證
訓練技能點
jQuery表單選擇器
需求說明
按照圖4.2.2所示的界面實現一個簡單的表單，並使用jQuery表單選擇器進行表單驗證，要求:所有項都不能爲空，密碼長度必須大於等於8，單擊“快速註冊”圖片時進行驗證。
3：實現全選/全不選
訓練技能點
Ø jQuery表單屬性選擇器
需求說明
按圖使用jQuery表單選擇器實現全選/全不選效果。
實現步驟
（1） 實現圖4.2.3所示的界面，參考代碼如下所示。
（2） 使用表單選擇器實現全選/全不選效果，參考代碼如下所示。
<script>
//#all表示全選複選框的id
function qx()
{
$(":checkbox").each(
function(){
$(this).get(0).checked=$("#all").get(0).checked;
}
)
}
</script>
4：表格隔行加背景色
訓練技能點
jQuery過濾選擇器
需求說明
按照圖界面，使用jQuery過濾選擇器實現表格隔行背景變色的效果。
實現步驟
（1） 實現圖4.2.4所示的界面
（2） 使用jQuery過濾選擇器獲取把表格中的奇數行(標題行除外)
（3） 把獲取到得奇數行設置爲灰色背景色，參考代碼如下所示。
<script>$("tr:gt(0):odd").each(function(){$(this).get(0).style.backgroundColor="#CCCCCC";})</script>鞏固練習
一、選擇題
1. 以下（）不屬於jQuery選擇器。
A. 表單選擇器
B. 子選擇器
C. 層次選擇器
D. 表單選擇器
2. 以下關於jQuery層次選擇器的說法正確的是（）。
A. 層次選擇器主要針對表單的使用
B. $("ancestor descendant")和$("ancestor > descendant")所獲取的元素一樣
C. $("prev + next")和$("prev ~ next")所獲取的元素一樣
D. 通過層次選擇器一次只能獲得一個元素
3. 以下關於jQuery表單和表單屬性選擇器說法正確的是（）。
A. 表單選擇器只能用於表單
B. 表單屬性選擇器是表單選擇器的附屬，沒有表單選擇器就沒有表單屬性選擇器
C. 表單選擇器和表單屬性選擇器不能和其他選擇器合用
D. :button選擇器獲得的按鈕包括提交按鈕和重置按鈕
4. 下列關於jQuery選擇器中特殊字符的說法錯誤的是（）。
A. jQuery選擇器中不能包含任何特殊字符
B. jQuery選擇器可以包含空格
C. jQuery選擇器支持轉義字符
二、上機練習
數據庫中的數據查詢出來後，在前臺用表格進行顯示。但是由於部分數據不存在造成一些單元格是空的，現在要求使用jQuery選擇器把空單元格中的空文本改爲“暫無”。