jQuery如何清空表單元素的內容
如果一個form表單下的表單元素較多,想要清空所有的表單元素的值,那麼會較為費時費力。
下面就通過程式碼例項介紹一下如何利用jQuery實現快速清空表單元素值功能。
千萬不要認為reset按鈕可以清空表單元素之,具體可以參閱表單reset重置按鈕的作用並非是清空表單一章節。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> ul li{ list-style:none; height:30px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("#bt").click(function(){ $(':input') .not(':button,:submit,:reset,:hidden') .val('') .removeAttr('checked') .removeAttr('selected'); }) }) </script> </head> <body> <form> <ul> <li>姓名:<input type="text"/></li> <li>地址:<input type="text" value="山東省青島市"/></li> <li> <input type="submit" value="提交"/> <input type="button" id="bt" value="清空"/> </li> </ul> </form> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
1.$(document).ready(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
2.$("#bt").click(function(){}),位按鈕註冊click事件處理函式。
3.$(':input'),匹配input元素。
4.not(':button,:submit,:reset,:hidden'),去掉普通按鈕、提交按鈕、重置按鈕和隱藏按鈕,這種控制元件的值不會被清空。
5.val(''),將value值設定為空。
6.removeAttr('checked'),移除checked屬性,也就是取消選中效果。
7.removeAttr('selected'),移除下拉選單的選中效果。
二.相關閱讀:
1.not()可以參閱jQuery not()一章節。
2.removeAttr()可以參閱jQuery removeAttr()一章節。
相關文章
- 使用jquery清空指定元素中的所有內容jQuery
- javascript實現的清空表單元素內容程式碼例項JavaScript
- 使用jquery實現的清空表單元素程式碼例項jQuery
- commit時表內容清空MIT
- Jquery如何獲取和設定元素內容?jQuery
- jquery獲取具有指定內容的元素jQuery
- 表單元素文字內容選中事件onselect事件
- jquery如何在元素內追加新的元素jQuery
- jQuery元素內容操作的方法有多少種?jQuery
- jquery實現的設定指定元素的文字內容和html內容jQueryHTML
- JQuery中判斷元素中是否有內容jQuery
- 利用jquery實現的向指定元素追加指定內容jQuery
- jQuery實現的將指定元素中的內容替換jQuery
- 使用javascript清空表單元素資料程式碼例項JavaScript
- jquery驗證元素內容是否為空程式碼jQuery
- jQuery捕獲-獲取DOM元素內容和屬性jQuery
- jquery cheerio 獲取元素文字內容,不包括後代jQuery
- jQuery reset重置表單元素預設值jQuery
- document.write() 清空覆蓋內容
- Git清空VIM編輯器內容Git
- Linux下清空檔案內容的方法Linux
- jQuery獲取元素內部元素和獲取內容的區別、獲得輸入框value的方法jQuery
- js如何動態為指定的元素新增內容JS
- 如何使用python指令碼定時清空檔案內容?Python指令碼
- JavaScript清空陣列元素簡單方法JavaScript陣列
- js如何將陣列中的元素清空JS陣列
- jQuery利用name屬性獲取表單元素jQuery
- java檔案相關(檔案追加內容、檔案內容清空、檔案內容讀取)Java
- jQuery Mobile修改button的內容jQuery
- React table 表單裡的內容點選事件React事件
- 如何判斷一個元素沒有任何內容
- js如何控制css偽元素內容(before,after)JSCSS
- 表單reset重置按鈕的作用並非是清空表單
- jQuery序列化表單時將制定元素排除在外jQuery
- jQuery選擇器——表單元素過濾選擇器jQuery
- mysql 如何替換資料表欄位字串中指定單詞的內容MySql字串
- jQuery 表單的操作jQuery
- jQuery如何獲取當前元素的兄弟元素jQuery