[JQuery] 真正意义上清空表单内容

JQuery :not() 选择器

定义与用法:

:not() 选择器选取除了指定元素以外的所有元素。

最常见的用法:与其他选择器一起使用,选取指定组合中除了指定元素以外的所有元素。

参考代码:

		<script>
			$(function() {
				$("p:not(#p1)").css("color", "red"); //写法一
				$("p").not("#p1").css("color", "red"); //写法二
			})
		</script>

		<p id="p1">Hello</p>
		<p id="p2">Hello Again</p>

执行结果:

HTML DOM reset() 方法或是 <input type="reset"> 元素

参考代码:

		<script>
			$(function() {
				$("#form1 :input").val("value");
			})
		</script>

		<form id="form1">
			<input type="text" value="text" />
			<input type="reset" value="reset" />
		</form>

点击重置按钮前:

点击重置按钮后:

得出结论:HTML DOM reset() 方法或是 <input type="reset"> 元素的真正作用并不是“清空” <input> 元素中的 value值,而是“重置”还原 <input> 元素中的原本的 value 值。值得注意的是,reset 不能重置按钮类型元素(type=button,reset,submit)的 value 值。

真正清空 form 表单中的内容(JQuery)

参考代码:

		<script>
			$(function() {
				$("#button").click(function() {
					$("#form :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected");//核心
				});
			})
		</script>

		<form id="form">
			<input type="radio" checked="checked" />
			<input type="checkbox" checked="checked" />
			<select>
				<option>option1</option>
				<option selected="selected">option2</option>
			</select>
			<input type="text" value="text" />

			<input type="hidden" value="hidden" />
			<input type="button" value="button" />
			<input type="reset" value="reset" />
			<input type="submit" value="submit" />
		</form>

		<button id="button">真正清空</button>

点击“id=button”的按钮前:

点击"id=button"的按钮后:

时间: 2024-10-22 22:09:04

[JQuery] 真正意义上清空表单内容的相关文章

【jQuery】清空表单内容

1 function resertForm(){ 2 $(':input','#formId') 3 .not(':button, :submit, :reset, :hidden') 4 .val('') 5 .removeAttr('checked') 6 .removeAttr('selected'); 7 }

使用jquery实现的清空表单元素代码实例

使用jquery实现的清空表单元素代码实例:如果表单的元素较多的话,如果想情况以前填写的内容可能有点耗费体力,不够人性化,下面就介绍一下如何利用jquery代码实现快捷清除表单元素内容的功能,先看一段代码实例: $('#theform')[0].reset(); 很朋友可能认为上面的代码就完全实现我们的要求,其实这是错误的,reset()函数是重置的意思,也就是将表单元素的值重置为默认值而不是清空,如下面的文本框: <input type="text" value="蚂

jQuery对表单、表格的操作及更多应用(上:表单应用)

内容摘录自锋利的JQuery一书 一.表单应用 1 获取和失去焦点改变样式(P142) $(function(){$(":input").focus(function(){ //获取焦点触发事件$(this).addClass("focus"); //增加样式}).blur(function(){ //失去焦点触发事件$(this).removeClass("focus"); //移除样式});}) 2 多行文本框触发事件改变文本框高度(P144

jquery.form.js(ajax表单提交)

Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started 一.准备工作 写一个表单: <form id="reg" action="123.php" method="post"> <p> <label for

jQuery学习之:Validation表单验证插件

http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每个人都能够有所掌握,慢慢会用.于是,自己便开始学习…… 由于Struts2自己早就学过,因而不需要花多少时间.而AJAX之前没怎么用过.现在AJAX框架如此之多,选择哪一个呢?开始打算选择 dojo,但是看了一点后,发现蛮复杂的.在之前有学过一点点jQuery,而网上也说jQuery很强大而且很容易

【Flask】 结合wtforms的文件上传表单

表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的.因为看到了一篇很好的文章[https://zhuanlan.zhihu.com/p/23731819?refer=flask],所以我决定仔细学习一下.下面将按照那篇文章的脉络,由简至繁地说明表单中文件上传的办法. ■ 利用Flask原生的机制进行文件上传 首先在前端肯定有一个带有文件上传功能的表单

使用jQuery实现跨域提交表单数据

我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务器端应当在JSON数据前加上回调函数名,以便

jquery的attr方法禁用表单元素

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

PHP 文件上传表单 ~~学习笔记

PHP文件上传 通过PHP,可以把文件上传到服务器. ------------------------------------------------------------------------------------------------------------------- 创建一个文件上传表单:允许用户从表单上传文件时非常有用的: 下面是一个供上传文件的html表单: <html> <body> <form action="upload_file.php