当前位置：首页 > jquery

jquery 加减

2026-03-02 20:10:59jquery

jQuery 加减操作

在jQuery中，加减操作通常涉及DOM元素的属性修改、数值计算或动画效果。以下是几种常见的加减操作实现方式：

数值加减（基础计算）

通过jQuery获取元素的值并进行数学运算：

// 获取当前值并加1
var currentValue = parseInt($('#element').val());
$('#element').val(currentValue + 1);

// 减1操作
var currentValue = parseInt($('#element').val());
$('#element').val(currentValue - 1);

CSS属性加减

动态修改CSS属性值（如宽度、高度）：

// 增加宽度
var currentWidth = parseInt($('#box').css('width'));
$('#box').css('width', currentWidth + 10 + 'px');

// 减少高度
var currentHeight = parseInt($('#box').css('height'));
$('#box').css('height', currentHeight - 10 + 'px');

类名切换（隐性加减）

通过addClass/removeClass间接实现状态加减：

// 添加类（模拟“加”）
$('#button').addClass('active');

// 移除类（模拟“减”）
$('#button').removeClass('active');

动画中的加减

使用animate()实现视觉上的加减效果：

// 高度增加动画
$('#panel').animate({ height: '+=50px' }, 500);

// 透明度减少动画
$('#panel').animate({ opacity: '-=0.2' }, 500);

表单计数器示例

完整案例：点击按钮增减输入框数值

jquery 加减

<input type="text" id="counter" value="0">
<button id="increment">+</button>
<button id="decrement">-</button>

<script>
  $('#increment').click(function() {
    var val = parseInt($('#counter').val());
    $('#counter').val(val + 1);
  });

  $('#decrement').click(function() {
    var val = parseInt($('#counter').val());
    if(val > 0) $('#counter').val(val - 1);
  });
</script>