jQuery实现简单计算器功能

下面是jQuery实现简单计算器功能的完整攻略：

步骤一：HTML结构

首先要设计计算器的页面结构，可以采用HTML5的语义化标签进行设计，例如：

<div class="calculator">
  <input type="text" class="result" readonly="readonly">
  <ul class="keys">
    <li><a href="#" class="button">1</a></li>
    <li><a href="#" class="button">2</a></li>
    <li><a href="#" class="button">3</a></li>
    <li><a href="#" class="button">+</a></li>
    <li><a href="#" class="button">4</a></li>
    <li><a href="#" class="button">5</a></li>
    <li><a href="#" class="button">6</a></li>
    <li><a href="#" class="button">-</a></li>
    <li><a href="#" class="button">7</a></li>
    <li><a href="#" class="button">8</a></li>
    <li><a href="#" class="button">9</a></li>
    <li><a href="#" class="button">*</a></li>
    <li><a href="#" class="button">C</a></li>
    <li><a href="#" class="button">0</a></li>
    <li><a href="#" class="button">=</a></li>
    <li><a href="#" class="button">/</a></li>
  </ul>
</div>

其中，input标签用于显示计算结果，ul和li标签用于实现计算器的按钮。我们为每个按钮都添加了class名为“button”，这个class名用于方便我们在之后的JavaScript代码中进行绑定。

步骤二：JavaScript代码

我们使用jQuery库来实现计算器功能。首先，在HTML文件中引入jQuery库：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

然后，我们在JavaScript代码中获取计算器的按钮和显示计算结果的input标签：

var $buttons = $('.calculator .button');
var $result = $('.calculator .result');

接下来，我们要为每个按钮添加点击事件：

$buttons.click(function(){
  // 获取按钮上的文本内容
  var text = $(this).text();
  // 根据文本内容进行相应的操作
  switch (text) {
    case 'C':
      $result.val('');
      break;
    case '+':
    case '-':
    case '*':
    case '/':
      $result.val($result.val() + text);
      break;
    case '=':
      try {
        // 对计算表达式进行求值
        var res = eval($result.val());
        $result.val(res);
      } catch (ex) {
        $result.val('错误');
      }
      break;
    default:
      $result.val($result.val() + text);
      break;
  }
});

在这段代码中，我们首先获取点击的按钮的文本内容，然后使用switch语句根据不同的内容进行相应的操作。其中，如果点击了“C”按钮，则清空计算结果；如果点击了“+”、“-”、“*”、“/”按钮，则将按钮的文本内容追加到计算结果的末尾；如果点击了“=”按钮，则调用eval()函数对计算表达式进行求值，最后将结果显示在计算结果input标签中。

示例

1. 点击按钮1、2、3，计算结果显示“123”
2. 点击按钮“+”，计算结果显示“123+”
3. 点击按钮4、5、6，计算结果显示“123+456”
4. 点击按钮“=”，计算结果显示“579”
5. 点击按钮“C”，计算结果清空