2007/09/29 | 
分類： 
為了熟悉jQuery選擇器的使用，特別寫了一個測試網頁，以下是功能備忘。
在表單 FORM1 裡放入姓名、住址、電話等資料項目，項目形式有Text、Button、Select、TextArea等多種，再用幾個功能按鈕執行不同的過濾字串，最後把符合的項目ID顯示在網頁下方。
- 項目要放在一個有序清單(Ordered List, ol)裡，因此用 $("") 建立新的要素(等同於 document.createElement("ol") 。為方便後續操作使用此要素，將之存入變數$result。
- jQuery的命名慣例：jQuery的物件變數都以 $ 符號開頭，如上例中的$result就是一個jQuery物件。
- 清除jQuery物件的內容可使用remove() method，$result.remove( )，在執行操作前要把$result內容先清空，否則會讓清單越加越長。
- $result.append("HTML內容")會把字串附加到$result裡面。
- 針對表單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']" |
完整的程式請參考，檢視原始檔即可：
##
您可能也會有興趣的類似文章
- jQuery神奇的選擇器(Selector) (2則留言, 2007/09/28)
- 使用jQuery的效益 (0則留言, 2007/09/23)
- jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
- 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
- FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
- 在Xuite測試 jQuery (0則留言, 2007/09/12)
- 第一個jqGrid範例：Local array (1則留言, 2010/02/13)
- 方便查閱的jQuery 1.2 Cheat Sheet (1則留言, 2007/09/25)
- jQuery TreeView插件IE異常解決方法 (0則留言, 2007/11/13)
- 替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
- 第3個jqGrid範例: XML與XML STRING格式 (0則留言, 2010/02/14)
- 在Xuite裡使用jQuery的重點 (0則留言, 2007/09/22)
- 網頁程式碼美化程式 Google Code Prettify (0則留言, 2007/05/27)
- AutoHotkey與Google+ Commander合用－以滑鼠移動訊息位置 (0則留言, 2011/10/31)
- 使用TiddlyWiki彙總部落格文章的方法與心得 (4則留言, 2007/12/01)
標籤：
Loading ...
最新留言