jQuery是一個受歡迎的JavaScript框架,能夠簡化HTML文檔遍歷、事件處理、動畫設計和Ajax交互。其中,jQuery選擇器是它最重要的特性之一,可以根據元素ID、類名、標簽名、屬性值、父子元素關系等方式來選擇網頁元素。
//選擇元素 $('#myId') //通過元素ID選擇 $('.myClass') //通過類名選擇 $('input[name=myName]') //通過屬性名和屬性值選擇 $('p:first') //選擇第一個p元素 $('ul li') //選擇所有ul子元素的li元素 //選擇表單元素 $(':input') //選擇所有表單控件(input, select, textarea等) $('form :input') //選擇表單內的所有控件 $('form :text') //選擇表單內的文本框 $('form :checkbox') //選擇表單內的復選框 $('form :radio') //選擇表單內的單選框 $('form :submit') //選擇表單內的提交按鈕 $('form :image') //選擇表單內的圖片提交按鈕 $('form :reset') //選擇表單內的重置按鈕 $('form :button') //選擇表單內的普通按鈕
表單驗證是網頁開發中的常見需求。使用jQuery選擇器可以方便地選取需要驗證的表單元素。例如,要驗證文本框中輸入的數據是否為數字,可以用以下代碼:
//驗證數字 $('form :text').keyup(function(){ if(isNaN($(this).val())){ $(this).val(''); alert('請輸入數字'); } });
上面的代碼對表單內所有文本框綁定了keyup事件,當輸入非數字字符時,清空文本框內容,并彈出提示框。類似地,可通過jQuery選擇器和事件綁定來實現表單驗證的各種需求。