[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> |
■過濾選擇器
◆簡單過濾選擇器
範例：
|
<html> <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{width:241px;height:83px;border:solid 1px #eee} h1{font-size:13px} ul{list-style-type:none;padding:0px} .DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left; border-top:solid 1px #eee;border-bottom:solid 1px #eee} .GetFocus{width:58px;border:solid 1px #666;background-color:#eee} #spnMove{width:238px;height:23px;line-height:23px;} </style> <script type=”text/javascript”> $(function(){ //增加第一個元素的類別 $(“li:first”).addClass(“GetFocus”);//挑出li的第一個 }) $(function(){ //增加最後一個元素的類別 $(“li:last”).addClass(“GetFocus”);//挑出li的第最後一個 }) $(function(){ //增加去除所有與給定選擇器匹配的元素類別 $(“li:not(.NotClass)”).addClass(“GetFocus”);//不包含該有項目的全部 }) $(function(){ //增加所有索引值為偶數的元素類別,從0開始計數 $(“li:even”).addClass(“GetFocus”); }) $(function(){ //增加所有索引值為奇數的元素類別,從0開始計數 $(“li:odd”).addClass(“GetFocus”); }) $(function(){ //增加一個給定索引值的元素類別,從0開始計數 $(“li:eq(1)”).addClass(“GetFocus”);//指定陣列引數「等於」 }) $(function(){ //增加所有大於給定索引值的元素類別,從0開始計數 $(“li:gt(1)”).addClass(“GetFocus”);//指定陣列引數「大於」2～3 }) $(function(){ //增加所有小於給定索引值的元素類別,從0開始計數 $(“li:lt(4)”).addClass(“GetFocus”);//指定陣列引數「小於」的全部0～3 }) $(function(){ //增加標題類元素類別 $(“div h1”).css(“width”,”238″); $(“:header”).addClass(“GetFocus”);//:header 獲取所有標題類型的元素，如h1、h2…… })
//— $(function(){ animateIt(); //增加動畫效果元素類別 $(“#spnMove:animated”).addClass(“GetFocus”); }) function animateIt() { //動畫效果 $(“#spnMove”).slideToggle(“slow”, animateIt); } //— </script> </head> <body> <div> <h1>基本过滤选择器</h1> <ul> <li class=”DefClass”>Item 0</li> <li class=”DefClass”>Item 1</li> <li class=”NotClass”>Item 2</li> <li class=”DefClass”>Item 3</li> </ul> <span id=”spnMove”>Span Move</span> </div> </body> </html> |
◆內容過濾選擇器
◆可見性過濾選擇器
◆屬性過濾選擇器
◆子元素過濾選擇器
◆表單物件屬性過濾選擇器
■表單選擇器