[jQuery 權威指南（第二版）]閱讀筆記-jQuery 選擇器[基本選擇器語法]
[jQuery 權威指南（第二版）]閱讀筆記-jQuery 選擇器[基本選擇器語法]
資料來源:http://www.java1234.com/a/javaziliao/shuji/2014/1206/3343.html
根據所獲取頁面中元素的不同，可以將jQuery 選擇器分為四大類：
■基本選擇器
基本選擇器語法
|
選擇器 |
功能描述 |
返回值 |
|
#id |
根據給定的ID 匹配一個元素 |
單個元素 |
|
element |
根據給定的元素名匹配所有元素 |
元素集合 |
|
.class |
根據給定的類匹配元素 |
元素集合 |
|
* |
匹配所有元素 |
元素集合 |
|
selector1,selectorN |
將每一個選擇器匹配到的元素合併後一起返回 |
元素集合
|
Ps 「逗號」隔開表示個別元素，「空格」隔開表示階層關係
範例2-5：
|
<!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;讓元件可以橫向擺放
■層次選擇器
■過濾選擇器
◆簡單過濾選擇器
◆內容過濾選擇器
◆可見性過濾選擇器
◆屬性過濾選擇器
◆子元素過濾選擇器
◆表單物件屬性過濾選擇器
■表單選擇器