jQuery自定义插件之获取form表单数据
更多jQuery常用插件使用请访问：jQuery常用插件汇总
jQuery自定义插件之获取form表单数据是网页中最常见不过的插件了，所以写一个自用的插件，偷懒一下。
上源码，想用的直接复制走，保存在一个js文件即可使用。
效果插件源码
/*
* @Author: JiaoShou
* @Date: 2020-07-09 16:46:11
* @Last Modified by: JiaoShou
* @Last Modified time: 2020-07-09 16:46:11
*/
;(function(window,$,undefined){
$.fn.extend({
/**
* 获取表单数据
* 可通过设置相同发class名称，使用此封装方法，批量获取form表单里面的值
* 表单元素必须要有name属性，name属性是向后端提交的字段数据。
* @param {object} option 可选参数,暂无使用
*/
'getparameter': function(option){
var defaults = {
},
result = {}, //返回结果对象形式
opts = $.extend({}, defaults, option);
this.each(function (index, item) {
var getparameter = {
$el: $(this), //当前循环对象
$item: item, //当前循环对象
defaults: defaults, //插件默认值
result: result,
// 初始化
'init': function(){
// 调用判断类型方法
this.itemType();
},
// 判断类型
'itemType':function(){
var _this = this;
switch (this.$el[0].type) {
case 'text':
case 'password':
case 'select-one':
case 'tel':
case 'search':
case 'range':
case 'number':
case 'month':
case 'email':
case 'datetime-local':
case 'datetime':
case 'date':
case 'color':
_this.result[_this.$el.attr('name')] = $.trim(_this.$el.val());
break;
case 'checkbox':
// 获取到复选框选中的元素
var checkboxEl=$("input[name="+_this.$el.attr('name')+"]:checked");
if(checkboxEl){
var checkboxArr=[];
var strVal = '';
// 取出复选框选中的值
checkboxEl.each(function(idx,itm){
checkboxArr.push($(itm).val());
});
_this.result[_this.$el.attr('name')] = checkboxArr.join(',');
}
break;
case 'radio':
// 获取到单选框选中的值,碰到radio直接获取val即可
var radio_val=$("input[name="+_this.$el.attr('name')+"]:checked").val();
if(radio_val){
_this.result[_this.$el.attr('name')] = radio_val;
}
break;
default:
break;
}
}
};
// 初始化插件
getparameter.init();
});
return result;
}
});
})(window,jQuery);
案例html布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>较瘦 - 博客园</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
float: left;
}
label{
display: block;
}
</style>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/jquery.getparameter.js"></script>
</head>
<body>
<h3>下拉框</h3>
<select name="sel" id="sel" class="query">
<option value ="sel-1">sel-1</option>
<option value ="sel-2">sel-2</option>
</select>
<h3>输入框</h3>
<input type="text" name="text1" class="query" value=" hello " />
<input type="text" name="text2" class="query" value=" word " />
<h3>密码框</h3>
<input type="password" name="password" class="query" value=" 123456 " />
<h3>单选框</h3>
单选1<input type="radio" name="radio" class="query" value="r1" />
单选2<input type="radio" name="radio" class="query" value="r2" checked/>
单选3<input type="radio" name="radio" class="query" value="r3" />
<h3>复选框</h3>
复选框1<input type="checkbox" name="check" id="" class="query" value="c1" checked/>
复选框2<input type="checkbox" name="check" id="" class="query" value="c2" />
复选框3<input type="checkbox" name="check" id="" class="query" value="c3" checked/>
<h3>search</h3>
<input type="range" name="range" id="" class="query" value="" />
<input type="color" name="color" id="" class="query" value="" />
<h3>
<button type="button" id="save">
提交
</button>
</h3>
</body>
<script>
$(function () {
// 调用方法
$("#save").click(function(){
var parameter=$(".query").getparameter();
console.log(111,parameter);
});
});
</script>
</html>
插件使用方法
在页面中引入jquery和jquery.getparameter.js文件(根据项目目录引入必要文件)。
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.getparameter.js"></script>
HTML结构
没有特殊结构，可以获取到元素即可。
初始化插件
在页面DOM元素加载完毕之后，通过getparameter()方法来初始化该插件。
$(function(){
// 调用方法
$("#save").click(function(){
var parameter=$(".query").getparameter();
console.log(parameter);
});
});
插件配置参数
暂无特殊参数
