<< jQuery神奇的選擇器(Selector) | 回blog首頁 | 網路廣告市場高度集中 Google最大贏家 >>

2007年09月29日

jQuery選擇器測試與範例

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

在表單 FORM1 裡放入姓名、住址、電話等資料項目，項目形式有Text、Button、Select、TextArea等多種，再用幾個功能按鈕執行不同的過濾字串，最後把符合的項目ID顯示在網頁下方。
  1. 項目要放在一個有序清單(Ordered List, ol)裡，因此用 $("<ol></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]") 兩個條件都成立的項目才會被選到
5ID有2之項目$("FORM1 input[@id*='2']")開頭^、結尾$、含有*，這幾個符號和正規運算式相同，很好記憶
6ID以DUM開頭之項目$("FORM1 input[@id^='DUM']" 

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


Posted by emisjerry at 樂多Roodo! │23:22 │回應(0) │引用(0) │JavaScript
樂多分類：網路/3C 共同主題：Programing 工具：編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/4211415
  


回最上方