jQuery自定义插件之获取form表单数据

更多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布局

  
下拉框
    
        sel-1
        sel-2
    
    
输入框
    
    
    
密码框
    
    
单选框
    单选1
    单选2
    单选3
     
复选框
    复选框1
    复选框2
    复选框3
    
search
    
    
    

        
            提交
        
    

插件使用方法

在页面中引入jquery和jquery.getparameter.js文件(根据项目目录引入必要文件)。

HTML结构

没有特殊结构，可以获取到元素即可。

初始化插件

在页面DOM元素加载完毕之后，通过getparameter()方法来初始化该插件。

$(function(){
  // 调用方法
  $("#save").click(function(){
    var　parameter=$(".query").getparameter();
    console.log(parameter); 
　});
});

插件配置参数

暂无特殊参数