首先，我们需要创建一个html页面来承载我们的计算器。html结构如下：
<!doctype html><html><head> <title>jquery计算器</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script></head><body> <div id="calculator"> <div class="display"> <input type="text" id="result" readonly> </div> <div class="keys"> <button id="clear">ac</button> <button id="sign">+/-</button> <button id="percent">%</button> <button class="operator" id="divide">/</button> <button class="number" id="seven">7</button> <button class="number" id="eight">8</button> <button class="number" id="nine">9</button> <button class="operator" id="multiply">*</button> <button class="number" id="four">4</button> <button class="number" id="five">5</button> <button class="number" id="six">6</button> <button class="operator" id="subtract">-</button> <button class="number" id="one">1</button> <button class="number" id="two">2</button> <button class="number" id="three">3</button> <button class="operator" id="add">+</button> <button class="number" id="zero">0</button> <button id="decimal">.</button> <button id="equal">=</button> </div> </div></body></html>
在这个html结构中，我们有一个计算器的容器，其中有两个子元素，一个是显示区域，另一个是按键区域。显示区域使用一个输入框来显示运算结果，而按键区域则包含了数字、运算符等按键，以及其他特殊按键（例如清除、取反、百分比等）。
接下来，我们需要创建一个css样式表来美化我们的计算器。css样式如下：
body { font-family: arial, sans-serif;}#calculator { margin: 0 auto; width: 310px; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}.display { padding: 10px; background-color: #f2f2f2; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: right;}#result { width: 100%; height: 40px; font-size: 24px; border: 0;}.keys { display: grid; grid-gap: 1px; grid-template-columns: repeat(4, 1fr); background-color: #efefef; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}button { width: 100%; height: 50px; font-size: 20px; border: 0; color: #fff; background-color: #4caf50; cursor: pointer; outline: none;}button:focus { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);}
在这个css样式中，我们设置了计算器的整体样式，包括边框、阴影、圆角等。为了让键盘按键可以紧密排列，我们使用了css网格布局技术，并设置了按键的样式。
接下来，我们需要编写一个javascript脚本来处理计算器的逻辑。我们使用jquery库来简化处理代码的编写和dom操作。
我们先要全局定义三个变量：
var firstnumber = '';var operator = '';var secondnumber = '';
这三个变量将分别存储用户输入的第一个数、运算符和第二个数。
我们使用jquery的事件处理函数来绑定按键事件。例如，当用户点击数字键时，我们将相应的数字添加到显示区域的输入框中。当用户点击加号和减号键时，我们将相应的运算符存储到变量operator中。当用户点击等号键时，我们根据当前运算符来执行相应的计算并将结果显示到输入框中。具体实现代码如下：
$(document).ready(function() { $('.number').click(function() { var input = $('#result').val(); var number = $(this).text(); // 判断当前输入框中是否已经有小数点 if (number === '.') { if (input.indexof('.') !== -1) { return; } if (input === '') { input = '0'; } } input += number; $('#result').val(input); }); $('.operator').click(function() { firstnumber = $('#result').val(); operator = $(this).text(); $('#result').val(''); }); $('#equal').click(function() { secondnumber = $('#result').val(); var result = 0; var num1 = parsefloat(firstnumber); var num2 = parsefloat(secondnumber); switch (operator) { case '+': result = num1 + num2; break; case '-': result = num1 - num2; break; case '*': result = num1 * num2; break; case '/': result = num1 / num2; break; } $('#result').val(result); }); $('#clear').click(function() { firstnumber = ''; operator = ''; secondnumber = ''; $('#result').val(''); }); $('#sign').click(function() { var input = $('#result').val(); var prefix = ''; if (input.charat(0) === '-') { prefix = input.substr(1); } else { prefix = '-' + input; } $('#result').val(prefix); }); $('#percent').click(function() { var input = $('#result').val(); var percent = parsefloat(input) / 100; $('#result').val(percent); }); $(document).keydown(function(event) { var key = event.key; if (!isnan(key)) { $('#' + key).click(); } else if (key === '+' || key === '-' || key === '*' || key === '/') { $('#' + key).click(); } else if (key === 'enter') { $('#equal').click(); } else if (key === '.') { $('#decimal').click(); } else if (event.ctrlkey && (key === 'c' || key === 'c')) { $('#clear').click(); } });});
在这个javascript脚本中，我们使用了jquery的事件处理函数click来绑定按键事件。当用户点击数字键时，我们从当前输入框的值中读取已经输入的数字，而如果按键是小数点时，我们需要判断当前输入框中是否已经存在小数点，如果存在则忽略该按键。当用户点击加号或减号时，我们将当前输入框中的数保存到变量firstnumber中，并将运算符保存到变量operator中，并清空当前输入框。当用户点击等号时，我们读取输入框中的值作为第二个数，并根据当前运算符来执行相应的计算，计算结果将显示在输入框中。当用户点击清除键、取反键或百分比键时，我们分别执行相应的操作。当用户按下键盘上的相应按键时，我们模拟相应的按键点击事件。例如，当用户按下数字键时，我们将触发相应数字键的点击事件。
最终，通过html页面、css样式表和javascript脚本的结合，我们实现了一个简单的计算器。用户可以通过鼠标或键盘操作来完成四则运算，并且可以进行小数运算以及其他特殊操作，例如清除、取反和百分比等。本文中的实现只是一个基础的原型，如果你需要实现更丰富的功能，例如支持括号、科学计算等，也可以在此基础上进行扩展。
以上就是利用jquery实现计算器的详细内容。