# 【jQuery技巧分享】深度解析与实战：如何自定义扩展$.val()方法实现更多功能

引言

在Web前端开发中，jQuery作为一款流行的JavaScript库，以其简洁易用的API设计深受开发者喜爱。其内置的`$.val()`方法主要用于获取或设置表单元素的值，但有时候我们可能需要扩展其功能以满足特定业务需求。本文将带你深入探讨如何自定义扩展jQuery的`$.val()`方法，使其拥有更多的实用功能。

##

一、$.val()方法基础认知

javascript
// 获取元素的值
var inputVal = $('#myInput').val();

// 设置元素的值
$('#myInput').val('New Value');

然而，原生的`$.val()`方法在处理复杂场景时可能会显得力不从心，例如处理多选框、复选框组的值，或者进行更复杂的逻辑判断等。

##

二、自定义扩展$.val()方法的需求分析

在实际项目中，我们可能会遇到如下需求：

1. 对于多选框或复选框，一次性获取所有选中项的值。

2. 根据特定规则对输入值进行格式化处理后再设置到元素上。

3. 在获取或设置值的同时触发自定义的回调函数。

为了满足这些需求，我们可以考虑通过扩展`$.val()`方法来实现。

##

三、自定义扩展$.val()方法的实现步骤

###

步骤1：理解$.fn.val源码及扩展原理

javascript
// 原始$.fn.val方法保存
var _val = $.fn.val;

// 重写$.fn.val方法
$.fn.val = function(value) {
    // 这里可以添加我们的自定义逻辑
};

###

步骤2：扩展$.val()以支持多选框和复选框组

javascript
$.fn.extend({
    val: function(value) {
        var elem = this[0];

        if (elem.tagName === 'SELECT' && elem.multiple) {
            // 处理多选框情况
            if (value === undefined) {
                return this.find(':selected').map(function() {
                    return $(this).val();
                }).get();
            } else {
                // 需要传入数组形式的值
                this.find('option').prop('selected', false);
                $.each(value, function(i, v) {
                    this.find('[value="'+v+'"]').prop('selected', true);
                });
                return this;
            }
        } else if (Array.isArray(this.length)) {
            // 处理复选框组情况
            // ...
        }

        // 调用原始$.fn.val方法
        return _val.apply(this, arguments);
    }
});

###

步骤3：增加值的格式化处理与回调函数

javascript
$.fn.extend({
    val: function(value, formatFn, callback) {
        var elem = this[0],
            returnValue;

        // 如果传入了value并且有formatFn，则先格式化再设置值
        if (value !== undefined && typeof formatFn === 'function') {
            value = formatFn.call(this, value);
        }

        // 设置值并触发原始$.fn.val方法
        returnValue = _val.call(this, value);

        // 执行回调函数
        if (typeof callback === 'function') {
            callback.call(this, value);
        }

        // 返回原始$.fn.val方法的返回值
        return returnValue;
    }
});

##

四、实战案例与应用示例

javascript
// 获取多选框的所有选中值
var selectedValues = $('select[multiple]').val();

// 设置复选框组，并在操作完成后执行回调
$('input[type="checkbox"]').val([true, false, true], function(value) {
    console.log('Checkbox values updated:', value);
});

// 格式化输入框的值并在设置后执行回调
$('#myInput').val('1234567890', function(val) {
    return val.replace(/\D/g, ''); // 只保留数字
}, function(formattedValue) {
    console.log('Formatted input value:', formattedValue);
});

总结来说，通过对jQuery的`$.val()`方法进行合理扩展，我们可以定制出更加灵活且强大的功能，从而更好地服务于我们的实际开发工作。当然，在进行此类扩展时，我们也需要注意保持代码的可读性和维护性，确保扩展功能既高效又稳定。同时，不断学习和完善自己的编程技能，方能在瞬息万变的前端世界中游刃有余。