2007年12月6日 星期四

jQuery選擇器測試與範例

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

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

在表單 FORM1 裡放入姓名、住址、電話等資料項目,項目形式有TextButtonSelectTextArea等多種,再用幾個功能按鈕執行不同的過濾字串,最後把符合的項目ID顯示在網頁下方。
  1. 項目要放在一個有序清單(Ordered List, ol)裡,因此用 $("
      ") 建立新的要素(等同於 document.createElement("ol") 。為方便後續操作使用此要素,將之存入變數$result。
      • jQuery的命名慣例:jQuery的物件變數都以 $ 符號開頭,如上例中的$result就是一個jQuery物件。
    1. 清除jQuery物件的內容可使用remove() method,$result.remove( ),在執行操作前要把$result內容先清空,否則會讓清單越加越長。
    2. $result.append("HTML內容")會把字串附加到$result裡面。
    3. 針對表單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']"

    完整的程式請參考,檢視原始檔即可:

    【下列文章您可能也有興趣】

    沒有留言: