首頁 > 開發者 > JavaScript
標籤：logs 多個 例子 nim ast sbo 可見度 alt res
選取器（JQuery Selector）
JQuery是一個JavaScript庫，它極大地簡化了JavaScript編程。整個JQuery庫的方法都在$這個工廠函數裡，我們只需要執行個體化$對象，提供作為參數的選取器就可以很輕易的擷取DOM元素的數組表示。
選取器
基本選取器
通過標籤名、ID、類名擷取元素。
標籤選擇：$ ( ‘p‘ )
選擇所有P元素。
ID選擇：$ ( ‘#box‘ )
選擇ID為box的元素。
類名選擇：$ ( ‘.box‘ )
選擇類名為box的元素。
限定選擇：$(div#box)
選擇ID為box的div元素。
所有選擇：$(‘*‘)
選擇所有元素。
<body> <div id="box">flikr</div> <div class="classBox">google</div> <div>microsoft</div> <script> $(document).ready(function () { alert($("#box")[0].id); alert($(".classBox")[0].className); alert($("div")[2].textContent); }); </script></body>
基本選取器組合
基本選取器可搭配組合，每個選擇中間用逗號隔開。
$(‘div#box‘)
選擇ID為box的div元素。
$(‘span.box‘)
選擇類名為box的span元素。
$(‘div,span,p.box‘)
選擇div、span和類名為box的p元素。
層次選取器
通過DOM的層次關係來選擇元素。
同級選擇：$(‘div+span‘)、$(‘div~span‘)
+號表示緊靠該元素的同級元素，~號表示所有該元素的同級元素。
$("div+span")//選擇緊靠div元素後的同級span元素，其實就是選擇div後的那個元素，只不過你得顯示說明該元素是什麼元素。$("div+span+p")//選擇緊靠div元素後的兄弟span元素後的兄弟p元素$("div~span")//選擇div元素後的所有同級span元素
後代選擇：$(‘div span‘)
選擇div包含的所有後代span元素。不能寫成$(‘div ‘)，這隻會返回div。
過濾選取器
過濾器的文法格式與css偽類類似，它需要你指定一個條件從而篩選出合格元素。過濾選取器使用:號和[]號指定過濾規則。首先必須有基本選取器，表示選擇xx，接著在過濾器的條件裡篩選出需要的元素，注意以下的A表示基本選取器。
順序過濾
$(‘A:first‘)
選擇A，過濾出第一個A。
$(‘A空格:first‘)
選擇A的所後代元素，過濾出第一個子項目。
其它類似過濾
:last（過濾出最後一個元素）、空格:last（過濾出子項目中的最後一個）、first（過濾出第一個元素）、空格:first（過濾出子項目中的第一個元素）、:animated（過濾出正在執行動畫的元素）、空格:animated（過濾出正在執行動畫的子項目）。
內容過濾
$(‘A:empty‘)
選擇A，過濾出不包含任何子項目的A。
$(‘A空格:empty‘)
選擇A所有的子項目，過濾出不包含任何子項目的元素。
其它類似過濾
$(‘A:parent‘)（過濾出擁有後代元素的A）、$(‘A:has(text)‘)（過濾出類名或ID名是text的A）、$(‘A:not()‘)（過濾出類名或ID名不是text的A）、$(‘A:contains(‘text‘)‘)（選擇A，過濾出包含text文本的層級元素（如果子項目包含文本，將視其上層也包含相同的文本，它們會一併被擷取））。
索引過濾
$(‘A:eq(index)‘)
選擇A，過濾出指定索引的A。
其它類似過濾
$(‘A:odd‘)（過濾出索引是奇數的A）、$(‘A:even‘)（過濾出索引是偶數的A）、$(‘A:gt(數字)‘)（過濾出索引<數位A）、$(‘A:gt(數字)‘)（過濾出索引>數位A）。
可見度過濾
隱藏元素包括display為none的元素和屬性為hidden的元素，如input的type=hidden的元素。
$(‘:visible‘)
選擇所有元素，過濾出可見元素。
$(‘A:visible‘)
選擇A，過濾出可見的A元素。
其它類似過濾
$(‘:hidden‘)（過濾出所有隱藏元素）
屬性過濾
$(‘A[id]‘)
選擇A，擁有id屬性的div元素。
$(‘A[id!=idName]‘)
選擇A，過濾出id不是idName或沒有id的A元素。
其它類似過濾
$(‘div[class^=text]‘)（過濾出類名是以text開頭的A元素）、$("A[class$=c]")、（過濾出類名是以text結尾的A元素）、$(‘div[class*=text]‘)（過濾出類名包含了text字元的div元素）。
屬性過濾組合
組合多個屬性過濾器，相當於&&。
$(‘div[id][id!=box]‘)
選擇div，過濾出擁有id屬性並且id名不是box的div元素。
後代元素過濾
$(‘:nth-child(n)‘)
選擇所有元素，但他們必須是其父元素中的第n個子項目。n從1開始。
$(‘A:nth-child(n)‘)
選擇A元素，A元素必須是其父元素中的第n個子項目，n從1開始。
$(‘A:nth-child(even)‘)
選擇A元素，A元素必須是其父元素中的索引為偶數的子項目。
$(‘A:nth-child(odd)‘)
選擇A元素，父元素中的索引為奇數的子項目。
$(‘A:nth-child(數字n)‘)
選擇A元素，A元素必須是其父元素下索引是數位n倍的子項目 ，n從0開始自動與數字相乘。
例子：選擇第3、6、9個子項目：
$(‘A:nth-child(數字n+1) ‘)
選擇A，A元素必須是其父元素下索引是數位n倍+1的子項目 ，n從0開始自動與數字相乘。
$(‘A:first-child‘)
選擇A，A元素必須是其父元素的第一個子項目。
$(‘A空格:first-child‘)
選擇A的後代元素，後代元素只要是其父元素的第一個子項目都會被擷取到。
$(‘A:last-child‘)
選擇A，A元素必須是其父元素的最後一個子項目。
$(‘A空格:last-child‘)
選擇A的後代元素，後代元素只要是其父元素的最後一個子項目都會被擷取到。
表單屬性過濾
$(‘:enabled‘)
選擇所有元素，同時必須是未被禁用的元素
其它類似過濾
$(‘:disabled‘)（過濾出被禁用的元素）、 $(‘:checked‘)（過濾出被選中的複選框元素）、$(‘:selected‘)（過濾出被選中的下拉框元素）。
表單元素過濾
$(‘:radio‘)
過濾出所有單選框元素。
$(‘:file‘)
過濾出所有的上傳域元素。
$(‘:reset‘)
過濾出所有重設按鈕元素。
$(‘:text‘)
過濾出所有單行文字框元素。
$(‘:image‘)
過濾出所有映像按鈕元素。
$(‘:submit‘)
過濾出所有提交按鈕元素。
$(‘:checkbox‘)
過濾出所有複選框元素。
$(‘:hidden‘)
過濾出所有表單隱藏元素
$(‘:password‘)
過濾出所有密碼文字框元素。
$(‘:input‘)
過濾出所有input、textarea、select、button元素。
附：如果一個頁面中不但引用了jquery.js 還引用了有可能引發衝突的其它js指令碼 可如下設定
//使用一個變數替代$即可var jq = $.noConflict();
Javascript - 學習總目錄
Javascript - Jquery選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
