一些工作中常用到的代码(二)
jQuery操作单选、复选框选中状态
工作中时常会遇到使用 jQuery 操作选中、取消选中状态,之前是通过添加和移除 checked
属性来操作的,但是这种方法会在判断选中状态时会出现不一致的问题。使用如下方法就不会有什么问题(与第一次的内容有点重复)。
//修改选中状态
$('input[type=checkbox],input[type=radio]').prop('checked',true);//选中
$('input[type=checkbox],input[type=radio]').prop('checked',false);//取消选中
//判断是否选中
$('input[type=checkbox],input[type=radio]').prop('checked');
使用FormData对象异步传输 form 表单数据
我们工作中有时候会遇到表单需要用 Ajax 的方式传输,但是如果遇到表单元素数量比较多的情况,获取表单的数据内容会占据大量的时间,而 formData
可以将表单中的数据像提交表单那样将表单中的数据“打包”,然后通过 Ajax 传输。
<form id="uploadForm" enctype="multipart/form-data">
<!-- code... -->
</form>
<script>
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {
});
</script>
注意点
processData
设置为false
。因为data
值是FormData
对象,不需要对数据做处理。form
标签添加enctype="multipart/form-data"
属性。cache
设置为false
,上传文件不需要缓存。contentType
设置为false
。因为是由form
表单构造的FormData
对象,且已经声明了属性enctype="multipart/form-data"
,所以这里设置为false
。
使网页文字无法被选中
给 html 标签加上 onselectstart="return false"
就可以实现
<body onselectstart="return false">
</body>
不让 input 输入框显示历史输入记录
<input type="text" autocomplete="off" />
layDate日期插件,样式发生错位
layDate日期插件在与 bootstrap 一起使用的时候,layDate的日期选择框按钮会发生错位的现象,在layDate的 css 文件中加入一下几行样式可解决:
.laydate_box, .laydate_box * {
box-sizing:content-box;
}
代码触发 change 事件
有些时候,我们希望用代码触发change事件,可以直接调用无参数的 change()
方法来触发该事件。