jquery获取当前点击对象的value方法

当我们需要获取当前点击对象的值（value）时，可以使用jQuery提供的val()方法。下面是获取当前点击对象的value方法的完整攻略，包含两条示例说明：

1. 获取当前点击对象的value方法

使用jQuery的click()方法，监听点击事件，当点击事件发生时，获取当前点击的对象，并使用val()方法获取其中的value值。

具体代码如下：

$(document).on('click', '.my-btn', function(){
  var currentValue = $(this).val();   //获取当前点击对象的value
  console.log(currentValue);  //输出当前点击对象的value
});

上述代码首先使用jQuery的on()方法，监听整个文档中所有class为“my-btn”的按钮的点击事件。当点击事件发生时，获取当前点击的对象，使用val()方法获取其中的value值，存入变量currentValue中。最后，使用console.log()函数输出currentValue。

2. 示例说明

假如我们要实现一个计算器，需要获取两个输入框的值，以及运算符按钮对应的值。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>计算器</title>
</head>
<body>
  <input type="text" id="num1">
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="text" id="num2">
  <button id="calculate">计算</button>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).on('click', '#calculate', function(){
      var num1 = $('#num1').val();   //获取num1的值
      var operator = $('#operator').val();   //获取运算符
      var num2 = $('#num2').val();   //获取num2的值

      console.log(num1, operator, num2);   //输出获取到的值
    });
  </script>
</body>
</html>

上述代码中，我们首先定义了两个输入框和一个下拉列表，用于输入数字和选择运算符，以及一个计算按钮。接着，在jQuery的click()方法中，分别使用val()函数获取了输入框和下拉列表中的值。最后，将获取到的值在console中输出。

当用户在两个输入框中输入数字，选择运算符，并点击“计算”按钮时，我们可以在控制台中看到获取到的值。这就是使用jQuery获取当前点击对象的value方法的一个应用场景。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery获取当前点击对象的value方法 - Python技术站

jquery获取当前点击对象的value方法

1. 获取当前点击对象的value方法

2. 示例说明

相关文章