jquery 计算

jQuery 计算操作

jQuery 提供了多种方法进行数学计算，包括基本运算、DOM 元素数值处理以及动画效果中的计算。以下是常见的计算场景和实现方法：

基本数学运算

使用 JavaScript 原生方法结合 jQuery 选择器获取数值并进行计算：

// 加法
var sum = Number($('#num1').val()) + Number($('#num2').val());

// 乘法
var product = parseFloat($('.price').text()) * parseInt($('.quantity').val());

// 保留小数
var result = (sum / 3).toFixed(2);

DOM 元素数值计算

遍历匹配元素并汇总值：

var total = 0;
$('.item-price').each(function() {
    total += parseFloat($(this).text());
});
$('#total').text(total);

动画与位置计算

获取元素尺寸或位置进行计算：

// 元素宽度总和
var combinedWidth = $('#box1').width() + $('#box2').width();

// 相对视口的中心位置
var centerX = $(window).width() / 2 - $('#modal').width() / 2;

表单数值验证

检查输入值是否满足条件：

$('#submit-btn').click(function() {
    var age = $('#age-input').val();
    if (age < 18) {
        alert('年龄需大于18岁');
    }
});

动态样式计算

根据计算结果调整样式：

// 根据容器宽度动态设置列数
var columnCount = Math.floor($('#container').width() / 200);
$('.grid-item').css('width', 100/columnCount + '%');

注意事项

• 使用 parseInt() 或 parseFloat() 转换字符串为数值
• 处理 NaN 情况：isNaN(value)
• 货币计算建议使用 toFixed() 保留两位小数
• 大量计算时考虑性能优化，避免频繁 DOM 操作

以上方法可根据实际需求组合使用，实现复杂的交互计算逻辑。