jQuery選擇器測試與範例

出處:http://blog.roodo.com/emisjerry/archives/4211415.html

為了熟悉jQuery選擇器的使用，特別寫了一個測試網頁，以下是功能備忘。

在表單 FORM1 裡放入姓名、住址、電話等資料項目，項目形式有Text、Button、Select、TextArea等多種，再用幾個功能按鈕執行不同的過濾字串，最後把符合的項目ID顯示在網頁下方。

1. 項目要放在一個有序清單(Ordered List, ol)裡，因此用 $("
   ") 建立新的要素(等同於 document.createElement("ol") 。為方便後續操作使用此要素，將之存入變數$result。
   • jQuery的命名慣例：jQuery的物件變數都以 $ 符號開頭，如上例中的$result就是一個jQuery物件。
2. 清除jQuery物件的內容可使用remove() method，$result.remove( )，在執行操作前要把$result內容先清空，否則會讓清單越加越長。
3. $result.append("HTML內容")會把字串附加到$result裡面。
4. 針對表單FORM1操作的選擇器寫法：

序	操作功能	選擇器	說明
1	找出所有項目	$("#FORM1 :input")	包含input、select、textarea、button等
2	找出type='text'的項目	$("#FORM1 :text") | | | 3 |找出type='hidden'的項目 |{{{$("#FORM1 input[@type='hidden']")	:hidden是被隱藏的項目而不是Hidden類型的[input]項目，因此必須用指定屬性的寫法
4	列出type='hidden'且有title屬性之項目	$("#FORM1 input[@type='hidden'][@title]")	兩個條件都成立的項目才會被選到
5	ID有2之項目	$("FORM1 input[@id*='2']")	開頭^、結尾$、含有*，這幾個符號和正規運算式相同，很好記憶
6	ID以DUM開頭之項目	$("FORM1 input[@id^='DUM']"

完整的程式請參考，檢視原始檔即可：

• http://emisjerry.googlepages.com/selector1.html