jQuery - Selectors (8) Form - 表單選擇器

jQuery表單選擇器簡介

表單(form)為網頁與使用者互動最主要的元素，而表單選擇器可讓我們可以得知目前表單的狀態，進而進行相關處理。

jQuery表單選擇器速查表

jQuery表單選擇器

選擇器	說明	範例
:button	選擇button元素和type="button"的input元素	$(':button')
:checkbox	選擇type="checkbox"的input元素	$(':checkbox')
:checked	選擇已勾選(checkbox)或已選擇(radio)的input元素	$(':checked')
:disabled	選擇設定disabled屬性的input元素	$(':disabled')
:enabled	選擇未設定disabled屬性的input元素	$(':enabled')
:focus	選擇目前焦點所在的元素，注意，不限於input元素	$(':focus')
:file	選擇type="file"屬性的input元素	$(':file')
:image	選擇type="image"屬性的input元素	$(':image')
:input	選擇input、textarea、select、button元素	$(':input')
:password	選擇type="password"屬性的input元素	$(':password')
:radio	選擇type="radio"屬性的input元素	$(':radio')
:reset	選擇type="reset"屬性的input元素	$(':reset')
:selected	選擇所有option元素裡被選擇項目	$(':selected')
:submit	選擇button元素與type="submit"屬性的input元素	$(':submit')
:text	選擇type="text"屬性的input元素	$(':text')

jQuery - Selectors (6) Child Filter - 後代過濾器

jQuery後代過濾器簡介

由名稱來看，可以很容易了解此過濾器主要是處理一些後代元素選擇動作。我們在基礎過濾器(Basic Filters)中介紹過:even與:odd，這兩個過濾器常使用於表格的處理，但如果今天我們以三的倍數來計算呢？例如，第3,6,9…行進行處理呢？怎麼做？

jQuery後代過濾器速查表

jQuery後代過濾器

過濾器	說明	範例
:first-child	選擇所有父元素下的第一個子元素	$(':first-child')
:last-child	選擇所有父元素下的最後一個子元素	$(':last-child')
:nth-child(index/even/odd/equation)	選擇元素集合裡第幾個指定的子元素	$(':nth-child(1)')
:only-child	選擇所有父元素下只有一個子元素	$(':only-child')

基本動作有第一個後代元素，最後一個後代元素，只有一個後代元素，n倍數的後代元素，比較難懂的只:nth-child這一個後代過濾器。

jQuery - Selectors (5) Attribute - 屬性過濾器

jQuery屬性過濾器簡介

屬性過濾器針對HTML元素裡的屬性及屬性值來進行過濾與選擇的動作。例如，<a href="http://blog.kkbruce.net">KKBruce Blog</a>，我一天我想幫整個網站裡的連結加上target屬性，怎麼加？打開編輯器，一頁一頁慢慢看慢慢加？用搜尋目錄來取代？

jQuery屬性過濾器速查表

jQuery屬性過濾器

過濾器	說明	範例
[name|="value"]	選擇指定屬性等於字串值或以該字串為前綴的值(以字串後跟著一個連字符號"-")的元素。 這個過濾器是引入CSS規範來處理語言屬性。	$('[attribute|=value]')
[name*="value"]	選擇指定屬性包含特定字串值，不論在字串中的位置。	$('[attribute*=value]')
[name~="value"]	選擇指定屬性包含特定字串值，字串用空格分隔。	$('[attribute~=value]')
[name$="value"]	選擇指定屬性的字串是以字串值結尾。 這個比較區分大小寫。	$('[attribute$=value]')
[name="value"]	選擇指定屬性的字串等於字串值。	$('[attribute=value]')
[name!="value"]	選擇沒有指定屬性的元素，或指定屬性的字串不等於字串值。	$('[attribute!=value]')
[name^="value"]	選擇指定屬性的字串是以字串值開頭。	$('[attribute^=value]')
[name]	選擇所有具有指定屬性的元素，該屬性的字串可以是任何值。	$('[attribute]')
[name="value"][name2="value2"]	選擇符合所有指定屬性過濾器的元素	$('[attribute1=value1][attribute2=value2]')

attribute是一個屬性名稱，value是一個字串值，字串值的單雙引號(""或'')是選擇性，例如，$('[attribute|=value]')或$('[attribute|="value"]')都是正確的。

jQuery - Selectors (7) Visibility Filter - 能見度過濾器

jQuery能見度過濾器簡介

網頁中並不是所有元素都是可見的(或顯示出來的)，例如，<script>、<style>，有一些是刻意隱藏起來的，當我們想要找出被隱藏的元素或目前UI上顯示的元素，就可以使用能見度過濾器來進行過濾選擇。

jQuery能見度過濾器速查表

jQuery能見度過濾器

過濾器	說明	範例
:hidden	選擇所有隱藏的元素	$(':hidden')
:visible	選擇所有可見的元素	$(':visible')

jQuery - Selectors (4) Content Filters - 內容過濾器

jQuery內容過濾器簡介

內容過濾器作用在找出元素內是否含有內容或關係，以產生所需要集合元素。

jQuery內容過濾器速查表

jQuery 內容過濾器

過濾器	說明	範例
:contains(text)	選擇包含指定文字(text)的元素。	$(':contains(text)')
:empty	選擇沒有子元素的元素(包含文字節點)。	$(':empty')
:has(selector)	選擇包含有selector的selector。	$(':has(selector)')
:parent	選擇包有父子元素的元素(包含文字節點)。	$(':parent')

:empty與:parent可以說是相反關係，:empty要沒有子元素，:parent要有父元素。而:has()的描述比較繞舌，看下面實例比較好理解。