[jQuery 權威指南（第二版）]閱讀筆記-jQuery 選擇器[層次選擇器語法]
[jQuery 權威指南（第二版）]閱讀筆記-jQuery 選擇器[層次選擇器語法]
資料來源:http://www.java1234.com/a/javaziliao/shuji/2014/1206/3343.html
根據所獲取頁面中元素的不同，可以將jQuery 選擇器分為四大類：
■基本選擇器
基本選擇器語法
|
選擇器 |
功能描述 |
返回值 |
|
#id |
根據給定的ID 匹配一個元素 |
單個元素 |
|
element |
根據給定的元素名匹配所有元素 |
元素集合 |
|
.class |
根據給定的類匹配元素 |
元素集合 |
|
* |
匹配所有元素 |
元素集合 |
|
selector1,selectorN |
將每一個選擇器匹配到的元素合併後一起返回 |
元素集合
|
Ps 「逗號」隔開表示個別元素，「空格」隔開表示階層關係
範例：
|
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>使用jQuery基本選擇器</title> <script language=”javascript” type=”text/javascript” src=”Jscript/jquery-1.8.2.min.js”></script> <style type=”text/css”> body{font-size:12px;text-align:center} .clsFrame{width:300px;height:100px} .clsFrame div,span{display:none;float:left; width:65px;height:65px;border:solid 1px #ccc;margin:8px} .clsOne{background-color:#eee} </style> <script type=”text/javascript”> $(function(){ /* ID匹配元素「三個顯示一個」*/ $(“#divOne”).css(“display”,”block”); }) $(function(){ /*元素名匹配元素「三個顯示一個」，div下的span */ $(“div span”).css(“display”,”block”); }) $(function(){ /*類匹配元素*/ $(“.clsFrame .clsOne”).css(“display”,”block”); }) $(function(){ /*匹配所有元素「全部顯示」*/ $(“*”).css(“display”,”block”); }) $(function(){ /*合併匹配元素「三個顯示二個」*/ $(“#divOne,span”).css(“display”,”block”); }) </script> </head> <body> <div class=”clsFrame”> <div id=”divOne”>ID</div> <div class=”clsOne”>CLASS</div> <span>SPAN</span> </div> </body> </html> |
ps：「div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px}」這行css有用到float:left;讓元件可以橫向擺放
■層次選擇器
|
ancestor descendant |
根據祖先元素匹配所有的後代元素「不管階數有多少」 |
元素集合 |
|
parent > child |
根據父元素匹配所有的子元素 |
元素集合 |
|
prev + next |
匹配所有緊接在prev 元素後的相鄰元素 |
元素集合 |
|
prev ~ siblings |
匹配prev 元素之後的所有兄弟元素 |
元素集合 |
範例：
|
<html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>使用jQuery層次選擇器</title> <script language=”javascript” type=”text/javascript” src=”Jscript/jquery-1.8.2.min.js”></script> <style type=”text/css”> body{font-size:12px;text-align:center} div,span{float:left;border:solid 1px #ccc;margin:8px;display:none} .clsFraA{width:65px;height:65px} .clsFraP{width:45px;height:45px;background-color:#eee} .clsFraC{width:25px;height:25px;background-color:#ddd} </style> <script type=”text/javascript”> $(function(){ //匹配後代 $(“#divMid”).css(“display”,”block”); $(“div span”).css(“display”,”block”);//[此範例 包含下麵元素2代] }) $(function(){ //匹配子元素 $(“#divMid”).css(“display”,”block”); $(“div>span”).css(“display”,”block”);//[此範例 包含下麵元素1代] }) $(function(){ //匹配後面元素 $(“#divMid + span”).css(“display”,”block”);//+ 是指 下面的隔壁鄰居，所以這行無效 $(“#divMid + div”).css(“display”,”block”);//+ 是指 下麵的隔壁鄰居 //$(“#divMid”).next().css(“display”,”block”);//下面的隔壁鄰居，功能同上 }) $(function(){ //匹配所有後面元素 $(“#divMid ~ div”).css(“display”,”block”);//~ 是指 下面的所有隔壁鄰居 //$(“#divMid”).nextAll().css(“display”,”block”);//下面的所有隔壁鄰居，功能同上 }) $(function(){ $(“#divMid”).siblings(“div”).css(“display”,”block”);//siblings-所有鄰居包含之前的 })
</script> </head> <body> <div class=”clsFraA”>Left</div> <div class=”clsFraA” id=”divMid”> <span class=”clsFraP” id=”Span1″> <span class=”clsFraC” id=”Span2″></span> </span> </div> <div class=”clsFraA”>Right_1</div> <div class=”clsFraA”>Right_2</div> </body> </html> |
■過濾選擇器
◆簡單過濾選擇器
◆內容過濾選擇器
◆可見性過濾選擇器
◆屬性過濾選擇器
◆子元素過濾選擇器
◆表單物件屬性過濾選擇器
■表單選擇器