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"的按钮后:
后续补充:
今天做项目又要清空 form 数据,遇到一个小问题,解决了很久才找到原因,发现上述代码还是有缺陷的。
我在前台需要清空 form value 数据,后台需要取一个 checkbox value 值,如果使用上面的代码就会出现后台取到的 checkbox value 值为空的情况。
所以在这里改进一下上面的代码,做到既能满足前台能移除 checkbox checked 属性,又能保留 checkbox value 值,radio 元素也一样:
$("#form :input").not(":button, :submit, :reset, :hidden, :checkbox, :radio").val("");
$("#form :input").removeAttr("checked").remove("selected");