当前位置：首页 > jquery

jquery 加法

2026-02-03 20:58:00jquery

jQuery 加法实现方法

在jQuery中实现加法运算通常涉及DOM元素值的获取、转换和计算。以下是几种常见场景的实现方式：

获取输入框值并相加

var num1 = parseFloat($('#input1').val());
var num2 = parseFloat($('#input2').val());
var sum = num1 + num2;
$('#result').text(sum);

对多个同类元素求和

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

动态添加数值计算

$('.add-btn').click(function() {
    var current = parseInt($('#counter').text());
    $('#counter').text(current + 1);
});

表单提交时计算

$('#calcForm').submit(function(e) {
    e.preventDefault();
    var x = parseInt($('#x').val());
    var y = parseInt($('#y').val());
    alert('计算结果: ' + (x + y));
});

注意事项

使用parseInt()或parseFloat()确保字符串转换为数值
处理空值和非数字输入的情况
浮点数计算注意精度问题
事件委托适用于动态添加的元素

扩展应用

结合jQuery UI可以实现滑动条数值相加等交互效果：

$('#slider1, #slider2').slider({
    slide: function() {
        var sum = $('#slider1').slider('value') + $('#slider2').slider('value');
        $('#sliderSum').text(sum);
    }
});

jquery 加法