jQuery選擇器測試與範例

由 · 發表於: · 更新於: | 瀏覽數: 1 / 21099

標籤：

為了熟悉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']"

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

##

您可能也會有興趣的類似文章

簡睿

服務於軟體業的資訊老兵。興趣廣泛，學習力佳，樂於分享所知所學。

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *