如何用jQuery的.reset()方法重置一个表单
重置可以使任何东西恢复到它的原始状态。JQuery没有reset()方法,但本地JavaScript有。因此,我们把jQuery元素转换成一个JavaScript对象。
JavaScript reset():reset()方法重置表单中所有元素的值(与点击重置按钮一样)。
JavaScript重置按钮的语法。
// type-1
<input type="reset">
// type-2
<input type="button" onclick="this.form.reset();">
// type-3
<input type="button" onclick="formname.reset();">
按钮本身会重置表单,但是,类型1和类型2,重置按钮应该在表单内部,类型3可以在外部或内部。
但重置按钮是一个更好的选择。(类型-1)
<input type="reset">
- reset()的语法。
formObject.reset()
- 将jQuery元素转换为JavaScript对象的语法。
$(selector)[0].reset()
或者,
$(selector).get(0).reset()
如果我们不想将jQuery元素转换为JavaScript对象,那么我们可以使用 trigger() 。
由于 trigger() 方法触发了指定的事件和所选元素的事件的默认行为(如表单提交)。
语法
$(selector).trigger(event, eventObj, ...)
示例:
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
(document).ready(function() {
("button").click(function() {
//("#d").trigger("reset");
//("#d").get(0).reset();
$("#d")[0].reset()
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h4>
Click on "Submit" to submit and
remaining resets to get form to original state.
</h4>
<form id="d" action="/cgi-bin/test.cgi" name="geek">
<table cellspacing="0" cellpadding="3" border="1">
<tr>
<td align="center">Username</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td align="center">Email</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td align="center">Password</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td align="center"></td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
<tr>
<td align="center"></td>
<td>
<input type="reset" value="reset button" />
</td>
</tr>
</table>
</form>
<br>
<input type="button"
value="reset() outside form"
onclick="geek.reset();" />
<button>resetby jQuery
</center>
</body>
</html>
jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。